Image Optimization: lazy loading formats WebP
Add loading=lazy to images, serve modern WebP and AVIF formats, use responsive images with srcset and sizes, and set explicit width and height to prevent layout shift.
Image Optimization: lazy loading formats WebP is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Images Dominate Page Weight
The median web page is around 2MB — and images account for roughly half of that. Optimising images is the single highest-impact performance task.
Modern Formats: WebP and AVIF
WebP is 25-35% smaller than JPEG with similar quality, supported by all modern browsers. AVIF is even smaller (50% reduction) but slower to encode. Use both with fallback.
The picture Element
Use <picture> to serve AVIF if supported, then WebP, then JPEG as final fallback.
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>Native Lazy Loading
Add loading="lazy" to images below the fold. The browser defers loading until the image approaches the viewport — zero JavaScript needed.
<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">
<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">Responsive Images with srcset and sizes
Serve smaller images to smaller screens. srcset lists candidate images with their widths; sizes tells the browser how wide the image displays at each breakpoint.
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="" width="800" height="600">Why Set Explicit width and height
The browser reserves space based on the width/height attributes — preventing layout shift when the image arrives. Modern browsers calculate aspect-ratio from these attributes automatically.
decoding="async"
Add decoding="async" to allow the browser to decode the image off the main thread, freeing it to paint other content.
<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">Image CDNs
Image CDNs (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) transform images on-the-fly: resize, reformat to WebP/AVIF, compress, and serve from edge caches.
<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">Next.js Image Component
Next.js's <Image> handles responsive srcset, WebP conversion, lazy loading, and blur placeholder out of the box.
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
placeholder="blur"
priority={isHero}
/>Compressing JPEGs and PNGs
If you can't switch to WebP, at least compress: use Squoosh (squoosh.app) for one-off images, ImageOptim for batch processing, or sharp in a build script.
SVGs for Icons and Logos
Use SVG for icons, logos, and any vector art. SVGs scale perfectly, are tiny, and can be styled with CSS. Inline small SVGs to avoid an extra HTTP request.
Quick Check
What HTML attribute tells the browser to defer loading an image until it approaches the viewport?
Recap: Image Optimization
Use modern formats (AVIF, WebP) via picture element. Add loading="lazy" below the fold, fetchpriority="high" on the hero. Set explicit width/height to prevent CLS. Use srcset/sizes for responsive images. Image CDNs automate transformation. Next.js Image handles it all. SVG for icons.
Frequently asked questions
Is the “Image Optimization: lazy loading formats WebP” lesson free?
Yes — the full text of “Image Optimization: lazy loading formats WebP” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Image Optimization: lazy loading formats WebP”?
Add loading=lazy to images, serve modern WebP and AVIF formats, use responsive images with srcset and sizes, and set explicit width and height to prevent layout shift. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Image Optimization: lazy loading formats WebP” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Core Web Vitals: LCP FID CLS
- Lighthouse Audits and Scoring
- Image Optimization: lazy loading formats WebP
- Code Splitting and Lazy Routes