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 precisam ser aplicados com CSS. Quando uma imagem adiciona contexto a um documento, ela é um conteúdo e deve ser incorporado com HTML.

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

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

O atributo srcset em <img> e o elemento <picture> fornecem 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 no os recursos do navegador e o 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 usa um <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 em HTML integrados, o HTML também permite que que o desempenho da renderização seja melhorado por meio de vários atributos. A tag <img> e, portanto, os botões de envio gráficos <input type="image">, pode incluir os 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 permite a inclusão de imagens SVG usando o <svg> diretamente, embora SVG Imagens com a extensão .svg (ou como um data-uri) podem ser incorporadas usando o elemento <img>.

Cada imagem de primeiro plano precisa incluir pelo menos 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. O navegador busca o recurso e o renderiza na página. Esse atributo é exigido por <img>. sem ele, não há nada para renderizar.

O atributo alt fornece um texto alternativo para a imagem, com uma descrição para quem não consegue acessar o tela (como mecanismos de pesquisa e tecnologias adaptativas, até mesmo Alexa, Siri e Google Assistente) e pode ser exibida pelo navegador caso a imagem não carregue. Além de usuários com redes lentas ou largura de banda limitada, o texto alt é incrivelmente útil em HTML e-mails, 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ária devido a bugs do VoiceOver.

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

Como criar descrições de imagens alt 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 outros conteúdos do documento ou que não sejam úteis. Ao escrever o texto, o tom deve refletem 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 pode vê-la. Usando o elemento semântico <img>, os usuários de leitores de tela e os bots são informados 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 a imagem transmite.

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

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

Se a foto fizer parte da página de adoção da Fluffy em um site de abrigo de animais, o público-alvo é o cachorro em potencial. pai 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. Uma descrição mais longa, como alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth", é apropriada. O texto de uma página de adoção geralmente inclui a espécie, raça, idade e gênero do animal de estimação adotável, Portanto, isso não precisa ser repetido no texto alternativo. Mas a biografia escrita do cachorro provavelmente não inclui comprimento do pelo, cores, ou preferências de brinquedos. Observe que não descrevemos a imagem: o dono do cachorro em potencial não precisa saber se o cachorro está em ambientes fechados ou ao ar livre, ou que tenha uma coleira vermelha e uma guia azul.

Ao usar imagens para iconografia, como o atributo alt fornece o nome acessível, transmite o significado do ícone, e não uma descrição da imagem. Por exemplo, o atributo alternativo do ícone de lupa é search. O ícone que parece por exemplo, 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 pode ter alt="good" definido, enquanto o cão rosnando em uma boina vermelha pode dizer alt="bad". Dito isso, use apenas a iconografia padrão e, se usar ícones não padrão, como o bom e o ruim Fluffy, incluir uma legenda e garantir que os ícones não sejam as únicas maneiras de decifrar o significado dos elementos da interface,

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

Omitir informações que o usuário já conhece do contexto e é informado de outra forma 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 a alt ao tema em questão: como mudar as configurações. O alt pode ser "O ícone de configurações fica na barra de navegação abaixo do campo de pesquisa." Não inclua "captura de tela" ou "workshop de machine learning" já que o usuário não precisa saber que se trata de uma captura de tela nem saber onde o redator estava navegando quando escreveu as instruções. A descrição da imagem é baseada no contexto de por que a imagem foi incluída em primeiro lugar.

Se a captura de tela mostrar como encontrar o número da versão do navegador acessando chrome://version/, inclua o URL no campo 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. fora do texto ao redor.

Se a imagem não fornecer informações adicionais ou for puramente decorativa, o atributo ainda estará presente, 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 interruptor de luz um ícone de 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 de primeiro plano que parece uma revista é a única totalmente decorativa. A página também tem duas imagens de plano de fundo, eles também são decorativos e, conforme são adicionados com CSS, são inacessíveis.

A revista, sendo puramente decorativa, tem um atributo alt vazio e um role de none, já que a imagem é puramente um SVG apresentações. Se forem significativas, as imagens SVG precisarão 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 cartaz. Normalmente, o texto alt é o nome da pessoa retratada.

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

Em vez disso, como esta é uma página de brincadeira, você deve transmitir o que pode não ser aparente aos 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 de usar o nome do caractere:

