HTML - Imagens

Inserindo Imagens

<img src="url-da-imagem" alt="texto-alternativo">

<img src="exemplo.jpg" alt="Imagem de Exemplo" width="500" height="300">

Posicionamento de Imagens

A tag <img> é usada para inserir imagens em um documento HTML, mas você pode controlar o posicionamento e o layout das imagens usando CSS. O CSS tem várias propriedades que permitem posicionar imagens dentro da sua página web.

Uma maneira de posicionar imagens é usando a propriedade float. A propriedade float permite colocar uma imagem à esquerda ou à direita do conteúdo ao redor dela. Quando uma imagem é flutuada, o texto ou elementos ao lado dela se ajustarão ao seu redor.

<img src="example.jpg" alt="Imagem de Exemplo" class="float-left">
<p>Este é um texto que se ajustará ao redor da imagem flutuante.</p>

.float-left {
  float: left;
  margin-right: 10px;
}

Neste exemplo, a imagem é flutuada para a esquerda usando float: left, e uma margem direita é adicionada para criar espaço entre a imagem e o texto ao lado dela.

Outra forma de posicionar imagens é usando a propriedade display. Por padrão, as imagens são elementos inline, o que significa que fluem dentro do texto. No entanto, você pode alterar como as imagens são exibidas usando valores como block, inline-block ou flex.

<img src="example.jpg" alt="Imagem de Exemplo" class="display-block">

.display-block {
  display: block;
  margin: 0 auto;
}

Neste caso, a imagem é exibida como um elemento de nível de bloco usando display: block, e é centralizada horizontalmente usando margin: 0 auto.

A propriedade position é outra ferramenta para o posicionamento de imagens. Ela permite posicionar imagens em relação à sua posição normal (position: relative), em relação ao ancestral posicionado mais próximo (position: absolute) ou fixo na janela do navegador (position: fixed).

<div class="container">
  <img src="example.jpg" alt="Imagem de Exemplo" class="position-absolute">
</div>

.container {
  position: relative;
  height: 400px;
}

.position-absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

Neste exemplo, a imagem é posicionada absolutamente a 20 pixels do topo e da esquerda de seu ancestral posicionado mais próximo (a <div> com a classe container).

Ao combinar essas técnicas de posicionamento CSS com outras propriedades como margin, padding e z-index, você pode controlar a colocação e o layout das imagens em suas páginas web. Experimente diferentes métodos de posicionamento para encontrar a melhor abordagem para suas necessidades de design.

Imagens Responsivas

O HTML oferece várias técnicas para criar imagens responsivas.

Uma forma de fornecer imagens responsivas é usando o atributo srcset na tag <img>. O atributo srcset permite especificar várias fontes de imagem junto com suas respectivas larguras ou densidades de pixels. O navegador pode então escolher a imagem mais adequada com base no tamanho e resolução da tela do dispositivo.

<img src="image-small.jpg"
     srcset="image-small.jpg 400w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     alt="Imagem Responsiva">

O atributo srcset fornece três fontes de imagem diferentes com suas larguras correspondentes (400w, 800w e 1200w). O navegador selecionará a imagem que melhor se adapta ao tamanho e resolução da tela do dispositivo.

Outra técnica para imagens responsivas é usar o elemento <picture>. O elemento <picture> funciona como um contêiner para vários elementos <source>, cada um especificando diferentes fontes de imagem e media queries. Isso permite definir imagens diferentes para diferentes tamanhos de tela ou características do dispositivo.

<picture>
  <source media="(min-width: 1200px)" srcset="image-large.jpg">
  <source media="(min-width: 800px)" srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="Imagem Responsiva">
</picture>

O elemento <picture> contém dois elementos <source> com media queries. O primeiro elemento <source> especifica uma imagem para telas com largura mínima de 1200px, enquanto o segundo elemento <source> visa telas com largura mínima de 800px. O elemento <img> dentro do elemento <picture> serve como fallback para navegadores que não suportam o elemento <picture>.

