Adicionando Imagens em HTML

Imagens são uma parte essencial do design web. Elas tornam uma página web mais atraente para o visitante. Podem ser facilmente incluídas em um documento HTML utilizando a tag <img>.

• src: atributo obrigatório. Seu valor é o caminho para a localização da imagem. O caminho pode ser absoluto ou relativo;
• alt: atributo obrigatório. Fornece um texto alternativo que pode ser exibido quando a imagem não pode ser renderizada;
• width e height: especificam o tamanho da imagem em pixels. Sem esses atributos, a imagem será exibida em seu tamanho original.

Atributo alt

A descrição da imagem deve ser informativa e significativa. Ela ajuda a descrever a imagem para pessoas com deficiência visual ou que não conseguem vê-la. Dessa forma, o navegador lerá o atributo alt, e o usuário poderá entender por que o site possui essa imagem.

Vamos imaginar o seguinte exemplo. Você possui uma fonte sobre corridas de cavalos. Deseja mostrar como os competidores se preparam para a corrida.

Valor inadequado para o atributo alt seria:

Um bom valor para o atributo alt será:

O texto alternativo "Um homem em um cavalo" é muito genérico e carece de contexto. Ele fornece uma descrição básica, mas não transmite detalhes úteis sobre a cena ou o propósito da imagem.

Atributo src

O atributo src pode utilizar caminhos absolutos e relativos para especificar a localização do arquivo de imagem.

Caminho Absoluto

Especifica a URL completa do arquivo de imagem no servidor web. Por exemplo:

Isso significa que o arquivo de imagem está localizado no link https://example.com/images/image.jpg na internet. Qualquer pessoa pode acessar a imagem usando esse link.

Por favor, analise o exemplo real no code sandbox abaixo:

Nota

Para examinar a estrutura de pastas de arquivos, arraste o controle deslizante no lado esquerdo da interface do code sandbox. No canto superior esquerdo, você encontrará um botão de menu representado por três linhas. Ao clicar nesse botão, você será direcionado para a organização das pastas de arquivos.

Caminho Relativo

Especifica a localização do arquivo de imagem em relação ao documento atual. Por exemplo:

Isso significa que o arquivo image.jpg está localizado no diretório images.

Por favor, analise o exemplo real fornecido no code sandbox abaixo. Você encontrará a pasta images, que contém o arquivo sun.png.

Nota

Para resumir a diferença entre caminhos relativos e absolutos, um caminho absoluto representa o link real que qualquer pessoa pode usar para acessar uma imagem. Por outro lado, um caminho relativo é um link dentro do contexto do seu próprio projeto. Ele se refere a uma imagem e caminho locais que qualquer pessoa dentro do projeto pode acessar.