Responsive Product Images for E-Commerce Sites

Responsive Images for E-Commerce

E-commerce product pages have unique image requirements: multiple sizes for grids and detail views, zoom functionality, and gallery thumbnails that need to load fast.

Product Grid Thumbnails

<img
  src="product-640w.webp"
  srcset="product-160w.webp 160w,
          product-320w.webp 320w,
          product-480w.webp 480w,
          product-640w.webp 640w"
  sizes="(max-width: 640px) 50vw,
         (max-width: 1024px) 33vw,
         25vw"
  alt="Blue running shoe - side view"
  loading="lazy"
  decoding="async"
  width="640"
  height="640"
/>

Product Detail Hero

<picture>
  <source
    type="image/avif"
    srcset="shoe-detail-480w.avif 480w,
            shoe-detail-768w.avif 768w,
            shoe-detail-1024w.avif 1024w,
            shoe-detail-1536w.avif 1536w"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
  <source
    type="image/webp"
    srcset="shoe-detail-480w.webp 480w,
            shoe-detail-768w.webp 768w,
            shoe-detail-1024w.webp 1024w,
            shoe-detail-1536w.webp 1536w"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
  <img
    src="shoe-detail-1024w.jpg"
    alt="Blue running shoe - detailed side view"
    loading="eager"
    fetchpriority="high"
    decoding="async"
    width="1536"
    height="1536"
  />
</picture>

Gallery Thumbnail Strip

<img
  src="thumb-160w.webp"
  srcset="thumb-80w.webp 80w,
          thumb-160w.webp 160w"
  sizes="80px"
  alt="Shoe view 2"
  loading="lazy"
  width="80"
  height="80"
/>

Key Considerations for E-Commerce

1. First product image should be loading="eager" with fetchpriority="high"
2. Gallery thumbnails should be loading="lazy" with small srcset variants
3. Use square aspect ratios (1:1) for consistent grid layouts
4. Serve AVIF first for maximum compression savings on high-volume pages
5. Consider content-visibility: auto for off-screen product cards