Imagens HTML

Uma breve visão geral das imagens HTML é fornecida neste artigo, incluindo como adicionar imagens a uma página da Web, como formatar e estilizar imagens e práticas recomendadas para otimizar imagens para a Web.

Com imagens HTML , você pode criar áreas clicáveis ​​em uma imagem.

Dica: As imagens podem melhorar o design e a aparência de uma página da web.
Índice-

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/pic_trulli.jpg" alt="Italian Trulli">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="Girl in a jacket">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_chania.jpg" alt="Flowers in Chania">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A tag <img>: sintaxe e atributos

O Html Images <img> é usado 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 holdingspace para a imagem referenciada.

As imagens Html <img> estão vazias, contêm apenas atributos e não possuem 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

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html><body><br>
<br>
<br><img src="https://mrexamples.com/wp-content/uploads/html_images/img_chania.jpg" alt="alternatetext">
<br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Especificando fontes de imagem: caminhos de arquivo e URLs

Quando falamos de Imagens Html, o atributo obrigatório srcespecifica o caminho (URL) para a imagem.

Observação: quando uma página da Web é carregada; é o navegador, nesse momento, que pega 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 de link quebrado e o alttexto são mostrados se o navegador não conseguir encontrar a imagem.

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_chania.jpg" alt="Flowers
in Chania">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Formatos de imagem: Compreendendo JPEG, PNG e GIF

Quando se trata de trabalhar com imagens na web, entender os diferentes formatos de imagens disponíveis é fundamental. Cada formato tem suas próprias características, pontos fortes e casos de uso ideais. Neste artigo, vamos nos aprofundar nos três formatos de imagem mais usados: JPEG, PNG e GIF.

JPEG (Grupo Conjunto de Especialistas em Fotografia):

JPEG é um formato de imagem amplamente utilizado, particularmente adequado para fotografias e imagens complexas com uma ampla gama de cores. Ele atinge altas taxas de compactação, permitindo tamanhos de arquivo menores, mantendo um bom nível de qualidade. O JPEG atinge a compactação descartando seletivamente os dados da imagem que são menos perceptíveis ao olho humano. No entanto, essa técnica de compactação resulta na perda de alguns detalhes da imagem, o que é conhecido como compactação com perdas.

JPEG é excelente para exibir imagens realistas com gradientes suaves, como fotografias ou gráficos complexos. Ele suporta milhões de cores e é o formato preferido para imagens em que a qualidade visual é de extrema importância. No entanto, devido à sua compactação com perdas, não é adequado para imagens com bordas nítidas, texto ou fundos transparentes, pois pode resultar em artefatos e degradação da qualidade.

PNG (Gráficos de Rede Portáteis):

PNG é um formato de imagem popular que suporta compactação sem perdas, o que significa que retém todos os dados da imagem original sem perda de qualidade. Isso torna o PNG ideal para imagens com bordas nítidas, texto, logotipos e ilustrações. Ele também suporta transparência, permitindo imagens com fundos transparentes.

Uma das principais vantagens do PNG é sua capacidade de manter a mais alta qualidade, preservando a transparência da imagem. Isso o torna adequado para gráficos, ícones e imagens da Web que exigem uma aparência limpa e nítida. No entanto, a desvantagem é que os arquivos PNG tendem a ter tamanhos de arquivo maiores em comparação aos JPEGs, especialmente para imagens complexas com muitas cores. Portanto, é recomendável usar PNGs seletivamente para elementos específicos que exigem transparência ou qualidade sem perdas.

GIF (formato de troca de gráficos):

O GIF é usado principalmente para animações e gráficos simples com cores limitadas. Suporta um máximo de 256 cores, tornando-o adequado para logotipos, ícones e gráficos que requerem transparência e animação. Os arquivos GIF utilizam um algoritmo de compactação sem perdas, que preserva todos os detalhes da imagem sem perda de qualidade.

O recurso de animação do GIF permite que uma série de quadros sejam exibidos em um loop, criando a ilusão de movimento. Isso o torna popular para criar pequenas imagens animadas ou banners. No entanto, devido à sua paleta de cores limitada, o GIF não é adequado para exibir fotografias ou imagens complexas com uma ampla gama de cores. Além disso, os arquivos GIF tendem a ter tamanhos de arquivo maiores em comparação com os arquivos JPEG ou PNG, o que pode afetar o tempo de carregamento do site.

O Atributo Alt

