Guia para iniciantes: imagens responsivas com srcset

Comoquase 50% do peso de uma página típica é composto por imagens , a otimização de imagens é extremamente importante para a execução de um site de alto desempenho. Cada byte que você não precisa transferir para servir seu conteúdo significa uma página mais enxuta e tempos de carregamento mais rápidos para seus usuários.

Este tutorial aborda os prós e contras do uso do atributo srcset e como o imgix torna o processo mais fácil.

Servir imagens de tamanho correto é importante porque pode minimizar os bytes transferidos e a sobrecarga da CPU . O atributo srcset é uma das melhores maneiras de fazer isso hoje.

srcset e densidades de exibição

srcset fornece uma maneira simples de especificar diferentes imagens para diferentes resoluções de dispositivo. Ele permite que os sites forneçam versões 2x, 3x ou superiores de imagens para dispositivos modernos com telas de alta resolução. Usá-lo dentro de uma tag img é fácil:

 <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >

Embora isso forneça os melhores ativos aos usuários, transfere para o serviço a carga de gerar e armazenar cada versão de cada ativo. Isso pode fazer com que os custos de armazenamento aumentem e você pode nunca atender a todos os ativos gerados.

Ao lidar com uma grande biblioteca ou com conteúdo gerado pelo usuário, isso é insustentável.

Com o imgix, toda a sua biblioteca de imagens fica pronta para srcset instantaneamente.

Usando srcset com imgix

Usando os parâmetros de URL imgix w e dpr , podemos simplificar o esforço necessário para gerar os atributos srcset em nossas imagens. Para este exemplo, usaremos a imagem localizada em:

https://assets.imgix.net/examples/bluehat.jpg

Queremos servir esta imagem com 400 pixels de largura:

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

Obtemos uma tag de imagem que fornece a melhor resolução para cada dispositivo com base em sua proporção de pixel de dispositivo (DPR). imgix servirá automaticamente mais pixels quando receber o parâmetro dpr .

Calculando a relação dispositivo-pixel

Você pode ver que aplicamos dpr=1 , dpr=2 e dpr=3 aos nossos ativos 1x, 2x e 3x, respectivamente. O parâmetro dpr instrui o imgix a tratar os parâmetros w como pixels independentes de dispositivo (também conhecidos como “pixels CSS”).

Assim, a imagem de 400×300 em dpr=2 será na verdade uma imagem de 800×600 pixels. A imagem dpr=3 terá 1200×900 pixels.

Isso oferece o melhor dos dois mundos: resolução total para dispositivos compatíveis, sem fornecer mais dados do que o necessário para dispositivos que não os usarão. Ao usar o imgix, temos apenas que armazenar o recurso original e, em seguida, manipulá-lo na hora, como vimos acima.

Isso também elimina a dor de cabeça se e quando um dispositivo 4x for lançado. imgix atualmente suporta até dpr=5 .

Essa prática funciona melhor com layouts de imagem fixa. Atualmente, o uso srcset com dpr é amplamente suportado .

Usando srcset e sizes com Media Queries

Uma abordagem diferente para lidar com imagens responsivas para layouts fluidos é usar definições de tamanho com srcset . Essa solução oferece a capacidade de segmentar tamanhos com base nas definições de consulta de mídia em um atributo sizes .

O navegador solicitará a imagem mais apropriada ou, dependendo do navegador, carregará a melhor imagem do cache, quando disponível.

O exemplo a seguir demonstra o dimensionamento de três imagens com imgix em 1024, 640 e 480 pixels de largura. Usando o atributo sizes , direcionamos duas consultas de comportamento para as imagens.

Em uma viewport de 36em ou superior, as imagens serão exibidas em 1/3 da largura da viewport.

Abaixo desse tamanho, as imagens serão exibidas no tamanho total da janela de visualização. Nesses tamanhos, o navegador determinará qual imagem carregar quando a página for renderizada para o tamanho de destino especificado.

 <img srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w, https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w, https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w" src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop" sizes="(min-width: 36em) 33.3vw, 100vw" >

Veja a caneta <a href="https://codepen.io/imgix/pen/VLNZaW/" target="_blank">VLNZaW</a> da imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) em <a href="https://codepen.io" target="_blank">CodePen</a>.

Melhores práticas usando imgix

Há mais em que pensar ao fornecer as melhores imagens possíveis com srcset e imgix.

O imgix oferece a capacidade de adicionar operações adicionais para fornecer a você mais controle sobre suas imagens de saída e, como elas são definidas na URL, você pode ajustar suas configurações e fazer edições em estágio avançado à medida que as decisões mudam.

Um dos desafios de usar srcset é que você deseja gerar tamanhos suficientes para que a maioria de seus usuários baixe imagens com tamanho próximo ao que eles veem na tela, mas se você gerar muitos tamanhos, pode acabar impactando o cache -habilidade, o que pode ter um impacto negativo no desempenho.

Felizmente, muitas das bibliotecas imgix podem gerar automaticamente um srcset ideal para você.

Use fit=max

Usar o parâmetro fit=max em uma URL imgix garantirá que uma imagem nunca seja entregue maior que seu tamanho original. Assim, ao solicitar uma imagem dpr=3 , não haverá extrapolação da imagem. Leia mais sobre fit na documentação.

Usar auto=format

O parâmetro auto=format fornecerá imagens WebP leves para navegadores compatíveis (Chrome, Firefox etc.) e voltará ao formato original para outras instâncias.

Formatos mais modernos como o WebP podem reduzir bastante a quantidade de dados de imagem enviados ao cliente; às vezes até 35%. Leia mais sobre Negociação Automática de Conteúdo na documentação.

Usar qualidade variável

Ao definir dpr com imgix, você pode querer considerar o ajuste da qualidade de suas imagens. Definir o parâmetro q para valores mais baixos para DPRs mais altos permite reduzir o tamanho do arquivo enquanto mantém um conjunto de pixels mais denso para sua imagem.

?q=80 O tamanho da imagem é 21,3 kB. Experimente e veja a diferença no Sandbox .

?dpr=2&q=40 O tamanho da imagem é 34,7 kB. Experimente e veja a diferença no Sandbox.

?dpr=3&q=20 O tamanho da imagem é 42,1 kB. Experimente e veja a diferença no Sandbox.

Essa prática comum é facilitada com a API de URL imgix. Ajustar a qualidade funciona especialmente bem com formatos com perdas, como WebP e JPEG.

Juntando tudo

Aqui está uma implementação desses exemplos aplicados ao nosso exemplo srcset DPR:

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

Veja a caneta <a href="https://codepen.io/imgix/pen/MwRjzZ/" target="_blank">MwRjzZ</a> de imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) em <a href="https://codepen.io" target="_blank">CodePen</a>.

Resumo e tutoriais relacionados

As imagens responsivas são uma área de implementação que muda rapidamente e diferentes métodos são aplicáveis a diferentes casos de uso. Aqui estão nossos outros tutoriais que abordam aspectos do design responsivo.

• Projetando para Retina, implantando com imgix
• Imagens responsivas de última geração com dicas do cliente
• Usando imgix com <picture>