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

Confira o estado das ferramentas de imagem.

Patrick Kettner
Patrick Kettner

É uma coisa colocar uma imagem na web, mas é difícil fazê-la bem. Escolher o formato certo, a compactação, pontos por polegada (DPI) e centenas de outras configurações pode ser esquecido facilmente, fazendo tudo isso sozinhos.

A boa notícia é que hoje temos inúmeras ferramentas e serviços que podem fazer tudo isso para nós. A boa notícia é que ela é abundante. 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 os aspectos que consideramos mais importantes para o envio de imagens em produção e para comparar alguns dos softwares e serviços mais conhecidos, sejam eles pagos ou sem custo financeiro, hospedados ou auto-hospedados.

Por quê?

As imagens compõem grande parte dos bytes transferidos de um site, e esses bytes são contabilizados. Descobrimos que as imagens não otimizadas representam 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 convertidas tiveram 38% menos imagens do que as que não geraram. Então, você deve excluir todas as imagens? Claro que não. No entanto, é necessário garantir que as imagens enviadas sejam otimizadas para todos os usuários, independentemente do dispositivo usado.

O que é?

Veicular imagens otimizadas vai além de clicar em "Salvar para a Web". É por isso que o images.tooling.report verifica se há uma grande variedade de recursos. Abordamos as noções básicas, como a quantidade de compactação que as diferentes ferramentas e serviços fornecem e 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 do cliente, para procurar análises psicovisuais automatizadas que podem usar modelos de dados para compactar imagens repetidamente e encontrar a versão que consome o menor número de bytes sem mudar a forma como nossos olhos as percebem. Você está apertando todo último pedaço não visual de suas imagens antes de enviar o fio?

Uma captura de tela da página de destino de 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. Abrangemos redes de fornecimento de conteúdo (CDNs), projetos auto-hospedados, plug-ins do sistema de gerenciamento de conteúdo (CMS) e criadores de sites. Essas são definições bastante flexíveis que existem para tentar tornar a comparação entre diferentes opções mais relevante:

  • Os plug-ins de CMS são pacotes que facilitam o desenvolvimento em plataformas como o WordPress.
  • Os criadores de sites comparam vários serviços diferentes que você pode usar para criar seu site.
  • A hospedagem automática é para desenvolvedores que se sentem à vontade para clonar um projeto Git ou executar a própria imagem do Docker em 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 hospedam ou usam proxy das imagens na borda.

Não é possível ser tudo para todos o tempo todo, mas você deve conferir os testes e os recursos que estão sendo avaliados e ver como seu otimizador de imagens está se saindo. E se você ainda não está fazendo algo para a otimização de imagens? Esse é um ótimo momento para conhecer as ferramentas de imagem e saber quais benefícios você pode trazer para as pessoas que já usam seu site.

A seguir

Você acha que deixou de alguma ferramenta ou serviço de imagem? Conte para nós. Tanto as ferramentas e os serviços quanto os testes em si são uma coisa viva e atualizada. Sempre que você precisar de um lugar rápido para conferir o que há de novo em imagens de envio, sua primeira parada é images.tooling.report.

Imagem principal de Michael Maasen no Unsplash.