Imagens no HTML: As imagens são uma parte essencial de qualquer site. Elas adicionam cor, contexto e podem comunicar informações de maneira mais eficaz do que o texto sozinho.
Neste artigo, vamos explorar como as imagens são usadas em HTML, abordando tópicos como a tag img, a tag figure, a tag picture e como criar imagens responsivas com srcset.
Tag IMG
A tag img é a maneira mais básica de adicionar uma imagem a uma página da web. Ela tem um atributo src, que especifica o URL da imagem, e um atributo alt, que fornece um texto alternativo para a imagem se ela não puder ser carregada. Aqui está um exemplo:
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">
Tag FIGURE
A tag figure é usada para agrupar conteúdo relacionado, como uma imagem e sua legenda. Dentro de uma tag figure, você pode usar a tag figcaption para adicionar uma legenda à imagem. Veja um exemplo:
<figure>
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">
<figcaption>Esta é a legenda da imagem.</figcaption>
</figure>
Tag PICTURE
A tag picture permite que você especifique várias fontes de imagem para que o navegador possa escolher a mais adequada com base nas capacidades do dispositivo. Dentro de uma tag picture, você pode usar várias tags source com o atributo media para especificar quando cada fonte de imagem deve ser usada. Aqui está um exemplo:
<picture>
<source media="(min-width: 800px)" srcset="imagem-grande.jpg">
<source media="(min-width: 400px)" srcset="imagem-media.jpg">
<img src="imagem-pequena.jpg" alt="Descrição da imagem">
</picture>
Imagens Responsivas com SRCSET
O atributo srcset permite que você especifique várias versões de uma imagem para diferentes resoluções de tela. O navegador irá escolher a imagem mais adequada com base na resolução da tela e na densidade de pixels do dispositivo. Aqui está um exemplo:
<img src="imagem-padrao.jpg" srcset="imagem-2x.jpg 2x, imagem-3x.jpg 3x" alt="Descrição da imagem">
Conclusão
As imagens são uma parte crucial de qualquer site, e o HTML oferece várias maneiras de incorporá-las e controlar como elas são exibidas.
Seja usando a tag img simples, agrupando imagens e legendas com figure, controlando fontes de imagem com picture, ou criando imagens responsivas com srcset, você tem muitas opções para garantir que suas imagens sejam exibidas da melhor maneira possível.
Lembre-se sempre de fornecer texto alternativo para suas imagens para garantir a acessibilidade.
E por falar em desenvolvimento web, uma das coisas mais importantes é dar vida às suas criações e deixá-las acessíveis para todos através da internet. Faça como nós e disponibilize seus sites e sistemas hospedando-os na Hostinger! Clique aqui e saiba mais!!!
