Tema: images
-
Imagens responsivas com srcset, sizes e picture
O srcset com descritores de largura, combinado com o atributo sizes, permite ao navegador escolher o menor arquivo de imagem que preenche o espaço disponível na viewport e na densidade de pixels atuais. Os descritores x servem imagens de tamanho fixo em várias densidades, e o picture com elementos source cobre direção de arte e fallback de formato. Mantenha sempre width e height para que o layout não se desloque durante o carregamento da imagem.
-
Pipeline de otimização de imagens no build: originais, escala de tamanhos, formatos codificados e metadados removidos
Mantenha os originais fora do diretório público, gere todos os tamanhos e formatos servidos a partir deles num passo de build reproduzível, converta para sRGB e remova os metadados por padrão (o sharp faz isso, a menos que se chame keepMetadata; o cwebp não copia nenhum, a menos que -metadata indique o contrário), nomeie os arquivos por origem e largura ou por hash de conteúdo e verifique com o exiftool que não sobram dados EXIF nem GPS.
-
Entrega de imagens: AVIF e WebP com fallbacks, lazy loading e prioridade de busca
Sirva formatos modernos por meio de elementos source em picture com o atributo type e uma img em JPEG ou PNG como fallback (ou negocie via Accept com Vary). Aplique lazy loading apenas a imagens abaixo da primeira viewport, com width e height definidos, e marque a maior imagem acima da dobra com fetchpriority=high em vez de lazy.
Legível por máquina: JSON