Estratégias de otimização de imagens comparadas

Todos nós conhecemos as estatísticas. O desempenho mais lento do site está fortemente ligado a taxas de abandono mais altas e conversões mais baixas. O que talvez o senhor não saiba é que o principal culpado é o excesso de cargas úteis de páginas da Web, derrubando nossas páginas da Web de outro modo eficientes por meio de imagens.

Dito isso, as imagens também geram conversões, compartilhamento social e engajamento geral dos visitantes; é por isso que seu uso total continua a crescer, independentemente das consequências.

Talvez o maior contribuinte para o inchaço seja tratar as imagens como se fossem conteúdo estático. O problema é agravado em um futuro que prioriza os dispositivos móveis, em que uma única página da Web pode ser visualizada em uma variedade cada vez maior de telas, dispositivos, sistemas operacionais e navegadores.

A solução é começar a implementar a otimização de imagens como parte do desenvolvimento e da manutenção de seu site. E isso começa com a escolha da estratégia ideal para o senhor.

No entanto, a otimização de imagens pode resultar em um grande obstáculo em seu processo de design e desenvolvimento, além de adicionar uma manutenção significativa a longo prazo. Sem mencionar o impacto no uso de recursos e nos tempos de construção. Há muitos técnicas que o senhor pode usar para otimizar suas imagens. Algumas não são fáceis de realizar manualmente. Analisaremos a eficácia de quatro estratégias, aumentando seu nível de automação e otimização dinâmica para dispositivos específicos.

Como referência, estamos aplicando Sintaxe de imagem responsiva manualmente no site para que ele responda a alguns pontos de interrupção sem aplicar nenhuma estratégia específica de otimização de imagem. Em seguida, analisamos a otimização em tempo de construção, em que uma ferramenta de compactação de imagem ajuda a desenvolver variantes de imagem durante a construção do site. A terceira estratégia é a otimização em tempo de execução, em que uma ferramenta automatizada ou um serviço on-line aplica uma otimização genérica a uma imagem ou pode obter informações do navegador e otimizar de acordo. A estratégia final é incluir informações do dispositivo e do navegador (Device-Aware Optimization) para gerar e fornecer imagens otimizadas.

Resumo rápido

Indo com um otimização de imagem com reconhecimento de dispositivo lhe proporcionará os melhores resultados de desempenho. Neste artigo, vamos nos aprofundar nos prós e contras da implementação dessas diferentes estratégias como parte do fluxo de trabalho do seu aplicativo Web.

Benchmark: Sintaxe de imagem responsiva

O objetivo final da otimização de imagens é aumentar o desempenho do seu site com tempos de carregamento mais rápidos. Portanto, executei um auditoria do Google PageSpeed Insight em uma página usando cada uma das estratégias abaixo. Como isso destaca melhor o desempenho de estratégias individuais e como o futuro tende a priorizar os dispositivos móveis, executaremos auditorias em páginas para dispositivos móveis.

Como referência, executei alguns testes em uma página sem nenhuma estratégia específica de otimização de imagem além de usar uma sintaxe de imagens responsivas bastante padrão.

A sintaxe responsiva funciona fornecendo aos navegadores uma seleção da mesma imagem em tamanhos diferentes e, em seguida, permitindo que ele escolha a melhor para o tamanho da janela de visualização atual.

Para isso, os desenvolvedores costumam usar vários pontos de interrupção para fornecer imagens para diferentes tamanhos de viewport. Por exemplo, telas de celular, tablet e desktop.

O elefante na sala é que já existem milhares de possíveis viewports diferentes em termos de dimensão e tamanho. E esse tamanho de amostra está aumentando a cada dia.

A solução óbvia parece ser adicionar mais pontos de interrupção! No entanto, isso consome mais tempo de desenvolvimento, leva ao inchaço do código e tem um aspecto desorganizado. Para ilustrar, aqui está um exemplo da sintaxe responsiva padrão com apenas quatro pontos de interrupção no srcset:

<img srcset="https://davidwalsh.name/image-1920.jpg 1920w,
  https://davidwalsh.name/image-1280.jpg 1280w, https://davidwalsh.name/image-640.jpg 640w, https://davidwalsh.name/image-480.jpg 480w" sizes="(min-width: 36em) 50vw,100vw" src="https://davidwalsh.name/image-320.jpg" alt="Responsive image syntax" />

Agora, imagine isso para cada uma das imagens…

É importante ressaltar que cada variante de imagem especificada precisa existir fisicamente, o que consome tempo de criação e espaço de armazenamento extra.

