Imagens no HTML e no CSS

Esta é o capítulo 32 de 52 do volume Aprenda a Web. O projeto-fio é a Oficina Costeira, um coletivo fictício de design em João Pessoa. O exemplo está em exemplos/32-imagens-html-css/. Em cada capítulo: leia, copie, mude uma coisa, preveja, recarregue e confira.

O que você vai aprender

• Decidir entre img e background-image.
• Escrever alt que descreve o papel da figura.
• Associar legenda com figure e figcaption.
• Controlar repetição, posição e tamanho do fundo.
• Manter proporção de um banner decorativo.
• Verificar caminho, peso e contraste.

Conteúdo ou enfeite

Se a página perde sentido sem a figura, use img. Se a figura só enfeita, use CSS. Foto da equipe na página Equipe: conteúdo. Ondinha atrás do título: fundo.

Pergunte nesta ordem:

1. Precisa de legenda visível? figure e figcaption.
2. Faz parte do conteúdo? img com alt útil.
3. É só decoração? background-image.

img com alt="" é o plano B quando o fundo CSS não dá conta, e a figura não acrescenta informação.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imagens — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <main>
      <h1>Oficina Costeira</h1>
      <img src="assets/imagens/marca.svg" alt="Marca da Oficina Costeira: círculo e onda estilizados.">
    </main>
  </body>
</html>

Copie. Apague o alt. Preveja o aviso do validador e o vazio no leitor. Recarregue e devolva o texto.

O atributo alt

alt descreve o que a pessoa precisa saber se a imagem não aparece. Não comece com “imagem de”. Vá ao ponto.

• Marca feita de texto: escreva as palavras da marca.
• Foto da orla que ilustra o encontro: “Pôr do sol sobre o rio na Praia do Jacaré, com veleiro e vegetação na margem.”
• Gráfico: resuma o dado, não a paleta.
• Decoração forçada em img: alt="".

Erro comum: alt="foto.jpg" ou alt="imagem1". Isso lê o nome do arquivo, não o conteúdo.

Se o img é o único conteúdo de um link, o alt é o nome do destino: alt="Ir para Projetos".

Figure e figcaption

Legenda visível para todo mundo: envolva a imagem.

<figure>
  <img src="assets/imagens/marca.svg" alt="">
  <figcaption>Marca da Oficina Costeira, coletivo fictício em João Pessoa.</figcaption>
</figure>

Aqui o alt pode ficar vazio se a figcaption já diz a mesma coisa. Repetir cansa no leitor de tela. Sem legenda, não use figure: um img sozinho basta.

figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

figcaption {
  font-size: 0.95rem;
  margin-top: 0.35rem;
}

Mude a figcaption para uma frase nova. Preveja o texto sob a marca. Recarregue.

Fundo no CSS

O caminho em url() é relativo ao CSS.

.hero {
  background-image: url("../imagens/marca.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 8rem;
  padding: 2rem 1rem 4rem;
  background-color: #0b4f6c;
  color: #fff;
}

Sem conteúdo ou altura, a caixa tem altura zero e o fundo some. Coloque texto ou padding. Não use height fixo se o texto precisa crescer.

background-repeat: no-repeat, repeat-x, repeat-y ou repeat. background-position leva horizontal e depois vertical: center top, 80% 100%.

O fundo não tem alt. Quem não vê a imagem ainda lê o h1. Esse é o teste: desligue imagens no navegador e a página continua clara.

background-size: cover no hero enche a caixa. contain mostra a marca inteira. 100% auto estica na largura e calcula a altura. Palavras top, center e right no background-position vêm antes do eixo vertical.

Vários fundos no mesmo elemento existem (vírgula na propriedade). Neste volume um basta. Degradê CSS no lugar de uma faixa PNG economiza um pedido — assunto do capítulo 31, aplicado aqui.

Erro comum: url("assets/imagens/marca.svg") no CSS dentro de stylesheets. O pedido vira assets/stylesheets/assets/... e 404. Use ../imagens/.

Proporção do banner

Para um recorte que acompanha a foto, calcule (altura ÷ largura) × 100. Uma imagem 1920×1080 vira padding-top: 56.25%.

.faixa-orla {
  position: relative;
  padding-top: 56.25%;
  background-image: url("../imagens/orla.jpg");
  background-size: cover;
  background-position: center;
}

.faixa-orla h2 {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
}

cover preenche a caixa e pode cortar as bordas. contain mostra a imagem inteira e pode deixar faixa. No enfeite, cover é o mais comum.

Copie. Troque cover por contain. Preveja as laterais. Recarregue.

Conferir de ponta a ponta

Abra o exemplo. Confira cada img com alt. Confira cada fundo: o texto por cima tem contraste. Estreite a janela: max-width: 100% impede overflow. Tab não deve “saltar” uma imagem de conteúdo que é link.

No painel Rede, veja o tamanho. Troque um PNG de foto por JPG na produção e compare. Não publique a página: teste em 127.0.0.1 se o caminho file:// mentir.

Mude só o background-position para left top. Preveja a marca. Recarregue.

Se a figura for conteúdo e também tiver um fundo decorativo no mesmo bloco, o img leva o alt e o CSS leva a onda. Não descreva a onda no alt. Duas funções, duas técnicas.

Abra o exemplo 32-imagens-html-css. Inspecione cada img. Confira o caminho no disco. Um src com barra invertida do Windows quebra no servidor. Use barra /.

Sprite CSS (várias figuras num PNG só) reduz pedidos e complica o recorte. Neste volume, um arquivo por figura. Menos magia, mais caminho certo.

object-fit: cover no img corta como background-size: cover, mas a figura continua no HTML com alt. Use quando o cartão tem altura fixa e a foto precisa preencher. Sem altura, object-fit não faz milagre.

.card img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

Copie. Mude cover para contain. Preveja faixas vazias. Recarregue.

Atividades

1. A marca no cabeçalho, se for a única identificação visual do coletivo, vai em img ou em fundo? Por quê?
2. Quando o alt de um img dentro de figure pode ficar vazio?
3. Por que um div vazio com background-image não mostra nada?
4. Qual par de propriedades impede a foto de estourar a largura da coluna?
5. O fundo decorativo precisa de alt?

Respostas comentadas

1. img, com alt descrevendo a marca. Sem a imagem, a identidade some; fundo CSS não tem alternativa textual.
2. Quando a figcaption já descreve o mesmo conteúdo e repetir seria ruído.
3. A caixa colapsa a zero de altura. Falta conteúdo ou padding.
4. max-width: 100% e height: auto no img.
5. Não. Se a informação importasse, a figura seria img com alt.

Referências

• img
• figure
• background-image
• background-size

O arquivo completo

Referência do exemplo 32-imagens-html-css, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}