O assunto não é exatamente “novo” em lugar algum e todo mundo sabe — ou deveria saber — que nenhum site se sobressairá na busca orgânica se não estiver muito bem otimizado em todos os seus aspectos, incluindo a otimização de imagens.
Até pouco tempo atrás, era até normal tolerar páginas cujas imagens demorassem um pouco para aparecer, desde 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 já nem prioriza mais as páginas com imagens pesadas nos resultados.
Inclusive, quando alguém submete uma página à avaliação do PageSpeed Insights, uma das ferramentas para medir a velocidade de sites e blogs, um dos fatores de piora na avaliação é justamente o uso de imagens em formatos que não estejam otimizados para a web.
Seções desta página
Ferramentas online para otimizar imagens
Existem várias ferramentas de otimização de imagens que podem ser utilizadas para acelerar um site e as nossas preferidas são o TinyPNG e o Squoos, pois dentre sua principal característica é oferecer vários formatos de otimização, assim como previsão em tempo real da imagem otimizada.
Entretanto, em se tratando de WordPress, otimizar a imagem que é enviada para o site ou blog é apenas um passo da jornada. Por exemplo, o sistema vai manter a imagem original inalterada, mas também criará miniaturas e várias imagens em outras dimensões, de acordo com a configuração do seu template WordPress. E, para complicar um pouco, estas imagens não serão otimizadas automaticamente.
Para aqueles com apenas um site ou blog isso não chega a ser um problema, pois dá para fazer uma “pós-edição” de cada post, baixando as imagens geradas pelo WordPress via SFTP, otimizando cada uma e subindo de volta para o servidor. Contudo, quando a pessoa tem alguns ou vários sites para trabalhar, então essa opção já se torna inviável.
Para quem tem um alto volume de imagens para otimizar, a única opção existente acaba sendo a utilização de alguma ferramenta que rode no servidor. Pode ser algum plugin de WordPress, ou podem ser ferramentas que façam a otimização em segundo plano.
Ferramentas de otimização de imagens no servidor
Você já conhece a Mônica para Clientes, e sabe do que ela é capaz. E, no presente momento, nossa inteligência artificial é uma das suas melhores opções no quesito otimização de imagens.
Para bom entendedor, ela consegue otimizar imagens JPEG de maneira extrema, usando a mais recente tecnologia de codificação de imagens disponível em domínio público.
Chamado de Guetzli, o novo algoritmo (que é muito mais demorado do que os tradicionais para codificação de JPEG) promete imagens mais nítidas com até 35% a menos de tamanho. Contudo, em alguns casos de laboratório, conseguimos economias próximas a 90% ao utilizar as habilidades de otimização da Mônica.
Por que otimizar as imagens?
A Mônica faz a otimização das imagens dos servidores dos clientes por um motivo principal e um motivo secundário.
O motivo principal é que imagens otimizadas, menores, implicam páginas mais rápidas para carregar, levando o visitante a ficar mais satisfeito com sua experiência no site. Além disso, os buscadores em geral, principalmente o Google, valorizam muito as páginas que carregam rápido, favorecendo as páginas mais otimizadas em detrimento das mais lentas.
Além disso, imagens menores significam menos consumo de disco e um melhor aproveitamento do investimento em servidor, sem contar os backups que ficam mais rápidos.
Como funciona o otimizador da Mônica?
A Mônica otimiza “apenas” imagens PNG (pronuncia-se ping — talvez você não soubesse) e JPEG. Por enquanto ela não faz otimização de imagens GIF porque, estatisticamente falando, há muito pouco que se possa fazer de maneira automatizada para otimizá-los sem correr o risco de causar danos durante o processo de recodificação.
Diariamente, no horário agendado — e que pode ser consultado na página da Mônica para Clientes no seu servidor — a Mônica lista todos os arquivos de imagem PNG ou JPEG da máquina. Processando, em seguida, a otimização de cada um deles.
Assim, uma imagem que for enviada para o servidor após este agendamento, será otimizada somente na madrugada seguinte, quando a Mônica estiver de passagem pela máquina de novo. Desta forma não há nenhum tipo de processamento para otimização de imagens em tempo real.
Para evitar que uma mesma imagem seja processada mais de uma vez, a Mônica mantém um índice com o nome do arquivo e uma “assinatura” de cada um, pelo qual ela pode facilmente detectar a necessidade de reprocessar uma determinada imagem ou não.
Caso seja necessário realizar a otimização de uma imagem — por ser nova ou por ter sido alterada — a Mônica, então, aplica o processamento adequado.
Otimização de imagens: Mônica × Arquivos PNG
Caso a imagem que a Mônica esteja otimizando seja um PNG, ela se utiliza do zopflipng, que não por acaso é um algoritmo também do Google, obtendo excelentes taxas de compactação e otimização de imagens ao custo de processamento bastante intenso.
O resultado é um arquivo que pode ser até 90% menor que a versão não otimizada e praticamente sem perdas da informação visual, nem mesmo do canal “alpha” (transparência).
Otimização de imagens: Mônica × Arquivos JPEG
De maneira geral, sem entrar em aspectos muito técnicos, podemos dizer que a criação de um arquivo JPEG, a partir de uma imagem, é um processo estatístico e/ou matemático que tem por objetivo converter as sequências de dados extremamente “desorganizadas”.
São esses dados que compõem uma imagem em sequências um pouco mais “organizadas” e que por isso mesmo se prestam à compactação.
Inclusive, com o objetivo de tornar a web mais rápida, o Google investiu na criação de um novo modelo matemático, que como dissemos no início deste artigo, se chama Guetzli.
O novo algoritmo tem por base a maneira como as pessoas percebem as imagens na web no lugar das matrizes arbitrárias normalmente usadas. Com isso ele consegue gerar arquivos menores e com qualidade visual superior ao que se tinha até então.
Assim como o Zopfli, o Guetzli requer muito mais processamento para a otimização de imagens, mas o resultado final é um arquivo com muito menos perdas visuais e, obviamente, tamanhos incrivelmente menores.
Vantagens do otimizador de imagens da Mônica
Com certeza você já sabe que otimizar as imagens de seu site é extremamente importante, implicando uma melhor experiência para os visitantes e, consequentemente, aumentando a possibilidade do Google favorecer o “ranqueamento” do seu site ou blog.
Imagens sem perdas visuais
Só para recapitular: a Mônica é capaz de otimizar sem perdas visuais significativas imagens JPG e PNG, inclusive, gerando versões WEBP das imagens que são servidas condicional e transparentemente.
Então, se um dispositivo visitante tiver suporte a este formato, as imagens enviadas a ele terão em média 30% do tamanho da imagem otimizada e, em alguns casos, chegando a ganhos ainda mais expressivos.
Otimização eficiente em imagens já otimizadas
Mesmo para pessoas que trabalham com design e que enviam suas imagens para o servidor devidamente otimizadas, a Mônica é capaz de aplicar a mesma otimização extremamente eficiente, porém de maneira mais condicional.
Desta forma evita-se que imagens que já foram otimizadas externamente tenham perdas significativas e/ou desnecessárias.
Otimização extrema em domínios específicos
Agora é possível instruir o otimizador para ignorar um diretório inteiro, bem como todos os subdiretórios abaixo dele. Isso significa que é possível que em um mesmo servidor a Mônica otimize as imagens de um domínio, mas não as de outro.
Ou que em um mesmo domínio as imagens do template não sejam otimizadas, porém, todas as outras sim. Ou alguma outra combinação, desde que se entenda que um subdiretório será marcado para “pular” o processamento, independente do que seja ele.
Monitoramento do diretório de uploads do WordPress
Com a utilização da otimização de imagens da Mônica é possível monitorar todos os diretórios de uploads do WP, desde que eles estejam em seu local padrão, como por exemplo: wp-content/uploads/.
Assim, à medida que as imagens são enviadas — ou criadas em casos de thumbnails — o otimizador roda junto, emagrecendo todos os arquivos de imagens e gerando, em seguida, versões WEBP e AVIF de maneira inteligente.
Quem se beneficia com a otimização de imagens da Mônica?
Todos os clientes de VPS ou de servidores dedicados sem cPanel se beneficiam do otimizador de imagens da Mônica. Clientes de servidores com cPanel infelizmente não têm o mesmo privilégio.
Exceções
Caso o cliente não deseje que suas imagens sejam otimizadas automaticamente deverá entrar em contato com o suporte e solicitar que a Mônica seja instruída a ignorar o seu servidor.
Em todos os casos, e nesse principalmente, recomendamos que todas as imagens sejam corretamente dimensionadas e otimizadas antes de enviadas para o servidor, em função do que explicamos acima.
Plugin reSmush.it para WordPress
Ao contrário dos seus primos que consomem bastante recursos do servidor web, o reSmush.it é um plugin para WordPress relativamente leve e extremamente eficaz na hora de otimizar as imagens do seu site ou blog.
Fazendo uso de algoritmos avançados durante a compressão das imagens, o reSmush.it consegue produzir resultados incrivelmente satisfatórios e consegue otimizar imagens PNG, JPEG e GIF com até 5MB num piscar de olhos.
Além disso, embora o nível de otimização da ferramenta esteja ajustado em 92, nossa recomendação é que você use o nível 85 para imagens JPEG que o resultado final será ainda melhor e a perda de qualidade será praticamente imperceptível ao olho humano.
O que é o formato WEBP
O WEBP (pronuncia-se uépi) é um formato de imagem criado pela Google que entrega imagens com a mesma qualidade visual de outros formatos em arquivos muito menores. O ponto negativo é que nem todos os navegadores o suportam, dificultando sua adoção em massa.
Sem dúvidas o WEBP pode ajudar a economizar muito tráfego, gerando muito mais velocidade de entrega dos arquivos aos visitantes. E, nesse caso, a otimização da Mônica já é incrivelmente notável, pois oferece arquivos menores do que os otimizadores online e muito menores do que os obtidos pelo uso de plugins, como o EWWW Image Optimizer.
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:
- O formato WEBP, reiteramos, não é universal ainda. Alguns navegadores ainda não o suportam, o que implicaria um site sem imagens visíveis nestas plataformas;
- 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. Por isso, não haveria vantagem em servir um arquivo maior apenas para favorecer o formato, ainda mais quando o objetivo é gerar páginas mais rápidas para carregar.
Executando o WEBP condicional
Para resolver este problema a Mônica incorpora dois níveis de inteligência artificial na hora de otimizar imagens.
No primeiro nível, o otimizador da Mônica gera uma versão WEBP para cada imagem processada. Assim, se o WEBP for maior que a imagem otimizada, ele é descartado para favorecer o menor arquivo possível. Simples, prático e objetivo.
No segundo nível, o Nginx (servidor web) tira proveito de um recurso chamado “anúncio de capacidade” que o protocolo HTTP prevê, e quando estiver conectado a um servidor, o navegador “avisa” quais são as tecnologias que ele suporta. Tudo através de cabeçalhos padrão.
Entã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, entregando de maneira transparente no lugar do PNG ou JPEG originais. Contudo, caso o navegador não suporte WEBP, ou não exista uma versão WEBP gerada antecipadamente, a imagem requisitada é entregue normalmente.
Apesar das vantagens da metodologia acima descrita, ela não é padrão, e 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 e não há atrasos ao servir as imagens, mesmo com os tratamentos das condições específicas, mesmo assim pode apresentar conflitos para domínios que fazem uso do cache da Cloudflare.
Por isso, 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. E como não temos ainda uma confirmação deste comportamento, preferimos considerar a pior das hipóteses.
Aumento do consumo de espaço em disco
Vale ressaltar que, como algumas imagens 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.
Resumindo
Enfim, para beneficiar-se do novo otimizador, basta entrar em contato com o Suporte e explicar sua necessidade. Nossos técnicos farão o ajuste necessário para que no próximo ciclo de otimizações (que ocorre toda madrugada) a Mônica já respeite os diretórios que não devem ser otimizados.
- Todos os servidores dedicados sem cPanel e VPS são automaticamente beneficiados pelo otimizador de imagens da Mônica.
- O otimizador só é executado uma vez por dia, no horário pré-programado.
- As imagens enviadas para o servidor ficam aguardando pela otimização até o próximo ciclo, conforme descrito.
- Os ganhos de velocidade de carregamento das páginas compensam largamente o processamento extra implicado pela Mônica.
- Se o cliente desejar não ter suas imagens otimizadas, basta entrar em contato com o Suporte Técnico e pedir para ser exceção.
Foto: Julia Joppien via Unsplash.