O senhor também pode implementar uma capacidade de resposta semelhante usando consultas de mídia CSS. Usando os elementos mais recentes <picture> e <source>, é possível implementar alguma direção de arte. Entretanto, ambas as abordagens não resolvem o problema inerente à escalabilidade.

O maior problema de depender exclusivamente da sintaxe responsiva é que ela não apresenta inteligência em tempo de execução sobre o reconhecimento do contexto. Toda vez que a implementa, o senhor está apenas tentando adivinhar quais pontos de interrupção escolher e quais tamanhos de imagem utilizar. Além disso, não há garantia de que os tamanhos e os pontos de interrupção de hoje farão sentido amanhã…

Prós:

Não é necessário pagar ou assinar software/serviços adicionais
Padrão relativamente fácil e bem documentado de implementar

Contras:

Requisitos adicionais de armazenamento devido às variantes de imagem
Inchaço do código e introdução de mais complexidade
Tempo e esforço necessários para criar variantes e implementar a capacidade de resposta
O suporte ao navegador e as implementações específicas do navegador são uma preocupação
Não se adapta a diferentes contextos, simplesmente seleciona a melhor correspondência entre os tamanhos e formatos disponíveis.
O senhor ainda precisará de uma CDN separada se quiser aumentar ainda mais as velocidades de entrega
Manutenção contínua para adaptação a novos dispositivos, formatos de imagem, mercados e práticas

Resultados de velocidade:

Agora, vamos dar uma olhada nos resultados de desempenho usando o mesmo conteúdo de imagem, mas com sintaxe responsiva:

O benchmark não abordou formatos de imagem eficientes ou compactação e ainda poderia melhorar no que diz respeito ao redimensionamento ideal:

Agora, vamos ver quais dessas oportunidades cada estratégia aborda e como elas se saem.

Otimização do tempo de construção

Uma maneira de aliviar a carga de ter que criar variantes é usar um software de edição ou compactação de imagens. Kraken, compressor.io, mozjpeg e squoosh são apenas alguns exemplos dessas ferramentas.

Tudo o que o senhor faz é enviar suas imagens para a plataforma e o servidor processa e otimiza as imagens. Em seguida, o senhor pode fazer o download das imagens otimizadas e usá-las em seu projeto. Normalmente, o senhor pode definir configurações de otimização automáticas ou manuais. Os controles normalmente incluem compactação com ou sem perdas, redimensionamento, redução da qualidade etc. O senhor pode até mesmo solicitar vários tamanhos em massa para todos os arquivos de imagem a serem usados na sintaxe responsiva.

Ou então, o senhor pode usar gerenciadores de tarefas como Grunt ou Gulp para otimizar imagens executando trabalhos no momento da compilação. Uma das opções mais funcionais e populares é usar o pacote JavaScript, imagemin.

Ele pode ser instalado como um pacote npm ou usado por meio da CLI. É uma solução modular com diferentes plug-ins para compactar diferentes formatos de imagem, como mozjpeg para JPEG ou pngquant para compactação de PNG. Em termos dos controles de otimização de imagem disponíveis, eles são muito semelhantes aos das ferramentas de compactação SaaS.

Essa é a estratégia de desenvolvimento mais pesada do grupo. Embora seja possível processar imagens em massa com controles bastante abrangentes, o senhor também precisará atualizar o código de tempos em tempos para se ajustar aos novos desenvolvimentos em formatos de imagem ou no design do site.

Prós:

A otimização da imagem ocorre em outro servidor e não afeta seus próprios tempos de compilação
O processamento de imagens geralmente é extremamente rápido, desde que o senhor tenha um número gerenciável de imagens
Pode ser integrado diretamente em seus fluxos de trabalho de desenvolvimento e implantação
Alguns controles fáceis de usar para ajustar as configurações de otimização de imagem
Muitas ferramentas gratuitas ou com planos gratuitos relativamente generosos

Contras:

O senhor precisa usar a sintaxe responsiva para variantes de imagem (com a maioria dos mesmos contras)
Ainda não há otimização em tempo de execução ou com reconhecimento de contexto
O senhor ainda precisa de uma CDN adicional para obter um fornecimento mais rápido de imagens (embora economize no uso da CDN)
Investimento inicial significativo em tempo e esforço do desenvolvedor se o senhor quiser aproveitar os recursos de API e integração
Necessidade de reprocessar todas as imagens sempre que o senhor quiser criar novas variantes
As variantes de imagem precisam existir fisicamente e ser armazenadas em algum lugar

Resultados de velocidade:

Vamos verificar os resultados do uso da otimização do tempo de compilação com sintaxe responsiva:

