Miniatura de producto

convención dura

Thumbnail de producto

300

300×300 Formato cuadrado 1:1

Es la miniatura chica en la grilla o el catálogo. Usa 300×300 y que pese menos de 25 KB, así se ve bien y carga rápido.

Esta medida es una convención dura: si la cambias, algo se corta o se ve mal.

Suelta una imagen aquí

o elige un archivo para compararlo con esta medida

Comprimir para esta medida

Mira esta foto en todas partes

Para quien arma el sitio

WooCommerce genera woocommerce_thumbnail a 300 px (recorte cuadrado) y gallery_thumbnail a 100×100. Shopify usa 150–300 px en 1:1. Estos tamaños los genera y asume el software, así que no conviene inventar otros.

Ratio: 1:1
Desktop: 300×300
Mobile: 100×100
Rango: 150–300px
Peso objetivo: <25 KB
Formato: 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>

Documentación oficial: WooCommerce (abre en otra pestaña) Guías: Shopify (abre en otra pestaña)