Imagens

Imagens decorativas, como gradientes de plano de fundo em botões ou imagens de plano de fundo em seções de conteúdo ou na página inteira, são de apresentação e devem ser aplicadas com CSS. Quando uma imagem adiciona contexto a um documento, ela é conteúdo e deve ser incorporada com HTML.

O principal método para incluir imagens é a tag <img> com o atributo src que faz referência a um recurso de imagem e o atributo alt que descreve a imagem.

<img src="images/eve.png" alt="Eve">

O atributo srcset em <img> e o elemento <picture> oferecem uma maneira de incluir várias origens de imagem com consultas de mídia associadas, cada uma com uma origem de imagem substituta, permitindo veicular o arquivo de imagem mais adequado com base na resolução do dispositivo, nos recursos do navegador e no tamanho da janela de visualização. O atributo srcset permite fornecer várias versões de imagem com base na resolução e, junto com o atributo sizes, no tamanho da janela de visualização do navegador.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Isso também pode ser feito com o elemento <picture>, junto com os filhos <source>, que usam um <img> como fonte padrão.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

Além desses métodos de imagem responsiva HTML integrados, o HTML também permite melhorar o desempenho da renderização de imagens usando vários atributos. A tag <img> e, portanto, os botões gráficos de envio <input type="image"> podem incluir atributos height e width para definir a proporção da imagem e reduzir a mudança de layout do conteúdo. O atributo lazy ativa o carregamento lento.

O HTML também aceita a inclusão de imagens SVG usando o <svg> diretamente, embora imagens SVG com a extensão .svg (ou como um data-uri) possam ser incorporadas usando o elemento <img>.

No mínimo, cada imagem em primeiro plano precisa incluir os atributos src e alt.

O arquivo src é o caminho e o nome do arquivo da imagem incorporada. O atributo src é usado para fornecer o URL da imagem. Em seguida, o navegador busca o recurso e o renderiza na página. Esse atributo é obrigatório para <img>. Sem ele, não há nada para renderizar.

O atributo alt fornece um texto alternativo para a imagem, oferecendo uma descrição para quem não consegue ver a tela (como mecanismos de pesquisa e tecnologias assistivas, além de Alexa, Siri e Google Assistente). Ele pode ser exibido pelo navegador se a imagem não carregar. Além de usuários com redes lentas ou largura de banda limitada, o texto alt é muito útil em e-mails HTML, já que muitos usuários bloqueiam imagens nos aplicativos de e-mail.

<img src="path/filename" alt="descriptive text" />

Se a imagem for do tipo SVG, inclua também role="img", necessário devido a VoiceOver do VoiceOver.

<img src="switch.svg" alt="light switch" role="img" />

Escrever descrições de imagens alt eficazes

Os atributos alt são curtos e concisos, fornecendo todas as informações relevantes que a imagem transmite e omitindo informações redundantes para outros conteúdos do documento ou que não são úteis. Ao escrever o texto, o tom precisa refletir o do site.

Para escrever um texto alternativo eficaz, imagine que você está lendo a página inteira para uma pessoa que não consegue vê-la. Ao usar o elemento semântico <img>, os usuários de leitores de tela e bots são informados de que o elemento é uma imagem. É redundante incluir "Esta é uma imagem/captura de tela/foto de" no alt. O usuário não precisa saber que há uma imagem, mas precisa saber quais informações ela transmite.

Normalmente, você não diria: "Esta é uma imagem granulada de um cachorro usando um chapéu vermelho". Em vez disso, você vai transmitir o que a imagem está transmitindo em relação ao contexto do restante do documento. O que você transmite muda dependendo do contexto e do conteúdo do texto ao redor.

Por exemplo, a foto de um cachorro é descrita de maneiras diferentes, dependendo do contexto. Se Fluffy for um avatar ao lado de uma avaliação da ração para cachorros Yuckymeat, alt="Fluffy" será suficiente.

Se a foto fizer parte da página de adoção do Fluffy no site de um abrigo de animais, o público-alvo será o futuro tutor do cachorro. O texto precisa descrever as informações relevantes para um adotante que são transmitidas na imagem e não estão duplicadas no texto ao redor. Uma descrição mais longa, como alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" é adequada. O texto de uma página de adoção geralmente inclui a espécie, a raça, a idade e o gênero do animal disponível para adoção. Portanto, não é necessário repetir essas informações no texto alternativo. Mas a biografia escrita do cachorro provavelmente não inclui comprimento do pelo, cores ou preferências de brinquedos.

É importante notar que não descrevemos a imagem por completo. O possível dono do cachorro não precisa saber se o animal está dentro ou fora de casa, ou que ele tem uma coleira vermelha e uma guia azul.

