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 precisam ser aplicadas com CSS. Quando uma imagem adiciona contexto a um documento, ela é conteúdo e precisa ser incorporada ao HTML.
O método principal para incluir imagens é a tag <img>, com o atributo src
referenciando um recurso de imagem e o atributo alt que descreve a imagem.
<img src="images/eve.png" alt="Eve">
O atributo srcset no <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 a veiculação do 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, 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> e com filhos <source>, que usa uma <img> como origem 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 por meio de vários atributos. A tag <img> e, portanto, os botões gráficos de envio <input type="image">,
podem incluir os atributos height e width para definir a proporção da imagem e reduzir a mudança do layout do conteúdo. O atributo lazy ativa o carregamento lento.
O HTML também oferece suporte à inclusão de imagens SVG usando o <svg> diretamente. No entanto, imagens SVG
com a extensão .svg (ou como um data-uri) podem ser incorporadas usando o elemento <img>.
No mínimo, cada imagem de primeiro plano precisa incluir os atributos src e alt.
O arquivo src é o caminho e o nome de 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 é exigido pelo <img>. Sem ele, não há nada
para renderizar.
O atributo alt fornece um texto alternativo para a imagem, fornecendo uma descrição da imagem para aqueles que não conseguem ver a
tela (como mecanismos de pesquisa e tecnologias adaptativas e até mesmo Alexa, Siri e Google Assistente) e pode ser mostrado 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 de arquivo SVG, inclua também role="img", que
é necessário devido a VoiceOver bugs.
<img src="switch.svg" alt="light switch" role="img" />
Como escrever alt descrições de imagens eficazes
Os atributos alternativos têm como objetivo ser curtos e concisos, fornecendo todas as informações relevantes que a imagem transmite, omitindo informações redundantes em relação a outro conteúdo no documento ou que não sejam úteis. Ao escrever o texto, o tom deve refletir o tom 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ê-lo. Ao usar
o elemento semântico <img>, os usuários e bots do leitor de tela 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ê transmite 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 de ração para cães Yuckymeat, alt="Fluffy" será suficiente.
Se a foto fizer parte da página de adoção do Fluffy em um site de abrigo de animais, o público-alvo será o possível pai/mãe do cachorro. O texto precisa descrever as informações transmitidas na imagem que sejam relevantes para um usuário e que não estejam duplicadas
no texto ao redor. É recomendável usar uma descrição mais longa, como alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her
mouth". Geralmente, o texto de uma página de adoção inclui a espécie, a raça, a idade e o gênero do animal de estimação adotável,
então isso não precisa ser repetido no texto alternativo. Mas a biografia escrita do cachorro provavelmente não inclui comprimento do cabelo, cores
ou preferências de brinquedos. Observe que não descrevemos a imagem: o possível dono do cachorro não precisa saber se o cachorro está em uma área interna ou ao ar livre, ou se 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 alternativo 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 de Fluffy usados
para indicar práticas recomendadas e antipadrões, o cachorro sorridente de boina verde poderá ter o alt="good" definido, enquanto o cachorro rugindo
com uma boina vermelha pode ler alt="bad". Dito isso, use apenas a iconografia padrão e, se você usar ícones não padrão, como
o bom e o ruim Fluffy, inclua uma legenda e verifique se os ícones não são as únicas maneiras de decifrar o significado dos seus elementos da interface.
Se a imagem for uma captura de tela ou um gráfico, escreva o que foi aprendido com a imagem em vez de descrever a aparência. Uma imagem pode definitivamente valer mais que mil palavras, mas a descrição precisa transmitir de maneira concisa tudo o que foi aprendido.
Omita informações que o usuário já conhece do contexto e que é informado 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 Chrome do navegador, o URL da página na captura de tela não será importante. Limite a 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 se trata de uma captura de tela e não precisa saber onde o redator estava navegando quando escreveu
as instruções. A descrição da imagem se baseia no contexto da inclusão dela.
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 atributo alternativo, já que a imagem não fornece informações
que não estejam no texto ao redor.
Se a imagem não fornecer nenhuma informação adicional ou for puramente decorativa, o atributo ainda deverá estar lá, apenas como uma string vazia.
<img src="svg/magazine.svg" alt="" role="none" />
O MachineLearningWorkshop.com tem sete imagens em primeiro plano, portanto, sete imagens com atributos alternativos: um botão de luz de ovo de páscoa, 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 que é puramente decorativa. A página também tem duas imagens de plano de fundo. Elas também são decorativas e, como são adicionadas com CSS, não podem ser acessadas.
A revista, sendo puramente decorativa, tem um atributo alt vazio e um role de none, já que a imagem é um SVG puramente
apresentativo. Se for significativo, as imagens SVG precisam incluir o role="img".
<img src="svg/magazine.svg" alt="" role="none" />
Há três avaliações na parte inferior 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" />
Como esta é uma página de brincadeira, você precisa transmitir o que não é aparente a usuários com baixa visão para que eles não percam o
humor. Usamos a função de máquina original 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, por isso, recebem uma descrição mais detalhada.
Em um site real, você forneceria uma descrição mínima da aparência de um professor para que um possível aluno possa reconhecê-lo 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 brincadeira, 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, a história da referência ao 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 essas informações. 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 são o que precisa ser transmitida. Nada mais. Seja breve, preciso e útil.
Os atributos src e alt são requisitos mínimos para imagens incorporadas. Há alguns outros atributos que precisamos discutir.
Imagens responsivas
Há uma infinidade de tamanhos de janela de visualização. Há também diferentes resoluções de tela. Não é recomendável desperdiçar a largura de banda de um usuário de dispositivo móvel exibindo uma imagem com largura suficiente para um monitor de tela grande, mas recomendamos exibir imagens de resolução mais alta para dispositivos pequenos que têm quatro vezes a resolução normal da tela. 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 o tamanho da janela de visualização e a 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írgula, cada um contendo o URL do recurso seguido por um espaço seguido pelos
descritores dessa opção de imagem. Se um descritor de largura for usado, você também precisará incluir o atributo sizes com uma consulta
de mídia ou tamanho de origem para cada opção srcset diferente da última. Vale a pena ler as seções de aprendizado sobre imagens responsivas com srcset e sintaxes descritivas.
A imagem srcset vai ter 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 mais adequado é usando o
elemento <picture>. O <picture> é um elemento
de 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 <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 fonte, já que as consultas de mídia podem ser listadas no atributo de mídia <srcset>. O <source> também oferece suporte aos formatos de imagem definidos no atributo type.
O navegador considera cada elemento <source> filho 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 da <img> aninhada.
Também vale a pena ler as seções de aprendizado sobre o elemento <picture> e as sintaxes prescritivas.
Outros recursos de desempenho
Carregamento lento
O atributo loading informa ao navegador compatível com JS como carregar a imagem. O valor eager padrão 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 seja provável que ele chegue à janela de visualização. "Likely" é definido pelo navegador com base na distância
entre a imagem e a janela de visualização. Essa atualização é feita 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 padronizadas como eager.
<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 encontrado. Isso significa que o navegador já
está renderizando o HTML quando encontra a tag <img> e faz a solicitação. Além disso, as imagens podem levar algum tempo para carregar.
Por padrão, os navegadores não reservam espaço para imagens diferentes do tamanho necessário para renderizar o texto alt.
O elemento <img> sempre ofereceu suporte aos atributos height e width sem unidade. Essas propriedades deixaram de ser usadas
para o CSS. O CSS pode definir as dimensões da imagem, geralmente configurando uma única dimensão, como max-width: 100%;, para garantir que a proporção seja preservada.
Como o CSS geralmente está incluído no <head>, ele é analisado antes de qualquer <img> ser encontrada. No entanto, sem listar explicitamente o height ou
a proporção, o espaço reservado é a altura (ou largura) do texto alt. Como a maioria dos desenvolvedores declara apenas uma largura,
o recebimento e a renderização de imagens causam uma mudança de layout cumulativa, o que prejudica as Web Vitals.
Para resolver esse problema, os navegadores são compatíveis com proporções de imagem. A inclusão de atributos height e width no <img> funciona como
dicas de tamanho, informando a proporção ao navegador, permitindo que a quantidade
certa de espaço seja reservada para eventual renderização da imagem. Ao incluir um valor de altura e largura em uma imagem, o navegador
conhece a proporção dessa imagem. Quando o navegador encontra uma única dimensão, como no exemplo dos 50%, ele economiza espaço
para a imagem aderindo à dimensão CSS e com a outra dimensão mantendo a proporção largura x altura.
<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />
Suas imagens ainda vão ser responsivas se o CSS tiver sido configurado corretamente para torná-las responsivas. Sim, os valores height e width sem unidade incluídos serão substituídos pelo CSS. O objetivo da inclusão desses atributos é reservar o espaço na
proporção correta, melhorando a performance reduzindo 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 exibida na tela.
Outros recursos de imagem
O elemento <img> também oferece suporte aos atributos crossorigin, decoding, referrerpolicy e, em navegadores baseados em Blink,
fetchpriority. Raramente usada. Se a imagem faz 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">, porque 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 será enviado com o formulário quando o usuário clicar na imagem,
enviando-a. 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.
Quais são os dois atributos que uma imagem de primeiro plano sempre precisa ter?
sizealtsrc