Imagens

Estrutura básica

Imagens são marcadas com a tag <img>. Veja um exemplo de imagem básica:

<img src="universidade-nevada.png" alt="Foto da fachada da Universidade de Nevada">

O atributo src (de source) é a URL da imagem. O atributo alt representa o texto alternativo da imagem. Geralmente, ele é uma descrição da imagem. Ele é útil para motores de busca e também para usuários de leitores de tela. Além disso, o conteúdo dele também é exibido quando a imagem não pode ser carregada. Todas as imagens devem ter o atributo alt. Há casos em que fornecer um valor que não seja vazio ao atributo alt não faz sentido:

• quando a imagem é usada para propósitos de design, e não para ilustrar o conteúdo.
• quando o texto alt faz a leitura ficar redundante ou incoerente.

Nos casos acima, você deve especificar um atributo alt vazio. Veja um exemplo onde esse atributo é redundante:

<img src="add-user.png" alt="Adicionar usuário">Adicionar usuário

Nesse exemplo, o valor do atributo já está presente logo a seguir. Por isso, ele não deve ser especificado, porque é redundante.

Evite colocar textos nas imagens, pois os motores de busca não podem ler esses textos. Caso você queira exibir textos sobre a imagem, use HTML e CSS para fazer isso, para que o texto possa ser lido pelos motores de busca.

O atributo title é usado para fornecer uma informação adicional sobre a imagem, que geralmente é exibida como uma tooltip ao passar o mouse sobre a imagem. Não é recomendável usar esse atributo porque ele não é amigável para leitores de tela. Veja um exemplo de imagem que o contém:

<img src="universidade-nevada.png" alt="Foto da fachada da Universidade de Nevada" title="Universidade de Nevada">

Você também pode adicionar legendas às suas imagens. Elas são marcadas com o elemento <figcaption>. É necessário envolver a imagem e a legenda dentro do elemento <figure>:

<figure>
  <img src="foo.png" alt="Texto alternativo">
  <figcaption>Legenda da imagem</figcaption>
</figure>

A legenda não deve ter o mesmo valor do atributo alt, principalmente porque isso é péssimo para a experiência dos usuários de leitores de tela, que escutariam o mesmo texto duas vezes desnecessariamente. Então, se você usar uma legenda, lembre-se de usar um texto diferente do valor do atributo alt, que adicione algum valor à imagem. Caso você não possa fazer isso, é preferível deixar a imagem sem legenda, até porque a legenda é opcional e não é muito usada.

O elemento <figure> pode ser usado para envolver e fornecer uma legenda para outras coisas também, tais como vídeos e tabelas.

Imagens responsivas

Atributos size e srcset

Hoje em dia, as pessoas acessam a internet de vários dispositivos diferentes, sendo que computadores, tablets e smartphones são os dispositivos mais comuns.

Imagine que um site tenha uma imagem que ocupe todo o cabeçalho, de 1200px de largura. Essa imagem pode servir para o desktop, mas ela não é otimizada para o tablet e o smartphone, que tem telas menores, visto que eles vão baixar uma imagem grande, mas vão redimensioná-la para um tamanho muito menor do que o original. Esses dispositivos precisam de uma versão menor da imagem, mais próxima da versão que eles vão usar. É aí que entra o conceito de imagens responsivas. Ele consiste em servir diferentes imagens, se certas condições forem cumpridas.

Imagens responsivas podem ser feitas de duas formas: usando os atributos sizes e srcset no elemento <img>, ou usando o elemento <picture>. Vou falar primeiro da opção que usa os atributos sizes e srcset. Veja o exemplo abaixo:

<img srcset="img/foo-460w.jpg 460w,
             img/foo-748w.jpg 748w,
             img/foo-1200w.jpg 1200w"
     sizes="(max-width: 480px) 460px,
            (max-width: 768px) 748px,
            1200px"
     src="img/foo-1200w.jpg"
     alt="Foo">

O atributo srcset serve para especificar as imagens que você tem e a largura de cada uma. Cada especificação contém o caminho da imagem separado da largura que ela ocupa por um espaço. A largura deve ser um número inteiro com o sufixo "w" (de width). As especificações são separadas umas das outras por vírgulas. Uma convenção interessante é colocar um sufixo no nome da imagem indicando a largura dela, que é o que foi feito nesse exemplo.

