Imagens

As imagens são uma parte essencial do web design. Elas tornam uma página web atrativa 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 o local 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, uma imagem será renderizada em seu tamanho original.

Atributo alt

Tornamos a descrição da imagem informativa e significativa. Isso ajuda a descrever a imagem para pessoas que são visualmente deficientes ou incapazes de vê-la. Dessa forma, o navegador lerá o atributo alt, e o usuário poderá entender o motivo de termos essa imagem.

Imaginemos o seguinte exemplo. Temos uma fonte sobre corridas de cavalo. Queremos mostrar como os competidores se preparam para a corrida.

Um valor inadequado para o atributo alt seria:

Um valor adequado para o atributo alt seria:

Atributo src

O atributo src pode utilizar tanto caminhos absolutos quanto 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:

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, inspecione o seguinte exemplo real no CodeSandbox abaixo:

Nota

Para examinar a estrutura das pastas de arquivos, arraste o controle deslizante no lado esquerdo da interface do CodeSandbox. No canto superior esquerdo, você encontrará um botão em forma de hambúrguer representado por três listras. Clicar neste botão o levará à 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, inspecione o exemplo real fornecido no CodeSandbox 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 efetivo que qualquer pessoa pode usar para acessar uma imagem. Por outro lado, um caminho relativo é um link no contexto do seu próprio projeto. Ele se refere a uma imagem e caminho local que qualquer pessoa dentro do projeto pode acessar.