HTML moderno: estrutura, semântica e acessibilidade
Imagens costumam representar grande parte dos bytes de uma página. Uma implementação moderna precisa escolher a fonte adequada para cada tela, reservar o espaço antes do download, carregar apenas quando necessário e oferecer uma alternativa textual coerente.
alt depende da função
Descreva a informação que a imagem acrescenta, não cada detalhe visual. Se ela for decorativa, use alt="". Se estiver dentro de um link, o texto alternativo deve comunicar o destino. Não repita legendas e não comece com “imagem de”.
Dimensões e carregamento
Declare width e height com a proporção intrínseca para o navegador reservar espaço e reduzir mudanças de layout. Use loading="lazy" em imagens abaixo da dobra, mas não na imagem principal visível no primeiro carregamento.
<imgn src="produto-960.webp"n srcset="produto-480.webp 480w, produto-960.webp 960w"n sizes="(max-width: 640px) 100vw, 50vw"n width="960" height="640"n alt="Mochila azul com compartimento frontal"n loading="lazy">srcset, sizes e picture
srcset oferece variações de resolução; sizes informa quanto espaço a imagem ocupará. Use <picture> quando precisar trocar enquadramento ou formato. Mantenha img como fallback e como portador do alt.
Checklist de qualidade
- Toda imagem informativa tem alt adequado ao contexto.
- width e height preservam a proporção.
- A imagem principal não foi marcada para lazy loading.
Pratique agora
Exporte uma imagem em duas larguras, implemente srcset e sizes e compare a fonte escolhida pelo navegador em tela larga e estreita.