Direção de Arte é outro conceito relacionado a imagens responsivas. A Direção de Arte envolve fornecer diferentes recortes ou composições de imagem com base no tamanho da tela ou proporção do dispositivo. Isso garante que as partes mais importantes da imagem fiquem visíveis em diferentes dispositivos.

<picture>
  <source media="(min-width: 1200px)" srcset="image-large.jpg">
  <source media="(min-width: 800px)" srcset="image-medium-cropped.jpg">
  <img src="image-small-cropped.jpg" alt="Imagem Responsiva">
</picture>

Os elementos <source> dentro do elemento <picture> especificam diferentes recortes de imagem para diferentes tamanhos de tela. As imagens "image-medium-cropped.jpg" e "image-small-cropped.jpg" são versões recortadas da imagem original, otimizadas para telas médias e pequenas, respectivamente.

Ao usar técnicas de imagem responsiva como srcset, <picture> e Direção de Arte, você pode proporcionar uma experiência de visualização ideal para usuários em diversos dispositivos. Essas técnicas ajudam a fornecer imagens apropriadas para diferentes tamanhos de tela, resoluções e proporções, resultando em carregamentos de página mais rápidos e melhor engajamento do usuário.

Acessibilidade

Acessibilidade é uma parte importante do design web, garantindo que seu conteúdo possa ser usado por todos, incluindo pessoas com deficiências. Quando se trata de imagens, há vários pontos a considerar para melhorar a acessibilidade.

Fornecer texto alternativo para imagens é importante. O texto alternativo, ou "alt text", é uma descrição curta de uma imagem que é exibida quando a imagem não pode ser carregada ou é lida em voz alta por leitores de tela para usuários com deficiência visual. O atributo alt da tag <img> é usado para fornecer esse texto alternativo.

<img src="example.jpg" alt="Um pôr do sol sobre o oceano">

Ao escrever texto alternativo, tente descrever o conteúdo e o propósito da imagem de forma breve. Para imagens decorativas que não adicionam conteúdo significativo, você pode deixar o atributo alt vazio (alt="").

Para imagens complexas, como gráficos, tabelas ou diagramas, fornecer um texto alternativo curto pode não ser suficiente. Nesses casos, você pode usar o atributo longdesc para fornecer um link para uma descrição detalhada da imagem. Ou, você pode incluir a descrição no texto principal próximo à imagem.

<img src="chart.jpg" alt="Gráfico de vendas" longdesc="descricao-grafico.html">

No exemplo acima, o atributo longdesc aponta para um arquivo HTML (descricao-grafico.html) que contém uma descrição detalhada do gráfico.

Outra boa prática de acessibilidade é evitar o uso de imagens para texto. Embora possa ser tentador usar imagens para mostrar texto estilizado ou títulos, isso pode ser um problema para leitores de tela e usuários com deficiências visuais. Em vez disso, use texto real e estilize-o com CSS. Isso garante que o texto seja acessível, selecionável e possa ser redimensionado pelos usuários, se necessário.

<h1 class="titulo-estilizado">Bem-vindo ao Nosso Site</h1>

.titulo-estilizado {
  font-family: "Fonte Decorativa", cursive;
  font-size: 36px;
  color: #ff0000;
}

Ao usar CSS para estilizar o texto, você mantém a acessibilidade enquanto ainda obtém o efeito visual desejado.

Em resumo, para melhorar a acessibilidade de imagens:

Ao seguir essas diretrizes de acessibilidade, você garante que suas imagens possam ser compreendidas por todos os usuários, criando uma experiência web mais inclusiva.

Mapas de Imagem

Mapas de imagem permitem criar áreas clicáveis em uma imagem, transformando diferentes partes da imagem em links interativos. Essa técnica é útil quando você deseja fornecer vários links dentro de uma única imagem ou criar um sistema de navegação baseado em uma imagem.

