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.
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.
<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:
<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
