Product thumbnail

hard convention

Product thumbnail

300

300×300 Square format 1:1

This is the small thumbnail in the grid or catalog. Use 300×300, weighing under 25 KB, so it looks right and loads fast.

This size is a hard convention: change it and something gets cropped or looks off.

Drop an image here

or pick a file to compare it with this size

Compress for this size

See this photo everywhere

For whoever builds the site

WooCommerce generates woocommerce_thumbnail at 300 px (square crop) and gallery_thumbnail at 100×100. Shopify uses 150–300 px at 1:1. The software generates and assumes these sizes, so there is little point in inventing your own.

Ratio: 1:1
Desktop: 300×300
Mobile: 100×100
Range: 150–300px
Target weight: <25 KB
Format: WebP

<picture>
  <source type="image/webp"
    srcset="/images/thumbnail-150.webp 150w,
            /images/thumbnail-300.webp 300w"
    sizes="(max-width: 768px) 100vw, 150px">
  <img
    src="/images/thumbnail-150.jpg"
    srcset="/images/thumbnail-150.jpg 150w,
            /images/thumbnail-300.jpg 300w"
    sizes="(max-width: 768px) 100vw, 150px"
    width="300" height="300"
    loading="lazy" decoding="async"
    alt="">
</picture>

Official docs: WooCommerce (opens in a new tab) Guides: Shopify (opens in a new tab)