<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 o site fosse real, você forneceria uma descrição mínima da aparência do professor para que um aluno em potencial possa e pode reconhecê-los 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 o site é de piada, 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 o histórico da referência do filme.

Ao escrever um texto descritivo, considere quais informações a imagem transmite que são importantes e relevantes para o usuário e incluir isso. Lembre-se de que o conteúdo do atributo alt de uma imagem é diferente com base no contexto. Todas as informações transmitidas em uma imagem que um usuário sem deficiência visual pode acessar e que seja relevante para o contexto é o que precisa ser transmitido; nada mais. Seja breve, preciso e útil.

Os atributos src e alt são requisitos mínimos para imagens incorporadas. Precisamos discutir alguns outros atributos.

Imagens responsivas

Há diversos tamanhos de janela de visualização. Há também diferentes resoluções de tela. Você não quer desperdiçar as informações de um usuário de largura de banda ao veicular uma imagem com largura suficiente para um monitor de tela grande, mas você pode querer veicular uma resolução maior imagens para dispositivos pequenos que têm uma resolução de tela quatro vezes maior que a normal. Há algumas maneiras de disponibilizar 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 srcset aceita uma lista de valores separados por vírgula, cada um contendo o URL do recurso seguido por um espaço seguido por descritores para essa opção de imagem. Se um descritor de largura for usado, também será necessário incluir o atributo sizes com um valor consulta ou tamanho de origem para cada opção de srcset diferente da última. Vale a pena ler as seções de aprendizado sobre imagens responsivas com srcset e sintaxes descritivas.

Se houver uma correspondência, a imagem srcset terá precedência sobre a imagem src.

<picture> e <source>

Outro método para fornecer vários recursos e permitir que o navegador renderize o ativo mais apropriado é usar a Elemento <picture>. O elemento <picture> é um contêiner. para várias opções de imagem listadas em um número ilimitado de <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 forma um pouco diferente na origem. já que as consultas de mídia podem ser listadas no atributo de mídia do <srcset>. <source> também oferece suporte a 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> está 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 sintaxes prescritivas.

Outros recursos de desempenho

Carregamento lento

O atributo loading informa ao navegador com JS como carregar a imagem. O valor padrão eager significa que a imagem carregado imediatamente enquanto o HTML é analisado, mesmo que a imagem esteja fora da janela de visualização visível. Ao definir loading="lazy" o carregamento da imagem é adiado até que ela provavelmente chegue à janela de visualização. "Provável" é definido pelo navegador com base na distância a imagem é da janela de visualização. Isso é atualizado 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á renderizando o HTML quando encontra a tag <img> e faz a solicitação. Além disso, as imagens podem demorar um pouco 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 os atributos height e width sem unidade. Estas propriedades deixaram de ser usadas 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 o height ou proporção, o espaço reservado é a altura (ou largura) do texto alt. Como a maioria dos desenvolvedores só declara uma largura, o recebimento e a renderização de imagens leva a uma mudança cumulativa de layout, o que prejudica as Web Vitals. Para resolver esse problema, os navegadores são compatíveis com proporções de imagem. A inclusão dos atributos height e width no <img> atua como dicas de dimensionamento, que informam a proporção ao navegador, habilitando os quantidade de espaço a ser reservada para a renderização da imagem. Ao incluir um valor de altura e largura em uma imagem, o navegador sabe a proporção da imagem. Quando o navegador encontra uma única dimensão, como o 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" />

Se o CSS tiver sido configurado corretamente, suas imagens ainda serão responsivas. Sim, o modelo sem unidade incluso Os valores height e width serão substituídos pelo CSS. O objetivo da inclusão desses atributos é reservar o espaço a proporção certa, melhorando o desempenho reduzindo a mudança de layout. A página ainda terá aproximadamente a mesma quantidade tempo para carregar, mas a interface não pulará quando a imagem for exibida na tela.

Outros recursos de imagem

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

O atributo ismap não é necessário ou compatível com o <input type="image" name="imageSubmitName"> como x e y. As coordenadas do local do clique são enviadas durante o envio do formulário, anexando os valores ao nome inserido, 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. enviá-la. Se a imagem não tiver um atributo name, x e y serão enviados: &x=169&y=66.

Teste seu conhecimento

Teste seus conhecimentos sobre imagens.