Ao usar imagens para iconografia, como o atributo alt fornece o nome acessível, transmita o significado do ícone, não uma descrição da imagem. Por exemplo, o atributo alt do ícone de lupa é search. O ícone que parece uma casa tem home como texto alternativo. A descrição do ícone de disquete de 5 polegadas é save. Se houver dois ícones do Fluffy usados para indicar práticas recomendadas e antipadrões, o cachorro sorridente com uma boina verde poderá ter alt="good" definido, enquanto o cachorro rosnando com uma boina vermelha poderá ler alt="bad". Use apenas iconografia padrão. Se você usar ícones não padrão, como o Fluffy bom e o ruim, inclua uma legenda e verifique se os ícones não são a única maneira de decifrar o significado dos elementos da interface.

Se a imagem for uma captura de tela ou um gráfico, escreva o que é aprendido com ela em vez de descrever a aparência. Embora uma imagem possa valer mais do que mil palavras, a descrição precisa transmitir de forma concisa tudo o que foi aprendido.

Omita informações que o usuário já conhece do contexto e que são informadas no conteúdo. Por exemplo, se você estiver em uma página de tutorial sobre como mudar as configurações do navegador e a página for sobre clicar em ícones no navegador Chrome, o URL da página na captura de tela não é importante. Limite o alt ao tema em questão: como mudar as configurações.

O alt pode ser "O ícone de configurações está na barra de navegação abaixo do campo de pesquisa". Não inclua "captura de tela" ou "machinelearningworkshop", porque o usuário não precisa saber que é uma captura de tela nem onde o escritor técnico estava navegando quando escreveu as instruções. A descrição da imagem é baseada no contexto de por que ela foi incluída.

Se a captura de tela mostrar como encontrar o número da versão do navegador acessando chrome://version/, inclua o URL no conteúdo da página como instruções e forneça uma string vazia como o atributo "alt", já que a imagem não fornece informações que não estejam no texto ao redor.

Se a imagem não fornecer informações adicionais ou for meramente decorativa, o atributo ainda deve estar lá, assim como uma string vazia.

<img src="svg/magazine.svg" alt="" role="none" />

O site MachineLearningWorkshop.com tem sete imagens em primeiro plano, portanto, sete imagens com atributos alt: um interruptor de luz de easter egg, um ícone manual, duas fotos biográficas de Hal e Eve e três avatares de um liquidificador, um aspirador de pó e uma torradeira. A imagem em primeiro plano que parece uma revista é a única puramente decorativa. A página também tem duas imagens de plano de fundo. Essas imagens são decorativas e foram adicionadas com CSS. Portanto, elas são inacessíveis.

A revista, sendo puramente decorativa, tem um atributo alt vazio e um role de none porque a imagem é um SVG puramente de apresentação. Se for relevante, as imagens SVG devem incluir o role="img".

<img src="svg/magazine.svg" alt="" role="none" />

Há três avaliações na parte de baixo da página, cada uma com uma imagem do pôster. Normalmente, o texto alt é o nome da pessoa na foto.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

Em vez disso, como esta é uma página de piadas, transmita o que pode não ser aparente para usuários com baixa visão para que eles não percam o humor. Usamos a função original da máquina como alt em vez do nome do personagem:

<img src="images/blender.svg" alt="blender" role="img" />

As fotos dos instrutores não são apenas avatares: são imagens biográficas e, portanto, recebem uma descrição mais detalhada.

Se fosse um site real, você daria uma descrição mínima da aparência do professor para que um possível estudante o reconhecesse ao entrar na sala de aula.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

Como este é um site de piadas, forneça as informações relevantes no contexto da piada:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

Se você estivesse lendo a página para um amigo por telefone, ele não se importaria com a aparência do ponto vermelho. Nesse caso, o histórico da referência do filme é importante.

Ao escrever um texto descritivo, considere quais informações a imagem transmite que são importantes e relevantes para o usuário e inclua isso. O conteúdo do atributo alt de uma imagem varia de acordo com o contexto. Todas as informações transmitidas em uma imagem que um usuário com visão pode acessar e que são relevantes para o contexto precisam ser transmitidas, nada mais. Seja breve, preciso e útil.

Os atributos src e alt são requisitos mínimos para imagens incorporadas. Há mais alguns atributos que precisamos discutir.

Imagens responsivas

Há uma infinidade de tamanhos de janela de visualização e resoluções de tela. Você não quer desperdiçar a largura de banda de um usuário de dispositivo móvel exibindo uma imagem larga o suficiente para um monitor de tela grande, mas talvez queira exibir imagens de resolução mais alta para dispositivos pequenos que têm quatro vezes a resolução de tela normal. Há algumas maneiras de veicular imagens diferentes com base no tamanho da janela de visualização e na resolução da tela.

<img> srcset atributo

O atributo srcset permite sugerir vários arquivos de imagem, com o navegador selecionando qual imagem solicitar com base em várias consultas de mídia, incluindo tamanho da janela de visualização e resolução da tela.

Pode haver um único atributo srcset por elemento <img>, mas esse srcset pode ser vinculado a várias imagens. O atributo srcset aceita uma lista de valores separados por vírgulas, cada um contendo o URL do recurso seguido por um espaço e por descritores para essa opção de imagem. Se um descritor de largura for usado, inclua também o atributo sizes com uma consulta de mídia ou um tamanho de origem para cada opção srcset, exceto a última. Vale a pena ler as seções de aprendizado sobre imagens responsivas com srcset e sintaxes descritivas.

A imagem srcset tem precedência sobre a imagem src se houver uma correspondência.

<picture> e <source>

Outro método para fornecer vários recursos e permitir que o navegador renderize o recurso mais adequado é com o elemento <picture>. O elemento <picture> é um contêiner para várias opções de imagem listadas em um número ilimitado de elementos <source> e um único elemento <img> obrigatório.

Os atributos de <source> incluem srcset, sizes, media, width e height. O atributo srcset é comum a img, source e link, mas geralmente é implementado de maneira um pouco diferente na origem, já que as consultas de mídia podem ser listadas no atributo de mídia de <srcset>. A <source> também aceita formatos de imagem definidos no atributo type.

O navegador considera cada elemento filho <source> e escolhe a melhor correspondência entre eles. Se nenhuma correspondência for encontrada, o URL do atributo src do elemento <img> será selecionado. O nome acessível vem do atributo alt do <img> aninhado. As seções de aprendizado que abordam o elemento <picture> e as sintaxes prescritivas também valem a pena ser lidas.

Outros recursos de performance

Há vários outros recursos de imagem que podem melhorar o desempenho do seu site.

Carregamento lento

O atributo loading informa ao navegador compatível com JS como carregar a imagem. O valor padrão eager significa que a imagem é carregada imediatamente quando o HTML é analisado, mesmo que ela esteja fora da janela de visualização visível. Ao definir loading="lazy", o carregamento da imagem é adiado até que ela provavelmente apareça na janela de visualização. "Provável" é definido pelo navegador com base na distância da imagem em relação à janela de visualização. Essa informação é atualizada conforme o usuário rola a tela. O carregamento lento ajuda a economizar largura de banda e CPU, melhorando o desempenho para a maioria dos usuários. Se o JavaScript estiver desativado, por motivos de segurança, todas as imagens serão definidas como eager por padrão.

<img src="switch.svg" alt="light switch" loading="lazy" />

Proporção

Os navegadores começam a renderizar o HTML quando ele é recebido, fazendo solicitações de recursos quando encontrados. Isso significa que o navegador já está renderizando o HTML quando encontra a tag <img> e faz a solicitação. e as imagens podem levar um tempo para carregar. Por padrão, os navegadores não reservam espaço para imagens além do tamanho necessário para renderizar o texto alt.

O elemento <img> sempre foi compatível com atributos height e width sem unidade. Essas propriedades caíram em desuso em favor do CSS. O CSS pode definir dimensões de imagem, geralmente definindo uma única dimensão, como max-width: 100%;, para garantir que a proporção seja preservada.

Como o CSS geralmente é incluído no <head>, ele é analisado antes de qualquer <img> ser encontrado. Mas, sem listar explicitamente a height ou a proporção, o espaço reservado é a altura (ou largura) do texto alt.

Quando os desenvolvedores declaram apenas uma largura, o recebimento e a renderização de imagens causam uma mudança de layout cumulativa, o que prejudica as métricas da Web. Para resolver esse problema, os navegadores são compatíveis com proporções de imagem. Incluir atributos height e width no <img> funciona como dicas de dimensionamento, informando ao navegador a proporção, permitindo que a quantidade certa de espaço seja reservada para a renderização eventual da imagem. Quando o navegador encontra uma única dimensão, como nosso exemplo de 50%, ele salva espaço para a imagem seguindo a dimensão CSS e com a outra dimensão mantendo a proporção largura-altura.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

As imagens são responsivas se o CSS foi configurado corretamente para torná-las responsivas. Sim, os valores height e width sem unidade incluídos são substituídos com CSS. O objetivo de incluir esses atributos é reservar o espaço na proporção correta, melhorando o desempenho ao reduzir a mudança de layout. A página ainda vai levar aproximadamente o mesmo tempo para carregar, mas a interface não vai pular quando a imagem for renderizada na tela.

Outros recursos de imagem

O elemento <img> também é compatível com os atributos crossorigin, decoding, referrerpolicy e, em navegadores baseados no Blink, fetchpriority. Raramente usado. Se a imagem fizer parte de um mapa do lado do servidor, inclua o atributo booleano ismap e aninhe o <img> em um link para usuários sem dispositivos apontadores.

O atributo ismap não é necessário nem compatível com o <input type="image" name="imageSubmitName">, já que as coordenadas x e y do local do clique são enviadas durante o envio do formulário, anexando os valores ao nome de entrada, se houver. Por exemplo, algo como &imageSubmitName.x=169&imageSubmitName.y=66 é enviado com o formulário quando o usuário clica na imagem. Se a imagem não tiver um atributo name, as coordenadas x e y serão enviadas: &x=169&y=66.

Teste seu conhecimento

Teste seus conhecimentos sobre imagens.