O atributo sizes especifica um conjunto de condições de mídia e qual é a melhor largura para a imagem quando essas condições são satisfeitas. Veja que as condições são especificadas entre parênteses. No exemplo, eu condicionei apenas à largura máxima da tela, mas poderia condicionar à largura mínima (min-width) ou a outras medidas. O último item do atributo não deve ter nenhuma condição. Deve ter apenas a largura ideal. Ele é usado quando as outras condições não são satisfeitas, como um último recurso.

A largura ideal da imagem foi especificada em pixels, mas também poderia ser usado o em ou o vw (de viewport width), que é uma unidade de medida relativa ao viewport. Exemplo: 40vw significa 40% da largura do viewport.

Mesmo especificando os atributos sizes e srcset, é obrigatório especificar o atributo src, porque ele funciona como um fallback para os browsers que não suportam esses novos atributos. Eles são atributos novos, porque a chegada dos smartphones e tablets é relativamente nova. Durante muito tempo, o acesso a internet só era feito usando desktops.

Largura ideal

Como você pode saber a largura ideal da imagem? Uma das formas é usando ferramentas que permitem inspecionar elementos HTML, consultando valores das suas propriedades CSS. Assim, você pode inspecionar a imagem quando a tela tem as larguras das condições que você quer usar no atributo sizes. No exemplo abaixo, a imagem ocupa 460px quando a largura da tela é 480px (a largura da maioria dos smartphones no modo retrato). Essa é a largura ideal da imagem.

Já quando a largura da tela é 768px (a largura de alguns smartphones no modo paisagem e de alguns tablets), ela ocupa 748px:

Quando a largura da tela é 1280px (a largura de alguns desktops), a imagem ocupa 1260px:

Com esses dados, poderíamos usar um atributo sizes assim:

sizes="(max-width: 480px) 460px,
       (max-width: 768px) 748px,
       1260px"

Usando x-descriptors

Também é possível usar o atributo srcset especificando x-descriptors, ao invés de tamanhos. Nesse caso, o atributo sizes não precisa ser especificado.

<img srcset="img/foo-400w.jpg 1x,
             img/foo-600w.jpg 1.5x,
             img/foo-800w.jpg 2x"
     src="img/foo-800w.jpg"
     alt="Foo">

Assim, se a device-pixel ratio do dispositivo for 1, será usada a primeira imagem do srcset. Se for 1.5, será usada a segunda imagem. Se for 2, será usada a terceira imagem.

As outras versões da imagem não precisam necessariamente ser versões redimensionadas da mesma imagem. Elas podem ser recortes da imagem. Isso é muitas vezes usado quando o redimensionamento faz com que a imagem perca muita qualidade, prejudicando a experiência do usuário. Aí, é feito um recorte pegando a parte mais importante da imagem, o que faz com que ela apareça de forma mais destacada e não perca a qualidade.

Picture e source

Outra forma de usar imagens responsivas é usando o elemento <picture> com elementos <source> dentro dele:

<picture>
  <source media="(max-width: 480px)" srcset="foo-440w.jpg">
  <source media="(max-width: 768px)" srcset="foo-728w.jpg">
  <img src="foo-800w.jpg">
</picture>

Nesse método, cada <source> tem um atributo srcset que especifica a imagem que deve ser usada caso as condições de mídia do atributo media forem atendidas. Perceba que não é necessário especificar o tamanho da imagem no atributo srcset. Basta especificar o caminho da imagem.

Nesse exemplo, em telas com largura de até 480px, a primeira imagem será mostrada. Em telas com larguras de até 768px, a segunda imagem será mostrada. E em telas com mais de 768px, a imagem do elemento <img> será exibida.

O elemento <img> é obrigatório, e deve ser sempre o último elemento do <picture>. Ele serve tanto como um fallback para browsers que não suportam essa sintaxe, como para abranger casos nos quais as condições dos elementos <source> não foram atendidas.

Novos formatos de imagens

Além de ser usado para marcar imagens responsivas, o elemento <picture> também pode ser usado para fornecer imagens em formatos novos, que ainda não tem um bom suporte dos browsers, como o formato .webp. Basta colocar o caminho da imagem no atributo srcset, e colocar o atributo type, com o MIME type do arquivo da imagem.

<picture>
  <source type="image/webp" srcset="foo.webp">
  <img src="foo.jpg">
</picture>

Note que continua sendo obrigatório usar o elemento <img>, como um fallback para os browsers que não entendem essa sintaxe ou que não suportam os formatos fornecidos.