Imagens no HTML parte 1

Tempo de leitura: 4 minutos

Imagens no HTML: As imagens são elementos cruciais para a experiência do usuário, pois transmitem informações de forma rápida e tornam o conteúdo mais envolvente. No HTML, a tag <img> é a porta de entrada para a mídia visual.

No entanto, em um mundo de dispositivos e larguras de banda variadas, usar imagens corretamente vai além de apenas inserir a tag. É preciso entender a semântica, a acessibilidade e, crucialmente, o desempenho.

Neste artigo, vamos explorar a tag <img> e as técnicas avançadas de otimização que garantem que suas imagens sejam carregadas de forma inteligente e eficiente.

1. A Tag `<img>`: O Essencial

A tag <img> é um elemento vazio (não possui tag de fechamento) e se comporta como um elemento em linha (ou replaced element).

Sintaxe e Atributos Fundamentais

Atributo	Função	Importância
`src`	Source (Fonte): Especifica o endereço (URL ou caminho local) da imagem a ser carregada.	Obrigatório para exibir a imagem.
`alt`	Texto Alternativo: Fornece uma descrição concisa da imagem.	Crucial para Acessibilidade (leitores de tela) e SEO (indexação da imagem).
`width` / `height`	Define a largura e altura da imagem em pixels.	Essencial para Performance! Evita o Cumulative Layout Shift (CLS), reservando espaço antes que a imagem carregue.

Exemplo Básico e Semântico:

HTML

<img src="caminho/para/logo.png" alt="Logotipo da Empresa [Nome]" width="100" height="100">

2. Otimização de Carregamento (`loading`)

Controlar quando o navegador começa a baixar uma imagem é vital para a performance. O atributo loading permite implementar o lazy loading nativo.

Valor do loading	Função	Quando Usar
`eager`	(Padrão): O navegador baixa a imagem imediatamente (ideal para logotipos ou imagens acima da dobra).	Para imagens cruciais à visualização inicial.
`lazy`	Carregamento Preguiçoso: A imagem só é baixada quando está prestes a entrar na área visível (viewport).	Ideal para imagens em galerias, rodapés ou seções abaixo da dobra.

Exemplo:

HTML

<img src="galeria-01.jpg" alt="Foto da paisagem" loading="lazy">

3. Imagens Responsivas e Condicionais (`srcset` e `sizes`)

Para garantir que um dispositivo móvel não baixe uma imagem gigante desnecessariamente, o HTML5 introduziu os atributos srcset e sizes, que trabalham em conjunto para permitir que o navegador escolha a melhor fonte de imagem.

A. `srcset` (Fontes de Imagem)

Função: Lista as fontes alternativas da mesma imagem, cada uma com uma largura intrínseca (w) ou densidade de pixel (x).
Exemplo:

HTML

srcset="imagem-400.jpg 400w, imagem-800.jpg 800w, imagem-1200.jpg 1200w"

B. `sizes` (Regras de Tamanho)

Função: Informa ao navegador quanto espaço a imagem irá ocupar na tela em diferentes condições (media queries).
Parceria: O navegador usa o sizes para calcular a melhor escolha e, em seguida, seleciona o arquivo mais próximo (do srcset) que atenda àquele tamanho.

Exemplo de Uso Conjunto:

HTML

<img src="padrao.jpg" 
     srcset="img-pequena.jpg 400w, img-media.jpg 800w, img-grande.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="Imagem Responsiva Otimizada">

Tradução do sizes:

Se a largura da tela for até 600px, a imagem ocupará 100% da largura da viewport (100vw).
Se a largura da tela for até 1200px, a imagem ocupará 50% da largura da viewport (50vw).
Caso contrário (em telas grandes), a imagem terá 800px de largura fixa.

4. O Elemento `<picture>` (Direção de Arte)

O elemento <picture> é usado para o conceito de direção de arte, onde você deseja que o navegador exiba arquivos de imagem completamente diferentes dependendo de fatores como o tamanho da tela ou o suporte a formatos (ex: WebP vs. JPEG).

<source>: Define as condições (media ou type) e as fontes de imagem (srcset).
<img>: Serve como fallback (a última opção e a única tag obrigatória).

Exemplo Condicional (Adaptado do seu artigo):

HTML

<picture>
  <source media="(min-width: 800px)" srcset="imagem-grande.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="imagem-grande.jpg">
  
  <source media="(min-width: 600px)" srcset="imagem-media.jpg">
  
  <img src="imagem-pequena.jpg" alt="Descrição da imagem final">
</picture>

✅ Conclusão Imagens no HTML parte 1

Dominar as imagens no HTML, ou seja, a tag <img> e seus atributos modernos é fundamental para o desenvolvimento web. Ao aplicar técnicas como o loading="lazy", e usar srcset/sizes ou o elemento <picture>, você garante que suas imagens não apenas enriqueçam o conteúdo, mas também contribuam positivamente para a velocidade de carregamento, o SEO e a acessibilidade da sua página.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: