Imagens - Aula 11

Imagens podem melhorar o designer e a aparência de sua página.

Vamos finalmente sair do tedioso mundo de páginas com apenas textos e entrar no extenso e complicado mundo das imagens. Elas podem melhorar muito o design e a aparência de uma página.

Eu digo tedioso porque trabalhar com imagens na web exige muita atenção e tempo, é uma faca de dois gumes, elas podem falar mais que mil palavras, mas se forem vistas. Pense assim, uma imagem de qualidade tem uma resolução muito alta, consequentemente tem um peso de muitos bytes, ou seja, esse tipo de imagem pode demorar muito para carregar, pode nem carregar dependendo do tamanho.

No começo só existia texto nas páginas web, felizmente a capacidade de incorporar imagens (e outros tipos de mídia) logo foram adicionadas ao HTML. Tecnicamente o HTML não adiciona imagens ao conteúdo, o que ele faz é linkar a imagem à página, ou seja, cria um espaço de retenção para a imagem referenciada. Assim podemos adicionar imagens localmente ou externas ao servidor.

Como eu disse anteriormente, o conteúdo de imagens é muito extenso e complicado, existem vários tipos de imagens e a estão surgindo novas imagens que ainda nem são suportadas por todos os navegadores. Há também os tipos de compressão de imagens para melhorar o desempenho, porém não podemos comprimir muito para não perder qualidade, enfim, pode ser que eu fale disso tudo em outro artigo separado do curso HTML5, aqui vamos nos ater a dominar o uso da tag <img> (responsável por incorporar imagens ao conteúdo) seus atributos e também vamos estudar outras formas de incluir imagens na página. Dito isso, vamos começar com a sintaxe da tag .

Sintaxe

A tag <img> não possui tag de fechamento </img>, ela segue o padrão inline-block do CSS além do ajuste de largura e altura no padrão automático.

O <img> é uma tag vazia e precisa de atributos para funcionar corretamente. Assim como tag <a> (que faz links na página) é necessário inserir um atributo na tag <img> para dizer ao navegador onde está a imagem, mas nesse caso usaremos o src (source; fonte em português) em vez do href que é usado na tag <a>, mas a ideia é a mesma, inserir a url da imagem que será incluída, assim podemos inserir imagens local e global. O atributo src é obrigatório se você deseja exibir a imagem para os usuários. Sendo assim, a sintaxe básica da tag <img> fica assim:


<!-- CÓDIGO NO HTML -->
<img src="url-da-image.jpg">

Se a imagem estiver em uma pasta, então basta inserir o nome da pasta e depois o nome da imagem, assim:


<!-- CÓDIGO NO HTML -->
<img src="nome-da-pasta/nome-da-image.jpg">

E se estiver em um diretório acima escrevemos assim:


<!-- CÓDIGO NO HTML -->
<img src="../nome-da-image.jpg">

O (../) diz ao navegador que ele deve voltar um diretório e continuar seguindo a trilha desse ponto.

E para inserir uma imagem global, externa ao servidor basta usar a url absoluta.


<!-- CÓDIGO NO HTML -->
<img src="https://www.sitedaimagem.com/images/nome-da-image.jpg">

O que acontece se o navegador não encontrar a imagem, caso tenha digitado errado ou caso a imagem não exista?

Será exibido o ícone de link quebrado e o atributo alt (se for configurado). Por falar nisso, vamos falar dele alt ou texto alternativo.

Texto alternativo

Já falamos do atributo src, mas outro atributo muito importante é o alt. Eu diria que ele também é obrigatório, veja bem, não vai deixar de funcionar se você não configurá-lo, mas sua página perde muito sem ele. Imagine que por algum motivo sua imagem não possa ser exibida, conexão lenta, erro de digitação, exclusão da imagem, etc. Ou que um usuário esteja usando um leitor de tela. Ou que o formato da imagem não seja suportado pelo navegador do usuário. Ou ainda, talvez o usuário esteja usando um navegador somente texto, como o Lynx. Em todos esses casos, o que será exibido é o conteúdo no atributo alt.

Além disso, os mecanismos de busca, não entendem as imagens, mas entendem o alt, então para melhorar o seu rankeamento SEO sempre use o atributo alt nas imagens.

Há outro atributo que também descreve a imagem, mas esse é usado para quando o usuário passa o mouse sobre a imagem, é o atributo title. Não é obrigatório, mas às vezes pode ser uma boa inserir esse atributo para explicar a imagem.

Mas o que inserir nesses atributos? A resposta é simples, os próprios atributos já nos dão uma boa ideia do que é. No caso do alt (texto alternativo) o ideal é inserir um conteúdo que descreve ou substitui a imagem, algo relevante que evita que o usuário fique perdido caso a imagem não seja carregada. O title é mais simples, é realmente só um título. Pode ser título da imagem, do texto, nome de quem produziu a imagem, etc.

Tamanho da imagem

A tag <img> carrega a imagem com altura e largura que foram criadas, no tamanho original. Nós podemos manipular esses atributos através do CSS ou dos atributos da tag <img> height (altura) e width (largura).

