COMO INSERIR IMAGENS NO HTML

As imagens servem para decorar a página HTML afim de de dar um valor maior na mensagem que deseja transmitir para o usuário.

Para inserir um imagem usamos a tag <img> com o atributo src. Por exemplo:

<img src="pasta/minha_imagem.png" />

No atributo src incluímos o caminho da imagem, podendo ser relativo ou absoluto. Exemplo:

Caminho absoluto:

<img src="https://site.com.br/images/minha_imagem.png" />

Aqui informamos o caminho completo com o nome site, da pasta e a imagem com sua extensão.

Caminho relativo:

<img src="images/minha_imagem.png" />

No caminho relativo informamos o caminho a partir de onde o arquivo é inserido até o caminho da imagem que deseja exibir na tela.

Atributos da tag IMG

Além do src podemos acrescentar mais atributos que vai facilar para os buscadores reconhecerem e identificarem tamanho da sua imagem. Segue:

Alt

<img src="images/minha_imagem.png" alt="Imagem de Exemplo" />

Esse atributo é reponsável para mostrar uma breve descrição da imagem que está sendo exibida na tela. Caso a imagem por algum motivo não apareça, no seu lugar vai aparecer o conteúdo que está dentro do atributo alt.

width e height

<img src="images/minha_imagem.png" alt="Imagem de Exemplo" width="150" height="150" />

Width e Height é largura e altura a ser exibida para o usuário. É importante informa as dimensões para melhorar as pontuações de SEO.

loading

<img src="images/minha_imagem.png" alt="Imagem de Exemplo" width="150" height="150" loading="lazy"/>

O atributo loading possui dois valores:

eager – Faz a imagem carregar de acordo com o carregamento da página. comportamento padrão.
lazy – A imagem é carregada quando o viewport é carregado, ou seja, quando o usuário vê na tela.

É importante realçar que o atributo loading faz importância do seu uso para melhorar a pontuação do SEO.

Quando o usuário acessar um site, no primeiro viewport carregado podemos usar o valor eager. Quando as imagens tiverem nos próximos viewport, necessidade de rolar a página, usamos o valor lazy.

É importante ter o HTML organizado e com os seus atributos informados. Isso gera boa pontuação para o SEO.

Gostou do post? Deixe o seu comentário abaixo.

Fonte: w3School