Imagens responsivas em 2025 — Guia prático de srcset/sizes

Publicado: 18 de set. de 2025 · Tempo de leitura: 4 min · Por Unified Image Tools Editorial

translated: true Introdução

Imagens responsivas não são apenas “ter vários tamanhos”. O essencial é alinhar sizes ao layout para dar ao navegador as dicas corretas no algoritmo de escolha. Este é um guia prático para operação.

Primeiro, defina sizes (o núcleo)

O atributo sizes declara: “nesta condição, a largura de exibição é X”. Se estiver correto, o navegador escolhe o melhor candidato do srcset.

// Layout de artigo em uma coluna (máx. 768px)
// ≤768px usa 100vw; acima disso, 768px fixo
sizes="(max-width: 768px) 100vw, 768px"

// Cartões 2→3 colunas (≈46vw/31vw efetivos com espaçamentos)
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 46vw, 31vw"

Larguras representativas em passos de 1,5–2× são fáceis de manter. Ex.: 480/720/960/1280/1536.

Build para sustentar srcset

Automatize a geração de srcset e elimine erros humanos. Exemplo com Sharp:

import sharp from 'sharp'
const WIDTHS = [480, 720, 960, 1280, 1536]
async function buildSet(input: string, base: string) {
  for (const w of WIDTHS) {
    await sharp(input).resize({ width: w, withoutEnlargement: true })
      .webp({ quality: 78 })
      .toFile(`${base}-${w}.webp`)
  }
}

Com Next.js Image, basta declarar sizes corretamente; a variação é automática. Detalhes: Workflows de redimensionamento em 2025 — Corte 30–70% de desperdício a partir do layout.

LCP e preload

Para candidatos a LCP, como a imagem hero, além de sizes adequado, considere:

• priority / fetchPriority="high"
• Preload: <link rel="preload" as="image" imagesrcset="..." imagesizes="...">
• Evitar super‑resolução (siga a regra largura‑limite × DPR)

Bases de compressão: Estratégia Definitiva de Compressão de Imagens 2025 – Guia prático para otimizar velocidade preservando a qualidade.

Direção de arte com picture

Se quiser variar aspecto/enquadramento por tamanho, use picture:

<picture>
  <source media="(min-width: 1024px)" srcset="/hero-wide-1280.webp 1280w, /hero-wide-960.webp 960w" sizes="(min-width:1024px) 960px">
  <source media="(max-width: 1023px)" srcset="/hero-tall-720.webp 720w, /hero-tall-480.webp 480w" sizes="(max-width:1023px) 92vw">
  <img src="/hero-tall-720.webp" alt="...">
</picture>

Observação: mesmo com picture, a filosofia de sizes é a mesma. Declare a largura exibida (px/vw) por condição de mídia.

Ícones e SVG

• Para logos/ícones simples, prefira SVG. Suporta cores em CSS e media queries de forma flexível.
• Se precisar de PNG, indique 1x/2x e separe o srcset para tamanhos pequenos, melhorando a eficiência.

<img src="/icons/icon-32.png" srcset="/icons/icon-32.png 1x, /icons/icon-64.png 2x" width="32" height="32" alt="">

Para ícones e manifestos PWA: Pacote de Favicon + Manifest e Gerador de favicon.

Erros comuns

• Deixar sizes fixo em 100vw → em grades reais (≈33vw) causa sobre‑download.
• Não acompanhar mudanças de breakpoints/colunas → após redesign o peso dispara.
• Granularidade excessiva de larguras → piora a eficiência de cache e dilui os ganhos.

Checklist (operação)

• [ ] Largura máxima e DPR definidas por template
• [ ] sizes condiz com o layout (medido no Storybook/navegador)
• [ ] priority aplicado ao LCP quando necessário
• [ ] 3–5 larguras representativas bastam
• [ ] picture é realmente necessário (tente resolver com sizes antes)

Para concluir: otimização global do redimensionamento em Workflows de redimensionamento em 2025 — Corte 30–70% de desperdício a partir do layout; escolha de formatos em Estratégias de conversão de formatos 2025 — Guia WebP/AVIF/JPEG/PNG.

Diagnóstico e depuração

• Em Network (DevTools), verifique dimensões/transferência reais (condizem?).
• Em Elements, confira computed size/currentSrc de img (o sizes está surtindo efeito?).
• Varie a DPR em mobile/desktop e revalide (detectar sobre‑download em 2x/3x).
• Identifique o LCP em Performance e meça o efeito do preload.

Padrões aplicados (componentes)

• Receber o número de colunas do grid via props e gerar sizes automaticamente.
• picture + media para direção de arte; sincronize com breakpoints CSS num único lugar.
• Combine loading="lazy" com timing ótimo de interseção do viewport para manter CLS = 0.

Mãos à obra: inventário de uma página existente

1. Levante larguras máximas (corpo, sidebar, grids de cartões)
2. Para cada imagem, defina limite de pixels e 3–5 larguras representativas
3. Priorize candidatos a LCP (com preload/priority)
4. Meça transferência e LCP e ajuste as condições de sizes

FAQ

• P. Quão detalhado deve ser sizes?
  • R. Limite aos pontos em que a largura real muda (breakpoints). 2–4 condições são fáceis de manter.
• P. Priorizar picture ou sizes?
  • R. Tente primeiro com sizes. Use picture apenas quando precisar de direção de arte.
• P. O que é necessário no <Image> do Next.js?
  • R. Declarar sizes corretamente e, se necessário, priority/fetchPriority. srcset é gerado automaticamente.