Se você deseja manipular o tamanho da imagem, eu recomendo que isso seja feito em CSS, mesmo inline o ideal é que seja usando atributos CSS. Por exemplo:


<!-- CÓDIGO NO HTML -->
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternativamente, você pode usar os atributos width e height:


<!-- CÓDIGO NO HTML -->
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Imagem como link

Como vimos no artigo anterior, tudo pode ser usado como link, inclusive as imagens, para isso basta inserir uma imagem entre as tags<a>:


<!-- CÓDIGO NO HTML -->
<a href="default.html">
  <img src="smiley.png" alt="HTML tutorial" style="width:42px; height:42px;">
</a>

Imagem flutuante

As imagens ocupam, por padrão, o espaço de uma linha, como se fosse um carácter no texto, por exemplo:

Lorem ipsum dolor sit amet, Smiley consectetur adipisicing elit, sed do eiusmod.

Nós podemos usar a propriedade CSS float para deixar a imagem “flutuar” à esquerda ou à direita do texto:


<!-- CÓDIGO NO HTML -->
<p>
  <img src="smiley.png" 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.png" alt="Smiley face" style="float:left; width:42px; height:42px;">
  The image will float to the left of the text.
</p>

Resultado


Smiley face Imagem flutuando à direita do texto.




Smiley face Imagem flutuando à esquerda do texto.

Formato de imagens

Para fechar a parte básica sobre imagens vamos falar dos formatos mais usados na web. Eu não vou explicar cada formato pois não é o objetivo agora, mas vou expor o básico sobre cada uma delas.

GIF: Graphics Interchange Format. É um formato usado para imagens animadas, porém ele usa um padrão de 256 cores e não tem muita qualidade se tratando de fotos. Alternativamente temos o APNG. Mesma coisa, mas com qualidade png.

ICO: Microsoft Icon. São usados para imagens pequenas (16x16, 32x32, 64x64) e diversas profundidade de cor (16 cores, 32, 64, 128, 256, 16-bit e assim por diante). Mais comumente usados como ícones que aparecem nas abas dos navegadores.

JPEG: Joint Photographic Expert Group image. Basicamente são imagens que podem ser comprimidas para ficar menores (em bytes). Essa compressão aumenta o desempenho do site, pois as imagens são carregadas mais rapidamente, porém podem perder qualidade e pixelizar, embaçar, perder informações, enfim, escolha bem a forma de compressão para não perder sua imagem. Esse tipo de imagem não aceita transparência e se apresenta nas extensões: .jpg, .jpeg, .jfif, .pjpeg e .pjp.

PNG: Portable Network Graphics. São imagens que não aceitam compressão, tem bastante qualidade e podem ter transparência. Imagens com extensões .png

SVG: Scalable Vector Graphics. São imagens vetoriais e não sofrem distorções se forem aumentadas. Geralmente usadas em imagens com formas gráficas como quadrados, linhas, círculos, etc. Muitas logos são exibidas nesse formato, mas nunca usamos esse formato para exibir fotos.

WebP: Formato novo, criado em 2010 pelo Google. Basicamente são imagens com o mesmo nível de qualidade, mas em um tamanho menor (em bytes). Economiza espaço, aumenta a velocidade de carregamento de uma página e não perde qualidade. Obrigatório se você estiver criando páginas AMP.

Como eu disse, eu não vou entrar muito nesse tópico de imagens propriamente dito, só em como usá-las em HTML, assim que eu tiver algo a respeito eu atualizo a página linkando o conteúdo.

Imagens de fundo

Você pode incorporar imagens em páginas (e JavaScript, mas deixa isso para depois). Uma imagem de fundo pode ser inserida em quase todo elemento HTML. Para fazer isso use o atributo style e a propriedade CSS background-image Você pode colocar uma imagem num parágrafo, numa div, span, etc. Veja o exemplo usando

abaixo.

<!-- CÓDIGO NO HTML -->
<div style="background-image: url('/img_girl.jpg');">

Você pode usar a tag <style dentro do elemento <head e criar as regras CSS dentro dela, bem como você também pode usar um arquivo CSS externo e inseri-lo na página.


<!-- CÓDIGO NO HTML -->
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

Imagine que você queira toda a página com uma imagem de fundo, basta inserir essa propriedade no elemento <<body> usando a propriedade style ou dentro do elemento <style>


<!-- CÓDIGO NO HTML -->
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

Existem outras propriedades background-* que controlam a imagem. Tamanho, posicionamento e repetição são algumas delas.

Imagem de Repetição

Se a imagem de fundo for menor que o elemento em que foi inserida, a imagem se repetirá, horizontal e verticalmente, até chegar ao final do elemento:

Para evitar que isso aconteça, devemos definir a propriedade background-repeat como no-repeat.


<!-- CÓDIGO NO HTML -->
<style>
body {
background-image: url('img_girl.jpg');
}
background-repeat: no-repeat;
</style>

Resultado


