Por que otimizar as imagens de seu site é extremamente importante

O aumento da concorrência e o crescente nível de exigência do Google tornam a otimização de imagens fundamental para qualquer site.

O assunto não é exatamente “novo” em lugar algum. Todo mundo sabe (ou deveria saber) que nenhum site se sobressairá nas SERPs (ou páginas de resultado dos mecanismos de busca) se não estiver muito bem otimizada em todos os seus aspectos.

Até não muito tempo atrás, as pessoas toleravam páginas cujas imagens demorassem um pouco para aparecer, contanto que houvesse texto para a pessoa ir consumindo durante a chegada das imagens. Agora, se uma página não carregar de maneira imediata a visita está perdida. E sabendo disso o Google (o principal mecanismo de busca) já nem prioriza páginas com imagens pesadas nos resultados.

Quando alguém submete uma página à avaliação do PageSpeed Insights, ferramenta Google para tomada de velocidade de sites, um dos fatores de piora na avaliação é o uso de imagens em formatos não otimizados para a web.

Ferramentas online de otimização de imagens

Há várias ferramentas de otimização de imagens que podem ser utilizadas para acelerar um site. As nossas preferidas são o TinyPNG e o Squoosh, cuja principal característica é oferecer vários formatos de otimização, bem como previsão em tempo real da imagem otimizada.

Entretanto, em se tratando de WordPress, otimizar a imagem que é enviada para o blog é apenas um passo da jornada: o sistema vai manter a imagem original inalterada, mas vai também criar miniaturas (e imagens em outras dimensões) de acordo com a configuração do tema. E estas imagens não serão otimizadas automaticamente, só porque a imagem original estava perfeita.

Para quem tem apenas um blog isso não chega a ser um problema: dá para fazer uma “pós-edição” de cada post publicado, baixando as imagens geradas pelo WordPress via SFTP, otimizando cada uma e subindo de volta para o servidor. Mas quando a pessoa tem alguns ou vários blogs em que trabalhar, essa opção já se torna inviável.

Ferramentas de otimização de imagens no servidor

Para quem tem um alto volume de imagens para otimizar, a única opção viável acaba sendo utilizar alguma ferramenta que rode no servidor: pode ser algum plugin de WordPress (mas não se precipite, o plugin é só melhor do que não usar otimizador algum) ou podem ser ferramentas que façam a otimização em segundo plano.

Os clientes da PortoFácil, contudo, contam com o otimizador de imagens de Mônica. Suas principais características são:

  • otimização extrema, em detrimento da velocidade (algo que um plugin de WordPress não consegue fazer sem “atolar” o blog);
  • execução assíncrona automática todas as noites.

Até agora, o otimizador de imagens da Mônica era capaz de compactar imagens JPEG e PNG.

O formato WEBP

O WEBP (pronuncia-se uépi) é um formato de imagem criado pela Google que visa entregar imagens com a mesma qualidade visual de outros formatos em arquivos muito menores. Infelizmente não são todos os navegadores que o suportam, o que dificulta sua adoção em massa — a despeito de não ser nenhuma novidade, apenas má vontade de alguns “fabricantes” (Apple, estamos olhando para você).

O WEBP pode ajudar a economizar muito tráfego, o que implica muito mais velocidade de entrega dos arquivos aos visitantes.

Veja o seguinte gráfico, com dados reais de imagens usadas no site de um de nossos clientes. A imagem PNG não sofreu nenhum tipo de otimização prévia; a imagem JPEG foi otimizada primeiro no TinyPNG, e somente depois enviada ao WordPress.

Em qualquer caso, a otimização da Mônica já é notável, obtendo arquivos menores do que os otimizadores online, e muito menores do que os obtidos pelo uso de plugins (como o EWWW Image Optimizer).

Entretanto, as imagens WEBP correspondentes são muitíssimo menores, e sem perda de informação visual. Só por curiosidade, o WEBP é um formato com perdas, se formos analisar seu funcionamento do ponto de vista da matemática, mas não é isso o que importa no momento.

WEBP não é panaceia

Antes que alguém possa ter a ideia simplista de sair substituindo todas as imagens de seu site de PNG e JPEG para WEBP, devemos alertar para o fato de o formato não fazer milagres. Há duas coisas que devem ser levadas em consideração com relação ao WEBP e ao otimizador da Mônica:

  1. o formato WEBP, reiteramos, não é universal ainda, e alguns navegadores (como o Safari) ainda não o suportam, o que implicaria um site sem imagens visíveis nestas plataformas;
  2. o otimizador da Mônica, em muitos casos (cerca de 60% dos casos, para ser um pouco mais exato) produz resultados menores do que o WEBP correspondente ao JPEG ou PNG otimizado; não haveria vantagem em servir um arquivo maior apenas para favorecer o formato, quando o objetivo é gerar páginas mais rápidas para carregar — que exigem arquivos de imagem mais leves, portanto.

Entra o WEBP condicional

Para resolver este problema a Mônica incorpora dois níveis de inteligência em seu otimizador.

No primeiro nível o otimizador da Mônica gera uma versão WEBP para cada imagem processada; se o WEBP acontecer de ser maior que a imagem otimizada, ele é descartado para favorecer o menor arquivo possível.

No segundo nível, o Nginx (servidor web) tira proveito de um recurso chamado “anúncio de capacidade” que o protocolo HTTP prevê: ao conectar-se a um servidor, o navegador “avisa” quais são as tecnologias que ele suporta, por meio de cabeçalhos padrão. Se o WEBP for uma das tecnologias suportadas o Nginx verifica se existe uma versão WEBP com o mesmo nome da imagem solicitada, e o entrega de maneira transparente no lugar do PNG ou JPEG originais. Caso o navegador não suporte WEBP, ou não exista uma versão WEBP gerada antecipadamente, a imagem requisitada é entregue normalmente.

A geração de WEBP e o serviço condicional não são padrão

Apesar das vantagens da metodologia acima descrita, ela não é padrão (ou seja, o cliente precisa solicitar a sua ativação).

Os motivos para isto são possíveis conflitos com o cache da Cloudflare e o maior consumo de espaço em disco.

Conflitos com a Cloudflare

A abordagem acima descrita é muito otimizada, extremamente rápida (não há atrasos ao servir as imagens, mesmo com os tratamentos das condições específicas), mas pode apresentar conflitos para domínios que fazem uso do cache da Cloudflare.

O mais comum é que a Cloudflare suprima o cabeçalho de anúncio de suporte ao WEBP, de forma que apenas os JPEGs e PNGs otimizados pela Mônica sejam enviados ao seu cache. Mas como não temos ainda uma confirmação deste comportamento preferimos considerar a pior hipótese.

Aumento do consumo de espaço em disco

Como algumas imagens (cerca de 40% delas) terão suas versões WEBP adicionadas à biblioteca de mídias do WordPress, e apesar do seu pouco tamanho em relação às imagens originais, haverá aumento do consumo de disco em cada domínio, o que pode não ser desejável em alguns casos.

 

Quero ser cliente da PortoFácil!Contato

Avalie este conteúdo!

Avaliação média: 5
Total de Votos: 13
Por que otimizar as imagens de seu site é extremamente importante

Compartilhe

Publicado por Janio Sarmento – 28 de dezembro de 2018