Embora seja melhor do que nenhuma estratégia, as pontuações permaneceram praticamente inalteradas em relação à implementação da sintaxe responsiva sem nenhuma estratégia de otimização específica, às vezes até com pontuação pior. O redimensionamento adequado das imagens, bem como o uso de formatos de última geração, ainda são preocupações sinalizadas pelo Google.

No entanto, a boa notícia é que a carga útil total da imagem caiu para 1,4 MB, o que representa cerca de 80% menos do que nenhuma estratégia e 50% menos do que a sintaxe responsiva pura.

Otimização de tempo de execução

Sempre que um dispositivo acessa a página de um site, o servidor faz uma análise do cabeçalho da solicitação que recebe do navegador. Essa mensagem HTTP contém determinadas informações sobre o contexto de acesso e os formatos preferidos.

Por exemplo, o cabeçalho de aceitação em um navegador Chrome tem a seguinte aparência:

image/avif,image/webp,image/apng,image/*,*/*;q=0.8

Com o recém-adicionado dicas de clientesEm um ambiente de negociação de conteúdo ainda mais refinado, foi possível usar cabeçalhos adicionais, como DPR e Viewport-Width.

Usando esses dados, os otimizadores de tempo de execução podem tomar certas decisões sobre como compactar e formatar imagens. No entanto, o senhor ainda precisará implementar algum tipo de lógica manual baseada em pontos de interrupção para redimensionamento responsivo.

Algumas das opções de SaaS mais populares são Cloudinary e imgix. Essas plataformas geralmente têm uma opção de otimização automática em que o servidor/proxy de imagens decidirá a melhor forma de otimizar o conteúdo. Ou o próprio usuário pode especificar as transformações com a API (geralmente, usando parâmetros simples de URL).

Como parte do serviço, o senhor também se beneficiará normalmente de uma CDN específica para acelerar o fornecimento de conteúdo de imagem. E, no caso do Cloudinary, ele também pode vir com recursos de DAM (gerenciamento de ativos digitais).

Antes que o senhor fique muito animado, não há detecção direta de dispositivos. Por exemplo, embora os cabeçalhos HTTP, incluindo uma possível dica de cliente de agente de usuário no futuro, possam informar que o conteúdo está sendo acessado pelo navegador Chrome em um dispositivo Android, ele não poderá dizer se é um Samsung Galaxy S20 ou um One+ 8 Pro. O senhor verá abaixo por que isso deixa muitas oportunidades intocadas.

As imagens também são armazenadas nos servidores da plataforma, e não em seus próprios recursos. No entanto, o senhor geralmente tem uma cota mensal fixa de espaço de armazenamento, sendo que as variantes contam para essa cota.

Prós:

É necessário muito pouco esforço para otimizar as imagens como parte de seu fluxo de trabalho
Provavelmente inclui um serviço CDN para acelerar a entrega
Pode vir com outros recursos, como um DAM ou edição avançada de imagens
Otimização automática ou manual de imagens por meio de diretivas baseadas em URL
Assume o armazenamento de variantes de imagem, liberando o armazenamento local/baseado na nuvem
Quase nenhuma manutenção contínua ou reajuste necessário
Maiores reduções de carga útil do que a sintaxe responsiva ou as ferramentas de compactação de imagem

Contras:

Geralmente requer uma assinatura mensal cara porque o usuário está pagando por mais do que apenas a otimização de imagens
O senhor deve atualizar as tags de imagem para servir imagens do serviço de imagens
A sintaxe responsiva ainda é necessária para o redimensionamento automático
Potencialmente mais lento nas primeiras solicitações porque o serviço teria que buscar a imagem na origem e otimizá-la em uma falha completa do cache.

Resultados de velocidade:

Aqui estão nossos resultados de otimização de tempo de execução usando o Cloudinary com sintaxe responsiva:

Portanto, as coisas estão parecendo muito melhores com a inclusão da compactação e formatação automáticas em tempo real. No entanto, ainda precisamos de um redimensionamento mais preciso da imagem:

Nossa carga útil total também foi reduzida significativamente para 897 kB, ou cerca de 88%.

Otimização com reconhecimento de dispositivo

Como as ferramentas de tempo de execução anteriores, essa abordagem consiste em um servidor de imagens que usa cabeçalhos de solicitação para implementar a negociação automatizada de conteúdo para otimização dinâmica e com reconhecimento de contexto. Por exemplo, o navegador pode anunciar o suporte ao AVIF por meio do cabeçalho de solicitação HTTP Accept. Em seguida, o serviço de imagem consideraria servir uma imagem AVIF. No entanto, ele vai um passo além.

