HTML html

Imagem responsiva com largura, altura e texto alternativo

Exemplo de imagem que se adapta à tela, reserva espaço no carregamento e oferece uma alternativa textual útil.

Código 
<picture>
  <source
    type="image/avif"
    srcset="/imagens/grafico-480.avif 480w, /imagens/grafico-960.avif 960w">
  <source
    type="image/webp"
    srcset="/imagens/grafico-480.webp 480w, /imagens/grafico-960.webp 960w">
  <img
    src="/imagens/grafico-960.jpg"
    srcset="/imagens/grafico-480.jpg 480w, /imagens/grafico-960.jpg 960w"
    sizes="(max-width: 640px) 100vw, 960px"
    width="960"
    height="540"
    alt="Comparação do tempo médio de carregamento antes e depois da otimização"
    loading="lazy"
    decoding="async">
</picture>

Quando usar

Use em imagens de conteúdo. Informar largura e altura ajuda o navegador a reservar o espaço correto antes de baixar o arquivo.

Como adaptar ao seu projeto

Descreva no alt a informação transmitida pela imagem. Se ela for apenas decorativa, use alt vazio. Gere arquivos WebP ou AVIF nos tamanhos realmente necessários.

Antes de publicar

Não encha o texto alternativo de palavras-chave. Evite lazy loading na imagem principal que aparece logo no primeiro bloco da página.

Códigos relacionados

HTML

Estrutura HTML semântica para uma página

Um ponto de partida enxuto para páginas acessíveis, com cabeçalho, navegação, conteúdo principal e rodapé.

 Git

.gitignore para um projeto web

Base conservadora que evita versionar dependências, segredos locais, logs e arquivos gerados.

 JavaScript

Botão para copiar texto com Clipboard API

Função de cópia com retorno visual e alternativa para navegadores sem acesso à API moderna.