Imagens responsivas: compreender srcset, sizes e DPR

Separe píxeis do ficheiro, CSS e densidade

Um ficheiro com 800 píxeis de largura pode ocupar apenas 400 píxeis CSS. Com DPR 2, esse espaço corresponde aproximadamente a 800 píxeis físicos. É uma relação de planeamento; o navegador mantém liberdade de escolha.

Calcule primeiro o menor valor entre 800 e a largura da janela menos 32. Multiplique esse espaço pelo DPR. Não multiplique toda a janela se a imagem ocupa uma coluna estreita.

Use descritores de largura numa disposição variável

O descritor w indica a largura intrínseca verdadeira do recurso, não um ponto de quebra. sizes descreve o espaço esperado. Neste exemplo, janelas a partir de 832 píxeis CSS usam 800; as restantes descontam as duas margens.

O CSS faz parte do exemplo. Se o componente passar a ocupar metade de uma grelha, atualize sizes. Um valor antigo de largura total pode selecionar um ficheiro excessivo. O atributo deve descrever a disposição, não tamanhos de ecrã populares.

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

Preveja o candidato e confirme no navegador

Numa janela de 392 com DPR 2, o espaço é 360 e o alvo 720 píxeis; 800w é um candidato razoável. Num ecrã largo com DPR 2, o alvo é 1600. A conta explica a escolha, mas não força uma transferência específica.

O navegador pode conservar uma imagem grande já transferida ao reduzir a janela. Abra um contexto novo ou recarregue depois de definir janela e DPR. Produza ficheiros reais de 400, 800 e 1600 píxeis; renomear cópias do mesmo ficheiro não cria resoluções diferentes.

• Meça a largura real do elemento.
• Compare currentSrc com a imagem no painel de rede.
• Verifique dimensões, tipo de resposta, cache e bytes transferidos.
• Teste janelas estreita e larga com DPR 1 e DPR 2.
• Procure transbordo horizontal e deslocações durante a carga.

Use descritores x para uma imagem de tamanho fixo

Um logótipo sempre apresentado a 120 píxeis CSS pode usar um ficheiro de 120 como 1x e outro de 240 como 2x. São resoluções alternativas do mesmo tamanho visual. Não misture x e w no mesmo srcset.

Recortes diferentes são outra decisão de desenho. Use picture e condições source se o telemóvel precisar de um rosto aproximado e o computador de uma cena larga. O texto alternativo descreve o conteúdo significativo apresentado.

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

Planeie proporção e comportamento de carga

width e height permitem reservar espaço pela proporção antes da chegada da imagem; não impedem o CSS de alterar a largura. Na proporção 4:3, uma largura de 800 dá altura de 600; com 360, a altura é 270.

A carga diferida serve imagens mais abaixo, mas não deve atrasar indiscriminadamente a imagem principal visível à entrada. Candidatos, formato, compressão e estratégia de carga resolvem partes diferentes do custo.

Memória descodificada e tamanho transferido também diferem. Um WebP pequeno pode criar um grande buffer de píxeis. Calcule memória pelas dimensões e meça o ficheiro comprimido real.

Faça uma revisão antes de publicar

Guarde larguras, recorte, proporção, qualidade e sizes junto do componente para os atualizar em conjunto. Alterar o máximo de 800 para 1000 exige rever os candidatos.

Verifique src, todos os endereços de srcset, texto alternativo e espaço reservado. Reproduza a tabela com o cálculo de píxeis CSS e DPR e calcule alturas pela proporção. O resultado útil é a concordância entre ficheiros e disposição em dispositivos reais.