Um exemplo específico é o seguinte ImageEngine que usa Detecção de dispositivo WURFL para coletar todos os tipos de informações do contexto de acesso. Além do navegador e do sistema operacional, ele pode identificar a marca e o modelo exatos, bem como características detalhadas da tela, como resolução, PPI e muito mais. Ele também oferece suporte a dicas do cliente, incluindo o cabeçalho de dados salvos, algo que nem todas as ferramentas de tempo de execução têm.

Isso permite que o mecanismo de serviço de imagem crie variantes de imagem muito mais refinadas com relações ideais de carga útil/qualidade para qualquer cenário.

Esses mecanismos de imagem também fornecem imagens por meio de uma CDN de imagem global para acelerar a entrega e melhorar as taxas de acerto do cache. O ImageEngine, especificamente, tem mais de 20 PoPs globais com recursos de detecção de dispositivos incorporados em cada um desses servidores de borda.

Essa abordagem tem uma enorme vantagem nos mercados de Internet com predominância de dispositivos móveis. Como existem muitos tipos diferentes de dispositivos com diferentes tecnologias subjacentes e propriedades de tela, o senhor pode obter muito mais resultados de uma CDN com reconhecimento de dispositivo do que apenas uma ferramenta de tempo de execução comum.

No entanto, esses serviços geralmente são muito mais especializados e se concentram em extrair cada gota de suco de seus esforços de otimização de imagem. Por esse motivo, eles geralmente não vêm com recursos auxiliares, como o gerenciamento de ativos digitais.

Essa estratégia também não tem praticamente nenhuma pegada de desenvolvimento. Depois que o senhor atualiza os atributos src da tag img para servir imagens do seu servidor de otimização, não há mais nada a fazer. De forma contínua, o provedor atualizará as estratégias de otimização de imagens para obter os melhores resultados de acordo com as novas tendências (por exemplo, o novo formato de arquivo AVIF).

Pros:

Esforço mínimo do desenvolvedor necessário para implementar ou manter
Pode efetivamente definir e esquecer ao usar as configurações de otimização automática
Otimização automática ou manual de imagens por meio de diretivas baseadas em URL
A maior economia possível de carga útil de imagem, mantendo a máxima qualidade estética
Incrivelmente fácil de implementar e a solução pode entrar em operação em questão de minutos
Geralmente oferece a melhor relação custo-benefício de largura de banda
Sem inchaço de código, sem sintaxe responsiva e sem pontos de interrupção

Contras:

É necessário atualizar as tags de imagem para servir imagens do serviço de imagens. No entanto, esse é um esforço único e simples.
Requer uma assinatura mensal
Potencialmente mais lento nas primeiras solicitações, pois o serviço teria que buscar a imagem na origem e, em seguida, otimizá-la em uma falha completa do cache.

Resultados de velocidade:

OK, então aqui está o conjunto final de resultados, usando a otimização de tempo de execução com reconhecimento de dispositivo.

Não houve mais oportunidades sinalizadas pelo Google PageSpeed Insights, e é por isso que uma captura de tela não foi incluída aqui. A maioria das métricas melhorou drasticamente. Também usamos automaticamente formatos de última geração, incluindo AVIF, com a compactação ideal de acordo com o contexto de acesso. Além disso, as imagens são redimensionadas e dimensionadas automaticamente para vários tamanhos de tela.

No total, nossas cargas úteis de imagem foram reduzidas em cerca de 95%:

Conclusão

Como o senhor pode ver, todas as estratégias têm seus prós e contras. Não há dúvida de que os serviços de otimização de imagem em tempo de execução (e, principalmente, com reconhecimento de dispositivo) têm vantagem porque dependem de alguns inteligência em tempo real e mecanismos sofisticados para servir imagens de forma otimizada.

Esses serviços o ajudarão a manter seu fluxo de trabalho de desenvolvimento enxuto com um investimento inicial e contínuo mínimo para gerar, manter e armazenar variantes de imagem. Isso sem falar na limpeza do seu código, pois evita a sintaxe responsiva confusa e não escalável. Esse também é o caminho mais preparado para o futuro, pois seus mecanismos de fornecimento de imagens se ajustarão automaticamente para fornecer imagens de forma otimizada de acordo com as novas tendências e mercados.

Também não há necessidade de se preocupar em perder o controle sobre como as imagens são transformadas, pois geralmente é possível aplicar determinadas transformações usando APIs ou parâmetros simples de URL.

Dito isso, o senhor precisará de um orçamento para eles, embora os planos adequados para pessoas físicas e pequenas e médias empresas não costumem ser muito caros.