A imagem não vai se repetir e será mostrada no tamanho original. Mas se você quiser que a imagem cubra todo o fundo do elemento? Simples, use a propriedade background-size com valor cover, isso vai garantir que a imagem aumente ou diminua de tamanho de acordo com o tamanho do elemento. Além disso, para garantir que todo elemento seja sempre coberto, defina background-attachment com valor fixed. Assim, se a imagem for inserida em um elemento que tenha proporções diferentes, essa propriedade garante que a imagem se ajuste para ocupar toda a área do elemento.


<!-- CÓDIGO NO HTML -->
<style>
body {
background-image: url('img_girl.jpg');
}
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
</style>

Resultado


Você pode querer que a imagem se estique e apareça inteira no fundo do elemento (não sei porque você iria querer isso, mas…) se for esse o caso, defina a propriedade background-size para 100% 100%:


<!-- CÓDIGO NO HTML -->
<style>
body {
background-image: url('img_girl.jpg');
}
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
</style>

Resultado


Tente redimensionar a janela do navegador e você verá que a imagem será esticada, mas sempre cobrindo todo o elemento.

De qualquer forma, a imagem incorporada resultante é sem dúvida mais fácil de posicionar e controlar do que as imagens HTML comuns. Então por que usar imagens HTML? As imagens de fundo são apenas decorativas e não fazem parte do conteúdo da página. Enfeites, melhoramento visual, elas não tem valor semântico, não agregam valor para o SEO da página e principalmente, não podem ter nenhum equivalente de texto, ou seja, são invisíveis para leitores de tela, buscadores, etc. Não ignorem o valor das imagens HTML.

Outras formas de inserir imagens HTML

Nós aprendemos uma forma básica de inserir imagens nas páginas, mas existem outras formas, dependendo do contexto. Falamos de texto alternativo e título de uma imagem, mas esses ficam escondidos, aparecendo apenas em algumas situações. Às vezes queremos que a legenda da imagem fique exposta para que todos vejam independente de passar o mouse sobre a imagem ou não.

A solução é usar os elementos <figure e <figcaption. Eles foram criados justamente para esse propósito, fornecer um contêiner semântico para figuras vinculadas a uma legenda. Dessa maneira, os buscadores, leitores de tela e outros mecanismos saberão que a legenda está se referindo àquela imagem e virse-versa. Isso aumenta a usabilidade e aumenta seu rankeamento SEO.


<!-- CÓDIGO NO HTML -->
<figure>
  <img src="/images/noticias/2021/03/smiley.png"
       alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"
       width="400"
       height="341">
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</figcaption>
</figure>

Uma <figure> não necessariamente precisa ser uma imagem. Ela é uma unidade de conteúdo independente que:

  • Expressa seu significado de maneira compacta e fácil de entender;
  • Pode ser inserida em vários lugares no fluxo linear da página;
  • Fornece informações essenciais de suporte ao texto principal;
  • Pode ter várias imagens, trecho de código, áudio, vídeo, equações, uma tabela, ou outra coisa.

Outro elemento para inserção de imagens é <picture>. Ele oferece mais flexibilidade na especificação de recursos de imagens. O <picture> contém um ou mais <source>, cada um referindo-se a imagens diferentes por meio do atributo srcset. Desse jeito o navegador pode escolher a imagem que melhor se adapta à visualização do dispositivo atual do usuário.

Cada elemento <source> possui um atributo media que define quando a imagem é a mais adequada de acordo com a resolução definida.


<!-- CÓDIGO NO HTML -->
<picture>
  <source media="(min-width: 650px)" srcset="img1.jpg">
  <source media="(min-width: 465px)" srcset="img2.jpg">
  <img src="img3.jpg">
</picture>

Quando usar o <picture>?

Há duas principais finalidades para o : Largura de banda e Suporte de formato.

Largura de banda: Não é necessário carregar uma imagem grande se você estiver usando um dispositivo ou uma tela pequena, certo? Nesse caso, o navegador buscará o primeiro <source> com valores de atributos correspondentes e irá ignorar o restante.

Suporte de formato: Alguns navegadores ou dispositivos não suportam todos os formatos de imagem que existem. O <picture> age adicionando vários formatos de imagens, assim o navegador usará o primeiro que ele reconhecer e vai ignorar o restante.

Acima você viu exemplos de quando o navegador é usado para economizar largura de banda. Agora veja um exemplo onde o navegador usará o primeiro formato de imagem que reconhecer:


<!-- CÓDIGO NO HTML -->
<picture>
  <source srcset="img1.png">
  <source srcset="img_girl2.jpg">
  <img src="img3.gif" alt="Beatles" style="width:auto;">
</picture>

Pensando em HTML é isso, essas são as formas de inserir imagens dentro de uma página web. Mas se pensarmos em imagens propriamente ditas, há muito mais coisas que podemos explorar, como imagens responsivas, filtros de imagens, sombreamento, etc. Isso é conteúdo para o curso de CSS, por isso não irei abordar aqui, mas acesse o curso de CSS e confira tudo lá.

No próximo capítulo vou falar de mapeamento de imagens, um conteúdo mais avançado se tratando de imagens.

Aprenda as principais linguagens usadas na WEB.

Aqui você tem acesso gratuito às principais linguagens de programação web, não perca tempo, acesse nosso conteúdo e comece a programar agora mesmo.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.