Como usar srcset, sizes e picture corretamente
As imagens responsivas permitem que o navegador escolha o menor arquivo útil para a tela e o layout de cada visitante. O segredo é fornecer variantes de largura confiáveis, descrever o espaço renderizado com sizes e manter as decisões de conteúdo acessível na sua página, não em um gerador de imagens.
Por PixoPublicado Atualizado
Gere variantes de largura reais
Comece com vários arquivos que preservam a proporção da origem, como larguras de 320, 640, 960, 1280 e 1920 pixels. Não amplie um original menor, e não mantenha uma derivada maior que a origem sem um motivo específico. O gerador de imagem responsiva do Pixo aplica as duas regras e grava as dimensões e os tipos MIME resultantes em manifest.json.
Use descritores de largura no srcset
Liste cada candidata com sua largura real em pixels, por exemplo image-640w.webp 640w. O descritor w não é a largura CSS nem um multiplicador de densidade; ele informa ao navegador a largura intrínseca daquele arquivo. Todo caminho no srcset gerado aponta para um recurso incluído no ZIP, então copie o diretório de recursos e a marcação juntos.
Faça o sizes corresponder ao layout
O atributo sizes descreve com que largura a imagem vai ser renderizada antes de o navegador baixá-la. Um ponto de partida comum é (min-width: 1024px) 50vw, 100vw para uma imagem que usa metade da viewport no desktop e a viewport inteira em telas menores. Substitua esse exemplo pelos seus breakpoints de CSS e larguras de espaço reais; um sizes impreciso pode fazer o navegador escolher arquivos desnecessariamente grandes ou visivelmente borrados.
Use picture para escolhas de formato
Um elemento picture pode oferecer fontes WebP mantendo um img de reserva em JPEG ou PNG. Coloque os elementos source primeiro e o elemento img por último. O navegador seleciona uma fonte compatível e ainda usa o elemento img para a requisição de reserva, a largura e a altura intrínsecas, o comportamento de carregamento e o texto alternativo acessível.
Mantenha width, height e alt na página
Defina width e height a partir do manifesto gerado para que o navegador possa reservar o espaço correto de proporção e reduzir mudanças de layout. O Pixo deixa o alt vazio de propósito porque só o autor da página sabe se a imagem é informativa, funcional ou decorativa. Escreva um texto alternativo conciso e contextual para imagens com significado, e deixe o alt vazio apenas para imagens decorativas.
Implante e verifique o pacote completo
Descompacte o pacote, publique o diretório de recursos sem renomear os arquivos, cole o picture.html na sua página e ajuste o sizes e o alt. Depois teste em viewports estreitas e largas, confirme que o painel Network solicita apenas uma candidata em vez do conjunto inteiro, e verifique se toda URL solicitada retorna com o tipo MIME de imagem esperado.