Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Responsive images ensure users get the optimal image for their device - not too large (wasting bandwidth) and not too small (looking pixelated). This improves performance, saves data, and enhances user experience.
You provide multiple image sources, and the browser automatically selects the most appropriate one based on the device's screen size and resolution.
<img
src="small.jpg"
srcset="
small.jpg 400w,
medium.jpg 800w,
large.jpg 1200w
"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Responsive image"
>Tells browser the intrinsic width of each image
srcset="
small.jpg 400w,
large.jpg 1200w
"For Retina/HiDPI screens
srcset="
logo.jpg 1x,
logo-2x.jpg 2x
"The sizes attribute works with srcset to tell the browser the display size of the image at different breakpoints.
sizes="(max-width: 600px) 100vw, 50vw"Breakpoint condition
Image takes 100% width
Image takes 50% width
sizes="100vw"→ Full viewport widthsizes="(max-width: 768px) 100vw, 50vw"→ Full on mobile, half on desktopsizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"→ Multiple breakpointsThe <picture> element gives you full control over which image to display. Use it for art direction (different crops) or modern format support (WebP, AVIF).
<picture>
<source
media="(min-width: 1024px)"
srcset="desktop.jpg">
<source
media="(min-width: 768px)"
srcset="tablet.jpg">
<img
src="mobile.jpg"
alt="Responsive image">
</picture>Different image crops for different screens
Serve WebP/AVIF with JPEG fallback
<picture>
<source type="image/avif">
<source type="image/webp">
<img src="fallback.jpg">
</picture><source>. Always put most specific (modern formats, largest breakpoints) first!<picture>
<!-- Newest format first -->
<source srcset="image.avif" type="image/avif">
<!-- Second newest -->
<source srcset="image.webp" type="image/webp">
<!-- Universal fallback -->
<img src="image.jpg" alt="Description">
</picture>Lazy loading delays image loading until they're about to enter the viewport. This dramatically improves initial page load time.
<img
src="image.jpg"
loading="lazy"
alt="Lazy loaded image">✅ Simple, native, no JavaScript required
loading="lazy" for all images below the fold. Don't lazy load hero images or critical above-the-fold content!Content images that scale
E-commerce listings
Responsive content images
1x, 2x, 3x versions
Different crops per breakpoint
WebP/AVIF with fallbacks
Landscape vs portrait
Different designs per size
See srcset, sizes, picture, and lazy loading in practical examples
Browser automatically selects appropriate image size based on viewport width
<div class="image-container">
<h3>srcset with Width Descriptors</h3>
<p class="description">Browser chooses the best image size based on viewport width</p>
<img
src="https://picsum.photos/400/300?image=1"
srcset="
https://picsum.photos/400/300?image=1 400w,
https://picsum.photos/800/600?image=1 800w,
https://picsum.photos/1200/900?image=1 1200w
"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
alt="Responsive landscape"
class="responsive-img"
>
<div class="info-badge">
📊 Browser selects optimal size
</div>
</div>
<p class="note">🖼️ Resize browser to see different image sizes load</p>Loading preview...
Serve high-resolution images for Retina/HiDPI displays
<div class="image-container">
<h3>Pixel Density for Retina Displays</h3>
<p class="description">Sharp images on high-resolution screens</p>
<img
src="https://picsum.photos/200/200?image=2"
srcset="
https://picsum.photos/200/200?image=2 1x,
https://picsum.photos/400/400?image=2 2x
"
alt="Logo or icon"
class="retina-img"
>
<div class="info-badge">
✨ 2x sharper on Retina displays
</div>
</div>
<p class="note">💎 Use 1x and 2x descriptors for icons and logos</p>Loading preview...
Serve different images for different screen sizes and orientations
<div class="image-container">
<h3>Art Direction with Picture</h3>
<p class="description">Desktop shows wide landscape, mobile shows portrait crop</p>
<picture>
<source
media="(min-width: 1024px)"
srcset="https://picsum.photos/1200/400?image=3">
<source
media="(min-width: 768px)"
srcset="https://picsum.photos/800/600?image=3">
<img
src="https://picsum.photos/400/600?image=3"
alt="Art direction example"
class="responsive-img"
>
</picture>
<div class="info-badge">
🎨 Different crops per breakpoint
</div>
</div>
<p class="note">📱 Resize window to see different image crops</p>Loading preview...
Defer image loading until needed to improve page load performance
<div class="image-container">
<h3>Lazy Loading Images</h3>
<p class="description">Images load only when scrolling into viewport</p>
<img
src="https://picsum.photos/800/400?image=4"
loading="lazy"
alt="Lazy loaded image"
class="responsive-img"
>
<div class="info-badge">
🚀 Faster initial page load
</div>
</div>
<p class="note">⚡ Add loading="lazy" to defer offscreen images</p>Loading preview...
loading="lazy" for below-foldPlay around with srcset, sizes, and picture examples