Introdução à imagens HTML

Imagens / Tutorial HTML5

Como adicionar imagens no documento HTML?

Utilize o elemento <img> para inserir imagens no documento HTML especificando a origem da imagem no seu atributo src. Vejamos o exemplo a seguir:

<img src="dino.jpg">

No exemplo acima, o elemento <img> é usado para exibir a imagem do arquivo dino.jpg, especificado no atributo src.

Quais os melhores tipos de imagem?

Os principais formatos de imagem utilizados na web são:

  • WebP: Formato mais recente que oferece uma boa compressão com qualidade de imagem. Suporta transparência e animações.
  • PNG: Melhor para imagens que precisam de transparência ou que têm poucas cores. A compressão é sem perda de qualidade.
  • JPEG: Ideal para fotografias e imagens com muitas cores. Oferece uma boa compressão com perda de qualidade mínima.
  • GIF: Usado para imagens animadas. Suporta apenas 256 cores, o que o torna menos ideal para fotografias.
  • SVG: Ideal para gráficos vetoriais. Escala bem em diferentes tamanhos de tela sem perder qualidade e é altamente otimizado para a web.

Como adicionar imagens inline

Imagens inline são aquelas incorporadas diretamente no código HTML usando o formato "Base64". Isso pode ser útil para reduzir o número de requisições HTTP, mas pode aumentar o tamanho do arquivo HTML.

Para adicionar uma imagem inline, primeiro converta a imagem para Base64. Existem várias ferramentas online para isso. Em seguida, use o resultado no atributo src do elemento <img>:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABUElEQVR4AY2Sz0rDQBDG9+DF56gJaPWiTyF48TV8A9/Au0cPEin0IkVsjTYHQURE/HPQgyD+O2SzkETEptG2iVm/OGGTNhEcpsNk+X7NNzthcRxLKVERSZKgRw1F9/O1hYYOlQANw4+ei1Uc1m1jauKQlKx8ispNjW+z/wKj4IWA0ft9bkkBshTe2apn6f4O89qLshQVAO/Uvi/mkxbDSyoA92QZCt7RkWioypsF2QYwlsJg7q6ezhA8bELkW3qqu5yjBCDNLP1Gqu5dr0PMaKAoeALjHMwoBgAxzu/ff/m3pGS0EeX+41grAr1mNola4thYwfPWBNBvst7dxp+3hOsHAFdI8qPeoCK3hApL0XkdlRaHjPYYN3JLGUBo394X5izUb1dr2QatFbrN8LGhZDkgzJowtYF7WvxSBvYRAGAVgNNdioZB+eONhiE3ppWlH8pufndo6/ezAAAAAElFTkSuQmCC">

Base64 é um método de codificação que transforma os dados binários de uma imagem em uma string ASCII. Isso permite que os dados sejam incorporados diretamente no HTML ou CSS.

Boas práticas para uso de imagens

  1. Utilize imagens otimizadas: Imagens grandes podem deixar seu site lento. Utilize ferramentas para otimizar o tamanho das imagens sem perder qualidade.
  2. Descreva as imagens com o atributo alt: Isso melhora a acessibilidade e ajuda os motores de busca a entenderem o conteúdo da imagem.
  3. Use formatos de imagem adequados: Formatos como JPEG são ideais para fotografias, enquanto PNG é melhor para imagens com transparências. Considere também o uso do formato WebP, que oferece uma boa compressão com qualidade de imagem e é mais recente.
  4. Especifique dimensões: Defina sempre os atributos height e width para evitar problemas de carregamento na página.