Otimizando Imagens Mobile

Quem visa oferecer uma experiência de navegação mais rápida para sua audiência costuma fazer uso de alguma solução de otimização de imagens, dado que imagens pesadas podem impactar negativamente as métricas de Web Vitals, que estão diretamente ligadas ao motor de busca do Google

Há várias formas de otimizar imagens, seja construindo alguma aplicação local que otimize on demand, algum plugin de otimização de imagens, ou uma CDN que tem a feature pronta na sua borda.

O principal desafio na otimização das imagens é evitar que elas percam qualidade, o que pode deixar a equação ainda mais complexa se há diferentes imagens sendo servidas com diferentes tamanhos, em diferentes patchs. 

O otimizador de imagens da GoCache entrega 3 opções de otimização (webp, jpeg progressivo e remoção de metadados), e uma feature de compressão que pode ser definida em três níveis (baixo, médio e alto).

Uma das grandes vantagens de utilizá-lo é na granularidade da sua customização, sendo uma ferramenta poderosa para o cliente chegar no cenário ideal entre imagens performáticas, e com uma resolução que o satisfaça. 

Trazendo um caso hipotético na aplicação https://testecdn.com.br/, o cliente configurou todas as otimizações e definiu um nível de compressão alto. 

Feito isso, o cliente notou que as imagens que ficam no patch /wp-content/uploads/2021/06/, e que são servidas em dimensões maiores, perdeu um pouco de resolução, sendo o nível “baixo” mais adequado. 

Para não impactar todas as outras imagens que estariam mais adequadas no nível alto, foi criada uma regra definindo um nível de compressão diferente para o patch /wp-content/uploads/2021/06/

Entendendo que 70% da sua audiência é mobile, fez todo sentido para o cliente buscar uma customização que entregue um nível de compressão maior para esses acessos, entendendo também que eles normalmente vem de uma conexão menos potente e com um dispositivo que contempla uma tela menor a ponto de não se enxergar perda de qualidade.

Com pouco esforço, foi criado uma regra na GoCache para otimizar ao máximo as imagens de dispositivos mobile, independente do patch.

O resultado você consegue conferir fazendo um Curl no terminal, vendo o retorno do content-length variando o user-agents desktop ou mobile.

No exemplo acima, a imagem no acesso mobile foi servida com uma carga de 23,5kb ao invés de 60,1kb. Uma redução de tamanho em torno  2,5x menor.

Nesse exemplo tratamos um caso específico em um determinado contexto contexto. Podendo o cenário variar em infinitas possibilidades, a GoCache busca oferecer granularidade na customização do produto através do uso de diversos critérios, podendo ser combinados ou não, e com uso de regexp para englobar os mais variados casos numa única regra.

 

Por Hugo Hazboun, Sales Manager GoCache.