O altatributo obrigatório fornece um texto alternativo para uma imagem, caso o usuário por algum motivo não possa visualizá-la (devido a uma 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:

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_chania.jpg" alt="Flowers
in Chania">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Se um navegador não conseguir encontrar uma imagem, ele exibirá o valor do alt
atributo:

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/flower-scaled.jpg" alt="Flowers
in Chania">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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. Leitores de tela são úteis
para pessoas com deficiência visual ou dificuldade de aprendizagem.

Título da imagem

Dicas de ferramenta de imagem com texto de título podem ser adicionadas às imagens usando o atributo de título. A dica de ferramenta aparecerá quando o mouse passar sobre a imagem.

Veja exemplo Abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="HTML5 Icon" title="html5" style="width:128px;height:128px;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Imagem em segundo plano

Atributos de estilo HTML e propriedades de imagem de plano de fundo CSS podem ser aplicados para incluir uma imagem de plano de fundo em um elemento HTML.

Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background No Repeat so that is would be displayed only once</h2>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tamanho da Imagem - Largura e Altura

Você pode usar o styleatributo para especificar a largura e a altura de uma imagem.

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como alternativa, você pode usar os atributos widthe :height

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os atributos widthe heightsempre definem a largura e a altura da imagem em pixels.

Observação: 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 o uso do styleatributo. Isso evita que as folhas de estilo alterem o tamanho das imagens:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="HTML5 Icon" width="128" height="128"><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Imagens em outra pasta

Se você tiver suas imagens em uma subpasta, deverá incluir o nome da pasta no srcatributo:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="HTML5 Icon" width="128" height="128"><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Imagens em outro servidor/site

Quando falamos de imagens Html 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:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="HTML5 Icon" width="128" height="128"><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Observações 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 as imagens externas; ele pode ser removido ou alterado repentinamente.

Imagens responsivas: criando uma experiência compatível com dispositivos móveis

No mundo centrado em dispositivos móveis de hoje, é essencial criar uma experiência de usuário perfeita e agradável em todos os dispositivos. Um aspecto crucial para conseguir isso é garantir que as imagens em seu site sejam responsivas, o que significa que elas se adaptam e otimizam sua exibição com base no dispositivo e no tamanho da tela do usuário. Neste artigo, exploraremos técnicas para criar imagens responsivas que fornecem uma experiência otimizada para dispositivos móveis.

–> Entenda os princípios do design responsivo:

Para implementar efetivamente imagens responsivas, é crucial ter uma compreensão sólida dos princípios de design responsivo. O design responsivo visa criar um layout flexível e adaptável que se ajusta a diferentes tamanhos de tela. Isso envolve o uso de consultas de mídia CSS e sistemas de grade fluida para controlar o layout e o estilo de sua página da web. As imagens responsivas são um componente vital dessa abordagem, garantindo que as imagens se adaptem junto com outros elementos da página.

–> Use o Atributo srcset:

O atributo srcset é uma ferramenta valiosa para imagens responsivas. Ele permite que você forneça várias fontes de imagem e deixe o navegador decidir qual imagem baixar com base nos recursos do dispositivo e no tamanho da janela de visualização. Ao fornecer diferentes resoluções ou tamanhos da mesma imagem, você pode garantir que a versão de imagem apropriada seja exibida para cada dispositivo.

–> Implemente o Atributo de tamanhos:

O atributo de tamanhos trabalha lado a lado com srcset para otimizar ainda mais as imagens responsivas. Ele especifica os tamanhos do contêiner de imagem em diferentes pontos de interrupção ou tamanhos de tela. Isso ajuda o navegador a determinar a imagem mais adequada para baixar e exibir. Ao definir tamanhos apropriados com base no layout, você pode evitar downloads desnecessários de imagens grandes em telas menores, melhorando o desempenho.

–> Aproveite o elemento de imagem:

O elemento de imagem fornece ainda mais controle sobre imagens responsivas. Ele permite que você defina diferentes fontes e condições de mídia para vários tamanhos ou dispositivos de viewport. No elemento de imagem, você pode especificar vários elementos de origem com diferentes consultas de mídia, cada uma apontando para diferentes origens de imagem. O navegador selecionará a imagem mais apropriada com base nas fontes disponíveis e nas condições da mídia.

–> Considere a compactação de imagem:

Ao otimizar a capacidade de resposta, é importante equilibrar a qualidade da imagem e o tamanho do arquivo. A compactação de imagens pode reduzir significativamente o tamanho do arquivo sem comprometer a qualidade visual. Existem várias ferramentas e técnicas disponíveis para compactação de imagens, como o uso de software de compactação, otimização de formatos de imagem e redução de metadados desnecessários. Encontrar o equilíbrio certo entre o tamanho do arquivo e a qualidade da imagem é crucial para um desempenho ideal.

–> Testar e Depurar:

Depois de implementar imagens responsivas, é essencial testar e depurar completamente seu comportamento em diferentes dispositivos e tamanhos de tela. Use ferramentas de desenvolvedor de navegador, emuladores de dispositivos ou dispositivos físicos para garantir que as imagens sejam redimensionadas e adaptadas corretamente. Preste atenção à clareza da imagem, tempos de carregamento e possíveis problemas de layout que possam surgir.

Imagens Animadas

O HTML permite GIFs animados:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/programming.gif" alt="Computer Man" style="width:48px;height:48px;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Imagem flutuante

Use a propriedade CSS floatpara deixar a imagem flutuar à direita ou à esquerda de um texto em Imagens Html :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<p><img src="https://mrexamples.com/wp-content/uploads/html_images/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="https://mrexamples.com/wp-content/uploads/html_images/smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Dica: Para aprender mais sobre CSS Float, leia nosso Tutorial CSS Float.

Para usar uma imagem como link, coloque a tag dentro da tag em Html Images :<img><a>

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<a href="default.asp">
<img src="https://mrexamples.com/wp-content/uploads/html_images/smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Formatos de imagem comuns

Aqui estão os tipos de arquivo de imagem mais comuns quando se trata de Html Images , que são suportados em todos os navegadores ( Chrome , Edge , Firefox , Safari , Opera ):

Abreviação Formato de arquivo Extensão de arquivo
APNG Gráficos Animados de Rede Portátil .apng
GIF Formato de Intercâmbio de Gráficos em Imagens Html .gif
ICO Ícone da Microsoft .ico, .cur
JPEG Imagem do Grupo Conjunto de Especialistas em Fotografia .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Gráficos Portáteis de Rede .png
SVG Gráficos vetoriais escalonáveis .svg

Etiquetas de Imagem HTML

Marcação Visão geral
<img> Descreva uma imagem
<área> Crie uma área clicável em um mapa de imagem em imagens Html
<mapa> Crie um mapa de imagem definindo-o
<imagem> Fornece um contêiner para vários recursos de imagem

Nossa referência de tags HTML pode fornecer uma lista abrangente de todas as tags HTML atualmente disponíveis.

Benefícios do uso de imagens HTML

O uso de imagens HTML em web design traz inúmeros benefícios. Além desses benefícios, existem vários outros:

Aprimorando o apelo visual: as imagens podem aprimorar o apelo visual, o engajamento e o interesse de um site. O design do seu site pode ser aprimorado incorporando imagens de alta qualidade para criar uma experiência de usuário mais envolvente.

Comunicação de informações: As imagens podem ser usadas para comunicar informações de uma forma mais envolvente e memorável do que o texto sozinho. Uma imagem de produto ou infográfico pode comunicar informações complexas de forma mais eficaz do que um longo bloco de texto, por exemplo.

Criando uma identidade de marca: o uso de imagens pode ajudar um site a manter uma identidade de marca consistente. Uma experiência de usuário coesa e memorável pode ser criada usando imagens que se alinham com o esquema de cores, estilo e mensagem da sua marca.

Melhor desempenho do site: A otimização de imagens para uso na web reduz os tempos de carregamento e reduz o consumo de largura de banda, melhorando assim o desempenho do site.

Resumo do capítulo

  • Use o elemento HTML <img>para definir uma imagem
  • Use o atributo HTML src para definir a URL da imagem
  • Use o alt atributo HTML para definir um texto alternativo para uma imagem, se ela não puder ser exibida
  • Use o HTML width e heightos atributos ou o CSS widthe heightas propriedades para definir o tamanho da imagem
  • Use a propriedade CSS floatpara deixar a imagem flutuar para a esquerda ou para a direita

Observação: Carregar imagens grandes leva tempo e pode deixar sua página da web mais lenta. Use as imagens com cuidado.

Não se esqueça de compartilhar este artigo com seus amigos clicando nos links abaixo se este artigo o beneficiou de alguma forma.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.