Dicas sobre inserção de imagens no HTML

Teoria:
Como sabemos a tag img é utilizada para adicionarmos imagens à nossa página.

No HTML recebe 2 atributos:

  • src = Atributo que define o caminho da imagem.
  • alt = Texto alternativo que será lido por leitores de tela (acessibilidade), ou caso a imagem não carregue.

Exemplo:

<img src="caminhoFotoQualquer.jpg" alt="descricaoDaFotoQualquer" />

Dica CSS:

  • Setar a propriedade: max-width: 100%;
    Definindo um max-width (largura máxima) de 100% para a imagem, ela não crescerá além do elemento pai ou do tamanho natural dela e manterá sua resolução sem perda da qualidade.

  • É melhor que utilizar a propriedade: width: 100%;
    Pois, nesse caso você estará setando de forma fixa o tamanho da imagem e ela será obrigada a ocupar todo o tamanho do elemento pai e caso seja maior que o tamanho natural dela a imagem perderá resolução e ficará borrada.

Dica de resolução
Para manter uma boa resolução, utilize imagens com cerca de duas vezes o tamanho máximo que ela irá ocupar na tela (em pixels).

Por exemplo: Uma imagem de largura de 300px adicione ela em um container cujo o tamanho máximo será de 150px.

<div> 
   <img src="caminhoFotoQualquer.jpg" alt="descricaoDaFotoQualquer"
</div>

.html

div {

   width: 150px;
}

img {
   max-width: 100%;
}

.css

A imagem está contida dentro da div cujo width largura é 150px com isso ela manterá sua resolução.

svg e png

  • Svg e png são formatos geralmente utilizados para imagens que não possuem fundo (o fundo se mescla com o do site).
    Sempre que possível utilize svg, eles podem escalar infinitamente sem perder resolução e geralmente são menores em tamanho (bytes).

Sites úteis
Squoosh (reduzir tamanho das imagens)

Unsplash (imagens gratuitas)

10 Likes

Boa !!
Aqui vai mais algumas dicas
Ao inserir imagens pense na semântica do html (importante).
a imagem só deverá ser adicionada direto no html se realmente querer mostrar algo com aquilo.
Se for inserir imagem apenas para estilização o correto será adicionar direto pelo css, assim mantendo o código mais limpo e também ajuda na acessibilidade para leitores de tela.
:wink:

3 Likes

Outra sugestão que posso dar para contribuir com o colega, é cuidar como descreve a sua imagem. Não faça isso:

Pense que haverão pessoas que não irão ver a imagem e só entenderam o que ela representa por essa frase. Então coloca algo como “Flor do deserto na cor rosa”, que seja entendível para quem for escutar/ler sem ver a imagem.

7 Likes

Excelente conteudo amigo. Se me permite, gostaria de agregar ao assunto falando das tags picture e figure que são utilizadas no html5

2 Likes

Sim! E não precisa escrever textão também no alt, deixem claro para que a pessoa consiga entender o que é a imagem, sem conter muito texto! Bem direto!

1 Like

Só complementando:

  • Se por algum motivo, a inserção via CSS não for prática, você pode continuar colocando imagens e ícones via HTML e deixá-los “invisíveis” para os leitores de tela. Essa é uma boa prática para tudo que for “meramente ilustrativo”. A implementação ficaria dessa forma:
<img src="assets/image.png" alt="" aria-hidden="true" />

O alt vazio junto com o aria-hidden impede que o leitor faça a leitura da imagem.

9 Likes

Deixo também o link de um artigo sobre boas práticas no alt de imagens.
https://medium.com/accessibility4devs/o-guia-definitivo-para-descrição-de-imagens-e-ícones-em-sites-aplicativos-e-redes-sociais-b48e8c99cd00

5 Likes

Caramba, só dicas top. Obrigado por compartilharem, ajuda muito no aprendizado.

1 Like

Só dica profissional !! Valeu, galera!

1 Like

Excelente dica!

Excelentes dicas glr! :clap::clap::clap:

1 Like

Suas dicas foram incríveis. Muito obrigada!

1 Like