Melhorando o desempenho com imagens responsivas em HTML

Ao falar sobre imagens responsivas, geralmente nos concentramos em técnicas CSS que fazem uma imagem se adaptar a diferentes tamanhos de janela de visualização, como definir a propriedade max-width como 100 por cento. No entanto, usar apenas CSS para tornar as imagens responsivas não melhorará o desempenho e os tempos de carregamento da página, pois você ainda veicula imagens do mesmo tamanho para todos os dispositivos. Por exemplo, carregar uma imagem de 2.000 pixels em um dispositivo móvel vem com uma sobrecarga enorme (e desnecessária).

Felizmente, o HTML também tem sua própria sintaxe, elementos e atributos para imagens responsivas que permitem exibir imagens diferentes para diferentes tamanhos de viewport, resoluções e outras condições. Neste guia, veremos como adicionar imagens responsivas em HTML e discutiremos os seguintes recursos:

• o elemento
• os atributos srcset e tamanhos
• x e w descritores
• os elementos e
• os atributos media e type

A sintaxe de imagem padrão

Para adicionar imagens responsivas em HTML, seu ponto de partida é sempre a sintaxe de imagem padrão, consistindo em elemento e os atributos src e alt :

Para o atributo src , você pode usar um absoluto (começando com o protocolo http:// ou https://) ou um caminho relativo-usei o último acima.

Você sempre precisa “construir” a sintaxe de imagem responsiva em cima desta definição padrão; isso também garante compatibilidade com versões anteriores.

O atributo srcset

O atributo srcset é um atributo opcional de elementos HTML relacionados à imagem, incluindo a tag . Você pode usá-lo para atribuir diferentes fontes de imagem a certos recursos do dispositivo do usuário, como tamanho da janela de visualização ou densidade de pixels . O navegador do usuário carregará apenas a imagem mais adequada para o dispositivo do usuário-o que pode significar um ganho significativo de desempenho.

Ao usar o atributo srcset , você deve adicionar a mesma imagem em tamanhos diferentes. Isso ocorre porque esse atributo apenas dá dicas ao navegador do usuário de que ele ainda pode carregar uma imagem diferente, pois também considera outras coisas, como a largura de banda da rede. Se você usar srcset , o navegador irá assumir que todas as fontes de imagem são visualmente idênticas. Se quiser exibir imagens de aparência diferente, você precisará usar os elementos e -vamos examiná-los mais tarde.

Existem duas maneiras de exibir imagens de tamanhos diferentes com o atributo srcset :

• usando descritores x :
  • você pode especificar diferentes fontes de imagem com base na densidade de pixels do dispositivo do usuário
  • você pode exibir imagens diferentes para dispositivos de baixa resolução vs. dispositivos de alta resolução
• usando descritores w e o atributo tamanhos :
  • o termo “ w descriptor” significa “descritor de largura”
  • você pode especificar diferentes fontes de imagem com base na largura das imagens
  • o navegador considera a densidade de pixels e as dimensões do layout (o espaço que ele precisa alocar para a imagem)

Agora, vamos dar uma olhada nas respectivas sintaxes.

O atributo srcset com x descritor (es)

Usando o seguinte HTML, você pode exibir imagens para telas de baixa e alta resolução:

A segunda imagem, myimage-2x.jpg , é duas vezes maior que a padrão (por exemplo, 1280x960px em comparação com 640x480px), mas só será carregada em telas de alta resolução. Será o navegador do usuário que decidirá qual imagem veicular, principalmente com base na densidade de pixels da tela.

Observe que você deve adicionar a imagem menor ao atributo src porque este será o padrão. Para o atributo srcset , você também precisa usar o descritor 2x para que o navegador saiba que esta é a imagem destinada a telas de alta resolução.

Você também pode adicionar mais de um valor ao atributo srcset . Por exemplo, com o seguinte código, você pode servir imagens para monitores 4K:

Para adicionar mais de uma fonte de imagem a srcset , você precisa usar os respectivos descritores x ( 2x , 3x , 4x , etc.) e separe os pares de valores por vírgulas.

O atributo srcset com w descritor (es) e o atributo tamanhos

Se desejar atingir a densidade de pixels e o tamanho do layout do dispositivo do usuário, você precisará usar o atributo srcset junto com um ou mais largura descritores e os tamanhos atributo .

Um descritor w define a largura da imagem de origem. Por exemplo, 600w indica que a imagem tem 600px de largura. Contanto que você os separe com vírgulas, você pode adicionar quantas fontes de imagem quiser ao atributo srcset , como:

Se você usar descritores de largura , também precisará usar o atributo tamanhos -caso contrário, o navegador não será capaz de descobrir qual fonte de imagem escolher. O atributo Tamanhos é freqüentemente mal compreendido porque as pessoas tendem a assumir que os valores de largura usados ​​nas condições de mídia do atributo Tamanhos estão relacionados ao w valores ( 300w , 600w , etc.) usados ​​no atributo srcset -no entanto, eles são independentes um do outro.

O atributo tamanhos tem duas finalidades:

1. informa o navegador sobre o espaço que ele precisa alocar para a imagem, dependendo do layout
2. permite que o navegador escolha a imagem que melhor se ajusta usando a largura das imagens disponíveis (definida pelos descritores w ) e a densidade de pixels da tela:
   1. Exemplo: para uma tela full-HD menor-digamos, 13,3 ”-o navegador pode escolher a mesma imagem, como a 1200w , como faz para uma tela maior e de baixa resolução tela-digamos 17,3 ”. A escolha do navegador também depende da distribuição de tamanho das imagens disponíveis e outras condições porque, como mencionei acima, os atributos srcset e tamanhos são opcionais, mas não obrigatórios para o navegador (ao contrário dos elementos e )

No exemplo de código acima, eu defini três layouts dentro do atributo tamanhos . Em viewports menores que 500 px, a imagem se estenderá por 100 por cento da largura da viewport ( 100vw ). Em viewports médias menores que 1000 px, a imagem precisará de 90 por cento da largura da viewport ( 90vw ). E, em viewports maiores que 1000px, o navegador precisará alocar 60 por cento da largura da viewport, menos 20px para as margens esquerda e direita ( calc (60vw-20px) ). O último também é o valor padrão, então não usei nenhum condições de mídia aqui.

Usando condições de mídia

Você pode usar qualquer número de condições de mídia para definir layouts diferentes e o espaço que a imagem precisará em cada um, mas é importante observar que adicionar condições de mídia ao atributo tamanhos é opcional. Ele só precisa incluir um valor padrão e, se seu layout parecer o mesmo em todos os tamanhos de janela de visualização, você não precisa usar nenhuma condição de mídia. Por exemplo, o exemplo acima pode ter a seguinte aparência:

Cuidado: você encontrará alguns tutoriais dizendo que você pode usar os descritores x e w juntos, mas de acordo com a documentação , esses dois não devem ser usados ​​juntos. Isso faz sentido quando você pensa sobre isso, pois quando você usa descritores w , o navegador também considera a densidade de pixels.

Portanto, se você deseja apenas atingir a densidade de pixels, use os descritores x . Se você deseja segmentar densidade de pixel e layout, use descritores w .

Os elementos e

Embora o elemento usado com o atributo srcset e os descritores x ou w sejam excelentes solução se você deseja veicular a mesma imagem em tamanhos diferentes, às vezes você vai querer carregar imagens visualmente diferentes para diferentes agentes de usuário.

Existem dois casos de uso principais que explicam por que você pode querer fazer isso:

• usando diferentes direções artísticas para diferentes condições de mídia, por exemplo, versões ampliadas e reduzidas da mesma imagem
• usando diferentes formatos de imagem para que você possa exibir imagens de última geração para navegadores modernos

HTML tem dois elementos para essas situações: e . O último pode ser usado para especificar diferentes recursos de mídia para os elementos , e .

Agora, vamos ver como fica a sintaxe.

Fontes de imagem com diferentes direções artísticas

Digamos que você tenha a seguinte imagem:

Esta é uma imagem perfeita para telas grandes, mas para telas de tamanho médio, convém fazer uma sequência mais próxima e também menor em tamanho:

E em telas pequenas, você só quer mostrar um dos flamingos em uma imagem muito menor:

Você pode definir essas três fontes de imagem usando o seguinte código HTML:

Como você pode ver acima, adicionamos a imagem menor e mais próxima como padrão e definimos uma condição de mídia relevante para cada fonte de imagem.

Se desejar, você também pode especificar mais de uma imagem dentro de cada atributo srcset usando os descritores x ou w mencionados acima, por exemplo:

Observe que com o media attribute , você pode direcionar a largura e quaisquer outros recursos de mídia, como orientação, proporção da imagem e muito mais.

Se você usar o elemento com a tag , o navegador do usuário ainda carregará apenas uma imagem-a mais adequada-mas agora, a condição da mídia não é uma dica ou uma opção como antes. Em vez disso, é uma regra que o navegador deve seguir em qualquer caso. Em outras palavras, o navegador presumirá que as fontes das imagens são visualmente diferentes umas das outras e as tratará de acordo.

Fontes de imagem em diferentes formatos

Além das condições de mídia, você também pode exibir uma imagem em diferentes formatos. Isso pode ser especialmente útil se você quiser usar formatos de imagem de última geração , como AVIF ou WebP, que são menores em tamanho (o que pode melhorar o desempenho por conta própria), mas não são compatíveis com navegadores mais antigos.

Aqui, você precisará definir o tipo MIME de cada fonte da imagem usando o atributo de tipo :

Se você usar o código acima, o navegador do usuário verificará os tipos MIME consecutivos um por um-então, adicione aquele que você deseja verificar primeiro (usei AVIF no exemplo acima).

Tecnicamente, você também pode usar os atributos type e media juntos em cada elemento -no entanto, observe que isso pode adicionar muita complexidade extra:

Suporte ao navegador

O suporte do navegador para a sintaxe HTML relacionada a imagens responsivas é relativamente bom:

• Os atributos srcset e tamanhos são compatíveis do Edge 16+, Firefox 38+, Chrome 38+ e Safari 9+, mas não são compatíveis com nenhuma versão do Internet Explorer
• O elemento é compatível com o Edge 13 +, Firefox 38+, Chrome 38+ e Safari 9.1+, mas não é compatível com nenhuma versão do Internet Explorer
• O elemento é compatível com Internet Explorer 9+, Edge 12+, Firefox 15+, Chrome 90+ e Safari 14.1+

Como o Chrome e o Safari começaram a oferecer suporte ao elemento relativamente tarde, ele vem com o nível mais baixo de suporte a navegador entre esses quatro recursos HTML relacionados a imagens responsivas.

Além disso, a sintaxe de imagem responsiva degrada normalmente . Se um navegador não suportar um ou mais elementos ou atributos, ele simplesmente usará a imagem padrão adicionada ao elemento muito bem suportado.

Conclusão

Adicionar diferentes fontes de imagem em HTML para fornecer a imagem de melhor desempenho para cada agente do usuário pode resultar em um grande ganho de desempenho, especialmente em dispositivos móveis. No entanto, uma sintaxe complexa pode tornar seu fluxo de trabalho de codificação muito complicado e seu código mais difícil de ler.

Basicamente, a compensação é entre complexidade e desempenho, então você precisa decidir se vale a pena o incômodo para você ou não. Obviamente, o desempenho da imagem é mais importante em sites com muitas imagens e pode não ser tão importante se você tiver apenas uma ou duas imagens na tela a qualquer momento.

Você também pode automatizar o processo. CDNs como Netlify e Cloudflare e CMSs como o WordPress já vêm com recursos de otimização de imagem integrados-eles geram várias versões da mesma imagem, adicione o elemento , aplique condições de mídia e muito mais. Existem também soluções de código aberto que podem ajudá-lo com a automação, como o Image Responsiver ou ferramentas Obter tamanhos .

Por fim, não se esqueça de que este guia discute apenas como veicular imagens responsivas em HTML. Você ainda precisará use CSS para adaptar a imagem adicionada por HTML ao design, como ajustar os atributos width e max-width ou usar um responsivo grade de imagem.

A postagem Melhorando o desempenho com imagens HTML responsivas apareceu primeiro em LogRocket Blog .