Miniatura de produto

convenção rígida

Thumbnail de produto

300

300×300 Formato quadrado 1:1

É a miniatura pequena na grade ou no catálogo. Use 300×300, pesando menos de 25 KB, assim fica bem e carrega rápido.

Esta medida é uma convenção rígida: mudá-la corta ou deixa algo estranho.

Solte uma imagem aqui

ou escolha um arquivo para compará-lo com esta medida

Comprimir para esta medida

Veja esta foto em todo lugar

Para quem monta o site

O WooCommerce gera woocommerce_thumbnail em 300 px (corte quadrado) e gallery_thumbnail em 100×100. A Shopify usa 150–300 px em 1:1. O software gera e assume esses tamanhos, então não vale a pena inventar outros.

Ratio: 1:1
Desktop: 300×300
Mobile: 100×100
Faixa: 150–300px
Peso alvo: <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>

Documentação oficial: WooCommerce (abre em outra aba) Guias: Shopify (abre em outra aba)