Para criar um mapa de imagem, você precisa usar as tags <map> e <area> junto com uma tag <img>. A tag <map> define o mapa de imagem e dá a ele um nome, enquanto as tags <area> definem as áreas clicáveis dentro da imagem.

<img src="image.jpg" alt="Mapa de Imagem" usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="link1.html" alt="Link 1">
  <area shape="circle" coords="200,200,50" href="link2.html" alt="Link 2">
  <area shape="poly" coords="300,100,350,200,250,200" href="link3.html" alt="Link 3">
</map>

Ao definir as coordenadas para as áreas clicáveis, você precisa conhecer as localizações exatas em pixels das regiões desejadas dentro da imagem. Você pode usar software de edição de imagens ou ferramentas online para encontrar essas coordenadas.

Mapas de imagem não são tão comumente usados hoje em dia devido ao aumento do design responsivo e à dificuldade em criar e manter coordenadas precisas para diferentes tamanhos de imagem. No entanto, em certos casos, como criar infográficos interativos ou fornecer links dentro de uma imagem específica, os mapas de imagem ainda podem ser uma técnica útil.

Ao usar mapas de imagem, certifique-se de fornecer texto alternativo claro e descritivo para cada área clicável para garantir a acessibilidade para usuários que dependem de tecnologias assistivas.

Imagens de Fundo

Além de inserir imagens em documentos HTML usando a tag <img>, você também pode definir imagens como fundos para elementos usando CSS. Imagens de fundo podem melhorar a aparência visual de suas páginas web e criar efeitos interessantes.

Para definir uma imagem de fundo para um elemento, use a propriedade background-image no CSS. O valor dessa propriedade é uma URL que aponta para o arquivo de imagem que você deseja usar como fundo.

.element {
  background-image: url("background.jpg");
}

Por padrão, as imagens de fundo se repetem horizontal e verticalmente para cobrir todo o elemento. No entanto, você pode controlar o comportamento de repetição usando a propriedade background-repeat. Os valores disponíveis são:

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

Você também pode controlar o posicionamento da imagem de fundo usando a propriedade background-position. Essa propriedade recebe dois valores: a posição horizontal e a posição vertical. Os valores podem ser palavras-chave (left, center, right para horizontal; top, center, bottom para vertical) ou comprimentos específicos (por exemplo, pixels ou porcentagens).

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

Imagens de fundo podem ser usadas para criar efeitos visuais interessantes, como a rolagem paralaxe. A rolagem paralaxe é uma técnica em que a imagem de fundo se move a uma velocidade diferente do conteúdo na página, criando uma sensação de profundidade.

.parallax {
  background-image: url("parallax-background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
}

Para criar um efeito paralaxe:

1. Defina a imagem de fundo usando background-image.
2. Use background-attachment: fixed para fixar a imagem de fundo no lugar enquanto o conteúdo da página rola sobre ela.
3. Posicione a imagem de fundo como desejado usando background-position.
4. Defina background-repeat: no-repeat para evitar que a imagem se repita.
5. Use background-size: cover para garantir que a imagem cubra todo o elemento, mesmo que precise ser redimensionada.
6. Defina uma height suficiente para o elemento criar o efeito de rolagem paralaxe.

Ao usar imagens de fundo, tenha em mente as seguintes práticas recomendadas:

• Otimize suas imagens para a web para manter os tamanhos de arquivo pequenos e os tempos de carregamento da página rápidos.
• Use formatos de imagem apropriados (por exemplo, JPEG para fotografias, PNG para imagens com transparência).
• Considere a legibilidade do conteúdo ao escolher imagens de fundo. Certifique-se de que haja contraste suficiente entre o texto e o fundo.
• Fique atento à acessibilidade. Forneça texto alternativo ou descrições para imagens de fundo se elas transmitirem informações importantes.