Imagens HTML
As imagens podem melhorar o design e a aparência de uma página da web.
Exemplo
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Exemplo
<img src="img_girl.jpg"
alt="Girl in a jacket">
Exemplo
<img src="img_chania.jpg"
alt="Flowers in Chania">
Sintaxe de imagens HTML
A tag HTML <img>é usada para incorporar uma imagem em uma página da web.
As imagens não são tecnicamente inseridas em uma página da web; as imagens estão vinculadas a páginas da web. A <img>tag cria um espaço de retenção para a imagem referenciada.
A <img>tag está vazia, contém apenas atributos e não possui uma tag de fechamento.
A <img>tag tem dois atributos obrigatórios:
- src - Especifica o caminho para a imagem
- alt - Especifica um texto alternativo para a imagem
Sintaxe
<img src="url" alt="alternatetext">
O atributo src
O srcatributo obrigatório especifica o caminho (URL) para a imagem.
Nota: Quando uma página web é carregada, é o navegador, nesse momento, que obtém a imagem de um servidor web e a insere na página. Portanto, certifique-se de que a imagem realmente permaneça no mesmo local em relação à página da web, caso contrário, seus visitantes receberão um ícone de link quebrado. O ícone do link quebrado e o alttexto são mostrados se o navegador não encontrar a imagem.
Exemplo
<img src="img_chania.jpg" alt="Flowers
in Chania">
O atributo alt
O altatributo required fornece um texto alternativo para uma imagem, se o usuário por algum motivo não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou se o usuário usar um leitor de tela).
O valor do altatributo deve descrever a imagem:
Exemplo
<img src="img_chania.jpg" alt="Flowers
in Chania">
Se um navegador não encontrar uma imagem, ele exibirá o valor do alt
atributo:
Exemplo
<img src="wrongname.gif" alt="Flowers
in Chania">
Dica: Um leitor de tela é um programa de software que lê o código HTML e permite que o usuário "ouça" o conteúdo. Os leitores de tela são úteis para pessoas com deficiência visual ou com deficiência de aprendizado.
Tamanho da imagem - largura e altura
Você pode usar o styleatributo para especificar a largura e a altura de uma imagem.
Exemplo
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Como alternativa, você pode usar os atributos widthe :height
Exemplo
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Os atributos widthe heightsempre definem a largura e a altura da imagem em pixels.
Nota: Sempre especifique a largura e a altura de uma imagem. Se a largura e a altura não forem especificadas, a página da Web poderá piscar enquanto a imagem é carregada.
Largura e Altura, ou Estilo?
Os atributos width, heighte stylesão todos válidos em HTML.
No entanto, sugerimos usar o styleatributo. Impede que as folhas de estilos alterem o tamanho das imagens:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Imagens em outra pasta
Se você tiver suas imagens em uma subpasta, deverá incluir o nome da pasta no srcatributo:
Exemplo
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Imagens em outro servidor/site
Alguns sites apontam para uma imagem em outro servidor.
Para apontar para uma imagem em outro servidor, você deve especificar uma URL absoluta (completa) no srcatributo:
Exemplo
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Notas sobre imagens externas: As imagens externas podem estar sob direitos autorais. Se você não obtiver permissão para usá-lo, poderá estar violando as leis de direitos autorais. Além disso, você não pode controlar imagens externas; ele pode ser removido ou alterado de repente.
Imagens animadas
HTML permite GIFs animados:
Exemplo
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Imagem como um link
Para usar uma imagem como link, coloque a <img>tag dentro da <a>
tag:
Exemplo
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Imagem flutuante
Use a propriedade CSS floatpara deixar a imagem flutuar à direita ou à esquerda de um texto:
Exemplo
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Dica: Para saber mais sobre CSS Float, leia nosso Tutorial CSS Float .
Formatos de imagem comuns
Aqui estão os tipos de arquivo de imagem mais comuns, que são suportados em todos os navegadores (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Resumo do capítulo
- Use o elemento HTML
<img>para definir uma imagem - Use o atributo HTML
srcpara definir o URL da imagem - Use o atributo HTML
altpara definir um texto alternativo para uma imagem, se ela não puder ser exibida - Use o HTML
widthe osheightatributos ou o CSSwidthe asheightpropriedades para definir o tamanho da imagem - Use a propriedade CSS
floatpara deixar a imagem flutuar para a esquerda ou para a direita
Observação: o carregamento de imagens grandes leva tempo e pode tornar sua página da web mais lenta. Use as imagens com cuidado.
Exercícios HTML
Tags de imagem HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .