Melhore a imagem do seu site com images.tooling.report

Verifique o estado das ferramentas de imagem.

Patrick Kettner
Patrick Kettner

Uma coisa é colocar uma imagem na Web, mas é difícil fazer isso bem. Escolher o formato certo, a compactação, os pontos por polegada (DPI, na sigla em inglês) e centenas de outras configurações pode ser facilmente esquecido quando fazemos tudo isso sozinhos.

A boa notícia é que hoje temos uma abundância de ferramentas e serviços que podem fazer tudo isso para nós. A notícia não tão boa é que, bem, há uma abundância. Pode ser difícil escolher qual ferramenta ou serviço é ideal para você. Por isso, estamos lançando o images.tooling.report, um site em que listamos o que consideramos mais importante ao enviar imagens para produção e para comparar alguns dos softwares e serviços mais conhecidos, sejam eles pagos, sem custo financeiro, hospedados ou auto-hospedados.

Por quê?

As imagens constituem uma grande parte dos bytes transferidos de um site, e esses bytes totalizam esses bytes. Na verdade, descobrimos que as imagens não otimizadas representavam quase 75% do tamanho total de uma página. Todos esses bytes desperdiçados têm um custo. É por isso que, em um estudo com milhões de sessões de usuários reais, as páginas que converteram apresentaram 38% menos imagens do que aquelas que não converteram. Então você deve simplesmente excluir todas as suas imagens? Claro que não. Mas você deve garantir que as imagens enviadas sejam otimizadas para todos os usuários, independentemente do dispositivo usado.

O que é?

Veicular imagens otimizadas é mais do que apenas clicar em “Salvar para a Web”. É por isso que o images.tooling.report verifica se há uma grande variedade de recursos. Abordamos os conceitos básicos, como o nível de compactação das diferentes ferramentas e serviços e as otimizações de rede, como cabeçalhos de cache de longa duração.

Mas não paramos por aí. Pesquisamos opções mais avançadas, como suporte a Save-Data, ECT e outras dicas de clientes, para buscar uma análise psicovisual automatizada que pode usar modelos de dados para compactar imagens repetidamente e encontrar a versão que usa o menor número de bytes sem mudar a forma como nossos olhos percebem. Você está apertando cada último pedaço não visual das imagens antes de transmitir os dados?

Uma captura de tela da página de destino para images.tooling.report no modo escuro.

É claro que todo site é um floco de neve: nenhuma ferramenta ou serviço fez absolutamente tudo o que estávamos procurando. Isso já era esperado. Então dividimos o que testamos em diferentes categorias. Abordamos redes de fornecimento de conteúdo (CDNs), projetos auto-hospedados, plug-ins de CMS (sistema de gerenciamento de conteúdo) e criadores de sites. Essas são definições bastante frouxas que, na verdade, existem para tentar tornar a comparação de diferentes opções mais relevante:

  • Os plug-ins de CMS são pacotes fáceis de desenvolver em plataformas como o WordPress.
  • Os criadores de sites comparam vários serviços diferentes que podem ser usados para desenvolver um site.
  • A opção auto-hospedada é destinada a desenvolvedores que já conhecem bem para clonar um projeto Git ou executar as próprias imagens do Docker na produção.
  • As CDNs são um pouco mais complicadas. Algumas delas são CDNs no sentido tradicional, mas outras são serviços que fazem proxy ou hospedam suas imagens na borda.

Nem todo mundo pode agradar todo mundo, mas é preciso conferir os testes e recursos que estão sendo avaliados e o desempenho do seu otimizador de imagens. E se você não estiver fazendo algo para otimização de imagens hoje? Então é um ótimo momento para conferir as ferramentas de imagem e ver quais benefícios você pode trazer para as pessoas que já usam seu site.

A seguir

Você acha que deixamos passar alguma ferramenta ou serviço de imagem? Conte para nós. Tanto as ferramentas, os serviços quanto os testes em si são algo vivo e que se atualiza. Sempre que você precisar de um lugar rápido para conferir as tecnologias mais avançadas de envio de imagens, sua primeira parada precisa ser images.tooling.report.

Imagem principal de Michael Maasen no Unsplash.