Como  , 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. quase 50% do peso de uma página típica é composto por imagens  Este tutorial aborda os prós e contras do uso do atributo   e como o imgix torna o processo mais fácil. srcset  Servir imagens de tamanho correto é importante porque pode minimizar os bytes transferidos e   . O atributo   é uma das melhores maneiras de fazer isso hoje.  a sobrecarga da CPU srcset  srcset e densidades de exibição    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   é fácil: srcset img   <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   instantaneamente. srcset  Usando srcset com imgix  Usando os parâmetros de URL imgix   e   , podemos simplificar o esforço necessário para gerar os atributos   em nossas imagens. Para este exemplo, usaremos a imagem localizada em: w dpr srcset   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" >   https://codepen.io/imgix/pen/aOxmqg?embedable=true  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   ,   e   aos nossos ativos 1x, 2x e 3x, respectivamente. O parâmetro   instrui o imgix a tratar os parâmetros   como   (também conhecidos como “pixels CSS”). dpr=1 dpr=2 dpr=3 dpr w pixels independentes de dispositivo  Assim, a imagem de 400×300 em   será na verdade uma imagem de 800×600 pixels. A imagem   terá 1200×900 pixels.  dpr=2 dpr=3  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   for lançado. imgix atualmente suporta até   . 4x dpr=5  Essa prática funciona melhor com layouts de imagem fixa. Atualmente, o uso   com   é   . srcset dpr amplamente suportado  Usando   e   com Media Queries srcset sizes  Uma abordagem diferente para lidar com imagens responsivas para layouts fluidos é usar definições de tamanho com   . Essa solução oferece a capacidade de segmentar tamanhos com base nas definições de consulta de mídia em um atributo   . srcset 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   , direcionamos duas consultas de comportamento para as imagens. sizes  Em uma viewport de   ou superior, as imagens serão exibidas em 1/3 da largura da viewport. 36em  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>.   https://codepen.io/imgix/pen/VLNZaW?embedable=true  Melhores práticas usando imgix  Há mais em que pensar ao fornecer as melhores imagens possíveis com   e imgix. srcset  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   é 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. srcset  Felizmente, muitas das   podem gerar automaticamente um   ideal para você. bibliotecas imgix srcset  Use  fit=max  Usar o parâmetro   em uma URL imgix garantirá que uma imagem nunca seja entregue maior que seu tamanho original. Assim, ao solicitar uma imagem   , não haverá extrapolação da imagem. Leia mais sobre   na documentação. fit=max dpr=3 fit  Usar  auto=format  O parâmetro   fornecerá imagens WebP leves para navegadores compatíveis (Chrome, Firefox etc.) e voltará ao formato original para outras instâncias. auto=format  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   na documentação. Negociação Automática de Conteúdo  Usar qualidade variável  Ao definir   com imgix, você pode querer considerar o ajuste da qualidade de suas imagens. Definir o parâmetro   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. dpr q    O tamanho da imagem é 21,3 kB.   .  ?q=80 Experimente e veja a diferença no Sandbox    O tamanho da imagem é 34,7 kB.  ?dpr=2&q=40 Experimente e veja a diferença no Sandbox.     O tamanho da imagem é 42,1 kB.  ?dpr=3&q=20 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   DPR: srcset   <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>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este áudio é produzido no idioma original da história!

Guia para iniciantes: imagens responsivas com srcset

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps