Imagens no HTML parte 1

Tempo de leitura: 4 minutos

As imagens são elementos essenciais na criação de páginas web envolventes e informativas. Elas transmitem informações visuais de forma rápida e eficaz, tornando o conteúdo mais atraente e memorável.

No HTML, a tag <img> é responsável por inserir imagens em uma página. No entanto, para garantir que as imagens sejam renderizadas corretamente e contribuam para uma boa experiência do usuário, é fundamental entender os atributos e a semântica associados a essa tag.

Neste artigo, exploraremos em detalhes os elementos de imagem em HTML, sua importância para a acessibilidade e o SEO, e como utilizá-los de forma eficaz em seus projetos web.

A Tag <img>: A Porta de Entrada para as Imagens

A tag <img> é a principal ferramenta para inserir imagens em uma página HTML. Ela é um elemento em linha e não possui conteúdo, pois a imagem é carregada a partir de um arquivo externo.

Sintaxe básica:

HTML

<img src="caminho/para/imagem.jpg" alt="Texto alternativo">

• src: Especifica o endereço da imagem a ser carregada.
• alt: Fornece um texto alternativo que descreve a imagem. Esse texto é essencial para usuários com deficiência visual que utilizam leitores de tela, além de ser utilizado pelos mecanismos de busca para indexar a imagem.

Atributos Essenciais da Tag <img>

Além dos atributos src e alt, outros atributos podem ser utilizados para controlar o comportamento e a aparência das imagens:

• width: Define a largura da imagem em pixels.
• height: Define a altura da imagem em pixels.
• title: Fornece um título para a imagem, que aparece como uma dica de ferramenta quando o mouse passa sobre ela.
• loading: Especifica como a imagem deve ser carregada (por exemplo, lazy para carregar apenas quando a imagem estiver próxima de ser visualizada).
• sizes: Indica as diferentes dimensões da imagem para dispositivos com diferentes tamanhos de tela.

Os atributos loading e sizes da tag <img> são ferramentas poderosas para otimizar o carregamento de imagens em páginas web, melhorando a experiência do usuário e o desempenho do site.

O Atributo loading

O atributo loading controla quando o navegador começa a baixar uma imagem. Isso é especialmente útil para imagens que estão abaixo da dobra da página ou que não são imediatamente necessárias para a visualização inicial.

Valores possíveis:

• lazy: O navegador só baixa a imagem quando ela está próxima de entrar na viewport (área visível da página).
• eager: A imagem é baixada imediatamente, assim que o navegador encontra a tag <img>.

Exemplo:

HTML

<img src="minha-imagem.jpg" alt="Uma imagem linda" loading="lazy">

Quando usar:

• lazy: Ideal para imagens que não são essenciais para a visualização inicial da página, como imagens em galerias, posts de blog longos ou imagens em seções que o usuário pode não rolar até.
• eager: Adequado para imagens que são cruciais para a experiência do usuário, como o logotipo do site ou imagens que fazem parte do layout principal da página.

O Atributo sizes

O atributo sizes indica ao navegador os diferentes tamanhos da imagem que estão disponíveis, permitindo que ele escolha a imagem mais adequada para a tela do dispositivo. Isso é especialmente útil para sites responsivos, onde o layout se adapta a diferentes tamanhos de tela.

HTML

<img src="imagem.jpg" alt="Uma imagem responsiva" sizes="(max-width: 600px) 400px, 800px">

Explicação:

• (max-width: 600px) 400px: Se a largura máxima da viewport for de 600 pixels ou menos, o navegador deve escolher uma imagem com 400 pixels de largura.
• 800px: Se a largura máxima da viewport for maior que 600 pixels, o navegador deve escolher uma imagem com 800 pixels de largura.

Exemplo completo:

HTML

<picture>
  <source media="(min-width: 800px)" srcset="imagem-grande.jpg">
  <source media="(min-width: 600px)" srcset="imagem-media.jpg">
  <img src="imagem-pequena.jpg" alt="Uma imagem responsiva" sizes="(max-width: 600px) 400px, 800px">
</picture>

O elemento <picture> é utilizado para fornecer diferentes versões de uma imagem para diferentes dispositivos. O atributo media especifica o tipo de dispositivo para o qual cada versão da imagem é destinada.

Benefícios de Usar loading e sizes

• Melhora o desempenho: Ao carregar apenas as imagens necessárias e no tamanho ideal, você reduz o tempo de carregamento da página, melhorando a experiência do usuário.
• Economiza banda: O carregamento de imagens menores para dispositivos menores economiza dados e reduz o consumo de banda.
• Melhora o SEO: Páginas que carregam mais rápido tendem a ter um melhor ranqueamento nos resultados de pesquisa.

Conclusão

As imagens são elementos poderosos para criar páginas web mais atraentes e informativas. Ao utilizar as tags de imagem corretamente e prestar atenção à semântica, você pode melhorar a acessibilidade, o SEO e a experiência do usuário do seu site.

Dicas para utilizar imagens em HTML:

• Utilize o atributo loading="lazy" para melhorar o desempenho da página.
• Utilize formatos de imagem adequados.
• Otimize o tamanho das imagens.
• Utilize o atributo alt para todos as imagens.

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:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: