ImageOptim Tools

With the variety of devices and screen sizes today, serving appropriately sized images is crucial for performance and user experience. Responsive images ensure users download only the resolution they need, reducing bandwidth usage and improving load times. This guide covers the complete implementation of responsive images in 2023.

The srcset and sizes Attributes

The modern solution for responsive images combines two HTML attributes:

<img 
  srcset="image-320w.jpg 320w,
          image-640w.jpg 640w,
          image-1024w.jpg 1024w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 1024px) 50vw,
         1024px"
  src="image-1024w.jpg" 
  alt="Descriptive alt text">

How it works:

• srcset defines the available image sources and their intrinsic widths
• sizes tells the browser how much space the image will occupy in the layout at different breakpoints
• The browser selects the most appropriate source based on device capabilities and viewport size

Art Direction with picture Element

For more control over image cropping at different viewports, use the <picture> element:

<picture>
  <source media="(min-width: 1024px)" srcset="desktop.jpg">
  <source media="(min-width: 768px)" srcset="tablet.jpg">
  <img src="mobile.jpg" alt="Descriptive alt text">
</picture>

Implementing Responsive Images

Step 1: Create multiple image versions

Generate different sizes of each image (typically 1x, 1.5x, and 2x for retina displays). Our Image Size Calculator can help determine optimal dimensions.

Step 2: Choose your approach

• Resolution switching (different sizes of the same image) → Use srcset with sizes
• Art direction (different crops/compositions) → Use <picture> with media attributes
• Format switching (modern formats with fallback) → Combine with <picture>

Step 3: Test across devices

Use browser dev tools to verify the correct images are loading at different viewport sizes.

Performance Considerations

• Lazy loading: Add loading="lazy" to offscreen images
• Preload critical images: Use <link rel="preload"> for hero images
• CDN delivery: Serve images from a content delivery network
• Compression: Always optimize images before deployment