Imagens não otimizadas (não minificadas) são uma das principais causas de baixo desempenho do site, principalmente no carregamento inicial (primeiro). Dependendo da resolução e da qualidade da imagem, você pode acabar com imagens que ocupam mais de 70% do tamanho total do site.
É muito fácil que imagens não otimizadas acabem em um local de produção e reduzam consideravelmente a carga inicial. Desenvolvedores inexperientes geralmente não estão cientes desse problema em potencial. Eles também não estão cientes de uma ampla gama de ferramentas e abordagens para otimizar imagens.
Este artigo tem como objetivo abordar a maioria das ferramentas e abordagens para otimizar imagens para a web.
Calcular o tamanho do arquivo de imagem JPG
O tamanho da imagem não compactada pode ser facilmente calculado multiplicando o pxvalor da largura da imagem pelo valor da altura da imagem pxe multiplicando o resultado por 3 bytes, o que equivale a 24 bits (sistema de cores RGB). Dividimos o resultado por 1,048,576 (1024 \* 1024)converter o valor de bytes em megabytes .
image_size = (image_width * image_height * 3) / 1048576
Por exemplo, vamos calcular o tamanho do arquivo para uma imagem não compactada com 1366px x 768pxdimensões.
1366 * 768 * 3 / 1048576 = 3Mb
Considerando que o tamanho médio do site hoje está entre 2Mb e 3Mb, imagine ter uma imagem em seu site com mais de 80% do tamanho do seu site. O 3Mb leva anos para carregar em redes móveis mais lentas, para que você perca algum tráfego no site se o usuário aguardar o carregamento do site e gastar mais tempo no carregamento de uma única imagem. Pensamento assustador, não é?
Então, o que podemos fazer para evitar imagens otimizadas na Web, mas preservar a qualidade e a resolução aceitáveis?
Otimização de imagem online
Se você estiver trabalhando em um site estático simples que possui apenas um punhado de imagens que não mudam com frequência ou que não mudam, basta arrastar e soltar suas imagens em uma das inúmeras ferramentas on-line. Eles fazem um trabalho incrível na compactação de imagens usando vários algoritmos e são mais que suficientes para projetos simples.
Os sites mais notáveis, na minha opinião, são:
- Compressor.io – JPG, PNG, SVG, GIF – 1 arquivo de cada vez
- Squoosh – JPG, PNG, SVG, GIF – 1 arquivo de cada vez
- Optimizilla – JPG e PNG – até 20 imagens por vez
- TinyPNG – JPG e PNG – até 20 imagens por vez
- SVGMinify – SVG – 1 arquivo no momento
- svgomg – SVG – 1 arquivo no momento
Soluções automatizadas
No entanto, se você estiver trabalhando em projetos mais complexos com várias pessoas e usando muitas imagens, a otimização de cada uma delas à medida que é adicionada ao projeto pode se tornar tediosa. Além disso, existe o risco de algumas imagens não serem otimizadas devido a erro humano ou algum outro fator.
Em projetos complexos, é comum usar um sistema de compilação igualmente complexo como Gulp , Webpack , Parcel , etc. Os plug-ins de otimização de imagem podem ser facilmente adicionados a essas configurações de compilação e automatizar completamente o processo de otimização de imagem. As imagens podem ser otimizadas assim que adicionadas ao projeto.
O plugin mais notável, na minha opinião, é o imagemin, que pode ser facilmente integrado a qualquer CLI ou ferramenta de construção:
Otimização de carregamento de imagem
Examinamos as estratégias de otimização de imagem que reduzem o tamanho do arquivo compactando a imagem sem alterar a resolução da imagem e afetar demais a qualidade da imagem. Embora a otimização do arquivo de imagem reduza consideravelmente o tamanho do arquivo, ter várias imagens otimizadas (na página de catálogo da loja virtual, por exemplo) carregadas de uma só vez pode ter um efeito ruim no desempenho.
Carregamento lento
Carregamento lento é um conceito de apenas carregar ativos necessários. No nosso caso, apenas as imagens que estão atualmente na janela de visualização do usuário (tela) são carregadas. Outras imagens não são carregadas até que apareçam na janela de exibição do usuário.
Embora o carregamento Lazy nativo tenha sido recentemente introduzido nos navegadores, existem muitas soluções baseadas em JavaScript disponíveis.
Carregamento preguiçoso nativo
<img src="image.jpg" loading="lazy" alt="Sample image" />
Soluções baseadas em JavaScript
As soluções mais notáveis baseadas em JavaScript, na minha opinião, são:
Imagens progressivas
Embora o carregamento lento faça um ótimo trabalho em termos de desempenho, observando o problema da perspectiva do UX, podemos ver que o usuário está aguardando o carregamento da imagem e observando o espaço em branco. Em conexões lentas, o download de imagens pode levar séculos. É aqui que as imagens progressivas entram em cena.
Basicamente, ter uma imagem progressiva significa que uma imagem de baixa qualidade será exibida ao usuário até que uma imagem de alta qualidade termine de carregar. Uma imagem de baixa qualidade possui um tamanho de arquivo consideravelmente menor devido à baixa qualidade e alta taxa de compactação, portanto, essa imagem será carregada muito rapidamente. Entre a imagem de baixa qualidade e alta qualidade, podemos ter quantas imagens com qualidade variável precisarmos e podemos carregar a imagem de maior qualidade em cada download.
Da mesma forma que o artigo sobre carregamento de esqueleto que escrevi, essa técnica oferece ao usuário uma ilusão de velocidade. O usuário está olhando para uma imagem que está sendo carregada e se tornando mais clara à medida que carrega imagens de qualidade cada vez maior, em vez de olhar para o espaço vazio esperando que algo aconteça.
Esta é uma implementação JavaScript de imagens progressivas : imagem progressiva
Imagens responsivas
Também precisamos ter cuidado ao usar imagens de tamanho adequado.
Por exemplo, digamos que tenhamos uma imagem com 1920pxlargura máxima na área de trabalho, 1024pxlargura máxima em tablets e 568pxlargura máxima em dispositivos móveis. A solução mais simples seria usar apenas a 1920pximagem e cobrir todos os casos, certo? Nesse caso, um usuário em um smartphone com conexão lenta e não confiável teria que esperar uma eternidade para que a imagem em massa fosse baixada e estaríamos de volta ao ponto principal do problema.
Felizmente para nós, podemos usar o elemento picture para informar ao navegador qual imagem descarregar, dependendo da consulta da mídia. Embora esse elemento seja suportado por mais de 93% dos navegadores usados globalmente, ele tem um fallback bastante simples com o imgelemento já dentro dele.
<picture>
<source media="(min-width: 1025px)" srcset="image_desktop.jpg">
<source media="(min-width: 769px)" srcset="image_tablet.jpg">
<img src="image_mobile.jpg" alt="Sample image">
</picture>
Usando CDN
Serviços CDN como Cloudinary e Cloudflare podem executar otimização de imagem no servidor e servir as imagens otimizadas ao usuário. Se o seu site usa uma CDN, vale a pena procurar opções de otimização de ativos. Isso nos permite não nos preocupar com a otimização da qualidade da imagem e ter todas as otimizações feitas no servidor. Precisamos apenas otimizar o carregamento de imagens usando carregamento lento ou imagens progressivas.
Formato de imagem WebP
O formato de imagem WebP é desenvolvido pelo Google e é um formato de imagem otimizado especificamente para a web. De acordo com os dados canIUse, o suporte atual do navegador para o formato de imagem WebP é de cerca de 80%, o que é ótimo. Felizmente, é fácil implementar um substituto para a imagem jpg padrão com o imgelemento interno picture.
<picture>
<source type="image/webp" srcset="image.webp" />
<source srcset="image.jpg" />
<img src="image.jpg" alt="Sample image" />
</picture>
Embora existam vários conversores de formato de arquivo on-line que podem converter imagens para o formato WebP, os serviços CDN podem executar facilmente a conversão de formatos no servidor.
Otimização para telas de alta densidade de pixels
Isso é mais uma melhoria do UX do que um desempenho, mas também é importante levar em consideração os dispositivos com maior densidade de pixels.
Por exemplo, vamos supor que estamos exibindo uma imagem de banner de 768px x 320px na tela de 768px. Mas a tela tem 2x densidade e da largura px é actally: 2 x 768 = 1536px. Basicamente, estamos estendendo 768px a 1536px e isso leva a imagens borradas em dispositivos de alta densidade de pixels.
Para corrigir isso, precisamos exibir uma imagem otimizada para telas de alta densidade de pixels. Precisamos criar imagens separadas com 2 ou 3 vezes a resolução de telas comuns e usar o srcsetatributo com 2xmarcação de marca para obter uma imagem de resolução mais alta.
<img src="image-1x.jpg" srcset="image-2x.jpg 2x" alt="Sample image" />
Exemplo – Imagens WebP / PNG responsivas com suporte de tela de alta densidade
<picture>
<source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 440px)">
<source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 440px)">
<source srcset="./images/webp/hero-image-550-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 767px)">
<source srcset="./images/minified/hero-image-550-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 767px)">
<source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 1023px)">
<source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 1023px)">
<source srcset="./images/webp/hero-image-760-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 1919px)">
<source srcset="./images/minified/hero-image-760-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 1919px)">
<source srcset="./images/webp/hero-image-960-min.webp" type="image/webp">
<source srcset="./images/minified/hero-image-960-min.png">
<img src="./images/minified/hero-image-960-min.png" alt="Example">
</picture>
Conclusão – Prioridade de otimização
- Use imagens otimizadas (otimizadas por ferramentas de criação automatizadas, serviços online ou CDN)
- Use carregamento lento (solução JS até que o nativo se torne mais suportado)
- Otimize imagens para telas de alta densidade de pixels
- Use o formato de imagem WebP
- Use imagens progressivas
Opcional: Lembre-se de veicular imagens (e outros ativos estáticos) sobre a CDN, se puder.
