Imagem principal da capa

flexível

Hero

1920

1920×1080 Formato horizontal 16:9

É a imagem grande no topo da sua página. Use 1920×1080, pesando menos de 300 KB, assim fica bem e carrega rápido.

Esta medida é flexível: o que importa é a forma (o ratio), não o número exato.

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

1920×1080 é costume, não requisito. Qualquer largura entre 1280 e 2560 com um bom srcset funciona; a altura é decisão de design. Para mobile, versão própria (~750×422, servida em 2x). O conteúdo crítico fica nos 70–80% centrais: o corte por viewport é normal.

Ratio: 16:9
Desktop: 1920×1080
Mobile: 750×422
Faixa: 1280–2560px
Peso alvo: <300 KB
Formato: WebP

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

Guias: Shopify (abre em outra aba) Crazy Egg (abre em outra aba) Squarespace (abre em outra aba)