HTML: guia sobre imagens

COMPARTILHAR:

Neste tutorial, você aprenderá como incluir imagens em documentos HTML.

Inserir imagens em páginas da web

As imagens melhoram a aparência visual das páginas da web, tornando-as mais interessantes e coloridas.

A tag <img> é usada para inserir imagens em documentos HTML. É um elemento vazio que contém apenas atributos. A sintaxe da tag <img> pode ser dada por:

<img src="url" alt="algum_texto">

O exemplo a seguir insere três imagens em uma página da Web:

<img src="pipa.jpg" alt="Pipas empinando">
<img src="ceu.jpg" alt="Céu Nublado">
<img src="baloes.jpg" alt="Balões">

Cada imagem deve conter pelo menos dois atributos: atributo src e atributo alt.

pacote fullstack danki code

O atributo src informa ao navegador onde encontrar a imagem. Seu valor é a URL do arquivo de imagem.

O atributo alt fornece texto alternativo para a imagem caso a imagem não esteja disponível ou não possa ser exibida por algum motivo. Seu valor deve ser um substituto significativo para a imagem.

Nota: Assim como <br>, o elemento <img> é um elemento vazio sem tag de fechamento. No entanto, em XHTML termina com “/>”.

Dica: Se o usuário não conseguir visualizar a imagem devido a uma conexão lenta por algum motivo, a imagem não estará disponível no URL especificado ou se o usuário estiver usando um leitor de tela ou um navegador não gráfico.

Defina a largura e a altura da imagem

As propriedades de largura (width) e altura (height) são usadas para especificar a largura e a altura da imagem.

Os valores dessas propriedades são interpretados em pixels por padrão.

<img src="kites.jpg" alt="Pipas voando" width="300" height="300">
<img src="sky.jpg" alt="Céu Nublado" width="250" height="150">
<img src="baloes.jpg" alt="Balões" width="200" height="200">

Você também pode usar o atributo style para especificar a largura e a altura da imagem. Isso evita que a folha de estilo redimensione acidentalmente a imagem, pois os estilos embutidos têm a prioridade mais alta.

CURSO GRATUITO DE DESENVOLVIMENTO WEB
<img src="kites.jpg" alt="Pipas voando" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Céu Nublado" style="width: 250px; height: 150px;">
<img src="baloes.jpg" alt="Balões" style="width: 200px; height: 200px;">

Nota: é uma boa ideia especificar as propriedades de largura e altura para a imagem para que o navegador possa alocar o máximo de espaço possível para a imagem antes de baixá-la. Caso contrário, o carregamento da imagem pode fazer com que o layout do seu site fique distorcido ou trêmulo.

Usando elementos de imagem HTML5

Às vezes, dimensionar a imagem para cima ou para baixo para caber em diferentes dispositivos (ou tamanhos de tela) não funciona conforme o esperado. Além disso, reduzir o tamanho da imagem usando as propriedades ou atributos de largura e altura não reduz o tamanho do arquivo original. Para resolver esses problemas, o HTML5 introduziu a tag <picture>, permitindo definir várias versões de uma imagem para segmentar diferentes tipos de dispositivos.

O elemento <picture> contém zero ou mais elementos <source>, cada um apontando para uma fonte de imagem diferente e, finalmente, um elemento <img>. Além disso, cada elemento <source> tem um atributo de mídia, que especifica uma condição de mídia (semelhante a uma consulta de mídia) que os navegadores usam para determinar quando uma determinada fonte deve ser usada. Vamos tentar um exemplo:

<picture>
     <source media="(min-width: 1000px)" srcset="logo-large.png">
     <source media="(max-width: 500px)" srcset="logo-small.png">
     <img src="logo.png" alt="Minha logo">
</picture>

Nota: O navegador avalia cada elemento filho e seleciona a melhor correspondência entre eles. Se nenhuma correspondência for encontrada, a URL do atributo do elemento src será usada. Além disso, a tag deve ser especificada como o último filho do elemento .

Usar mapas de imagem

Os mapas de imagem permitem definir pontos de acesso em imagens que atuam como hiperlinks.

A ideia básica por trás da criação de um mapa de imagem é fornecer uma maneira fácil de vincular partes de uma imagem sem dividi-las em arquivos de imagem separados. Por exemplo, um mapa-múndi pode ter hiperlinks de cada país para mais informações sobre esse país.

Vamos tentar um exemplo simples para ver como funciona:

CURSO GRATUITO DE PYTHON
<img src="objetos.png" usemap="#objetos" alt="Objetos">
<map name="objetos">
    <area shape="circle" coords="137,231,71" href="relogio.html" alt="Relógio">
    <area shape="poly" coords="363,146,273,302,452,300" href="sinal.html" alt="Sinal">
    <area shape="rect" coords="520,160,641,302" href="livro.html" alt="Livro">
</map>

O atributo name da tag <map> é usado para referenciar o mapa da tag <img> usando seu atributo usemap. A tag <area> é usada dentro do elemento <map> para definir a área clicável na imagem. Você pode definir qualquer número de áreas clicáveis ​​na imagem.

Nota: Os mapas de imagem não devem ser usados ​​para navegação no site. Eles não são amigáveis ​​aos motores de busca. Um uso eficaz de mapas de imagem é com mapas geográficos.

Dica: Existem muitas ferramentas online disponíveis para criar mapas de imagem com html. Alguns editores avançados, como o Adobe Dreamweaver, também fornecem um conjunto de ferramentas para criar mapas de imagens com html facilidade.

Leia também: HTML: guia sobre estilos

COMPARTILHAR:
brayan

Brayan Monteiro

Bacharel em Sistemas de Informação pela Faculdade Maurício de Nassau e desenvolvedor PHP. Além de programador, produzo conteúdo e gerencio blogs. Sou especialista em desenvolvimento de software, SEO de sites e em negócios digitais.