Uma das coisas que mais gostamos de usar em nossos bloguitchos são imagens, não é mesmo? Sabemos o quanto o recurso visual é importante para atrair o público leitor e enriquecer o conteúdo, mas às vezes esquecemos de um pequeno detalhe: imagens pesam, ainda mais quando juntamos todas que aparecem em cada página. Elas geralmente são responsáveis por cerca de 50% do carregamento, e muitas pessoas não lembram o quanto isso é crucial para o desempenho de seus blogs — ou até sabem da importância, mas não sabem qual é o melhor caminho para otimizar dependendo do nicho do blog. É ai é que este post entra em ação! 😎
Imagem: Viktor Hanacek
Como saber onde e o que devo melhorar?
O primeiro passo é saber se você realmente precisa otimizar o seu blog e, se sim, o que está ao seu alcance. Para saber disso, super indico os seguintes sites avaliadores:
O GT Metrix faz uma analise de vários itens da página com todo um sisteminha de nota (de média A-F) fazendo uma comparação com o PageSpeed e a extensão YSlow do Yahoo. Ele faz a contagem do tempo de carregamento do seu site, total de megabytes, total de requerimentos (que são chamadas que o navegador faz para o servidor), além de indicar em cada item analisado o que pode ser melhorado. Assim também é no PageSpeed, porém, eu acho ele bem mais simples que o GT Metrix. É sempre legal ter uma alternativa pois ele pode indicar algo que o GTM não fez. Já o Pingdom eu adoro no quesito de detalhamento e velocidade de cada requisição de arquivo carregado na página. Desta forma dá pra ver o que está mais pesando no blog, além do tamanho total de cada tipo de arquivo.
Atenção: leve em consideração que os resultados nunca são absolutos, pois muita coisa interfere numa avaliação de um site, desde a banda larga de internet, do post que está no ar naquele momento, até o seu servidor e o horário que você está avaliando sua página. O legal é fazer várias análises, pegar os dados e fazer uma média entre eles, pois os resultados dos diferentes avaliadores praticamente nunca irão bater certinhos.
Quer mais posts como este? 💌
Tipos de otimização
Antes de ir pra otimização em si, precisamos entender o tipo de melhoria que precisamos. Há duas formas de otimizar imagens: a forma lossless e a lossy. A lossless mantém a qualidade e os principais metadados da foto. É uma forma de otimização mais branda, mas legal de ser usada em sites de fotografia onde os dados EXIF da foto precisam ser mantidas, seja por informação técnica ou por questão de direitos autorais. Já a forma lossy é mais agressiva, reduzindo drasticamente o tamanho do arquivo (em alguns casos pode haver otimização de até 90%!) e perdendo todos os metadados da foto de forma irreversível.
O Google vê os dados EXIF como um potencial para o rankeamento (localização, câmera, fonte verdadeira da imagem) e isso pode ser legal para quem trabalha profissionalmente com fotografia. Entretanto, o Google não trabalha necessariamente através das palavras-chave e descrição inseridas via metadados. Desta forma, considerando que trabalhamos no SEO das imagens com muito mais intensidade através dos atributos alt="" (texto alternativo) e title="" (título da imagem) da tag <img>, os dados EXIF podem ser retirados sem muita preocupação. :) Estes atributos de imagem são comuns no editor visual do painel quando se está escrevendo um post, então não precisa necessariamente acessar a parte de html para colocar estes itens.
Aproveite e leia também:
Ferramentas de otimização
Uma vez que suas análises foram feitas e você detectou que precisa de fato melhorar o tamanho de seus arquivos de imagem, agora é a hora do trabalhar.
Via plugin WordPress
Blogs em WordPress têm a vantagem de utilizar plugins que fazem todo o serviço. Há diversos plugins com o mesmo propósito mas com diversas tarefas diferentes (que, inclusive, podem contribuir para o SEO), mas para o básico de otimização de tamanho estes abaixo são ótimos.
- Imagify
- Kraken
- Tiny Compress Images (meu favorito)
- WP Smush
O legal destes plugins é que eles não alteram a url da imagem otimizada. Por outro lado, muitos deles você tem um determinado limite de megabytes por mês de otimização (ou número limite de imagens) para se fazer. Para portfólios de fotografia, por exemplo, pode ser que precise pagar mensalidade para conseguir mais vantagens (mas é algo que vale a pena, dependendo do volume de fotos que uma página queira utilizar). Para quem não gosta de acumular plugins e já faz uso do famoso JetPack, dá para ativar o item Performance de Imagem no painel principal do plugin. Eu o usei por um tempo, mas particularmente achei que a qualidade da imagem reduziu drasticamente (com algumas ficando feias e bem pixeladas) e não há escolha de nível de otimização como tem no Imagefy, por exemplo. 😒 Mas se você não se importa com isso, vai com fé que o JetPack resolve seu problema.
Via ferramentas online
Os sites de otimização online são os meus queridinhos pois acho prático e rápido para ações pequenas, como otimizar imagens de um post específico, do layout etc. Este método mais braçal é legal para blogs no blogspot, já que não têm plugins como no wordpress. Segue abaixo os meus favoritos:
- Optimizilla: perfeito para edição em massa (principalmente para jpeg), escolhendo o nível de redução para cada imagem do montante e fazendo o download único de todas as imagens depois de otimizadas. Faz apenas otimização lossy.
- Compressor.io: legal para uma imagem ou outra, mas é fraco para imagens formato gif. Otimiza tanto como lossy quanto lossless.
- TinyPNG: versão online do plugin Tiny Compress Images que citei acima e, para mim, é o melhor para comprimir arquivos em formato png, principalmente os de fundo transparente. Ele também tem uma extensão para usar no Photoshop, mas confesso que nunca utilizei. A ferramenta online faz apenas otimização lossy.
- Toolur: tem bastante opção para reduzir em diversos níveis, e achei ele potente para reduzir imagens gif (só não sei o desempenho para gifs animados). Só otimiza da forma lossy.
- Kraken: versão online do plugin wordpress e dá para otimizar imagens em massa, mas não dá para manipular a qualidade de forma singular como é no Optimizilla. Otimiza tanto como lossy quanto lossless.
- Imagify: também é versão online do plugin de mesmo nome e funciona parecido com o Kraken, mas pra ter a otimização lossless precisa ter login (a lossy é livre disso). Mas o mais legal desta ferramenta é que há a opção "Page Optimization", onde você pode inserir a URL do seu blog e fará a compressão de todas as imagens presentes na página e te fornece um zip para você baixar estas imagens para substitui-las.
A desvantagem de utilizar este método de otimização é que você precisará fazer upload de uma nova imagem — o que não pode ser legal para blogs que já tê muitos posts e imagens rankeadas no google, pois não deixa de ser um serviço muito braçal, né. O que eu fiz foi otimizar basicamente as imagens gerais do blog, dos posts mais recentes e os 10 posts mais acessados, mantendo os mesmos textos nos atributos alt e title das imagens antigas, porém não as excluindo do servidor para dar tempo do Google se atualizar.
Tamanho importa, sim!
Não adianta nada se você faz a otimização de uma imagem se, de qualquer jeito, você a utilizará num lugar onde sua largura/altura serão reduzidas. Vejo muito isso em blogs lifestyle, que fazem o upload direto da máquina as fotos do look do dia, de ensaios fotográficos etc. Se a largura do seu post é de 800 pixels, por que cargas d'água você vai utilizar uma imagem de 2000px? Não precisa. Você não está lidando com uma mídia social como o instagram ou facebook que interferem na qualidade da sua foto — você que está no controle. É até legal utilizar imagens um pouco mais largas que a largura do post para manter uma qualidade e auxílio na responsividade do layout, ou até mesmo como margem de segurança prevendo uma mudança na largura do post em um futuro design. Eu mesma passei a fazer isso também: a largura dos posts do Madly Luv é de 770px, e gosto de adotar uma média 1000px de largura nas minhas imagens.
Por que é difícil atingir notas máximas?
Para nossa surpresa (ou alegria), é raro uma página atingir notas máximas em todos os itens destes sites avaliadores. Não é o fim do mundo ficar com notas "medianas" — só não é legal ficar com baixa velocidade (mais de 10s), todas as notas F e de 0 até 50 no GTMetrix e PageSpeed, respectivamente. Para blogs de forma geral é super normal ficar com uma nota C e por volta de 70 depois de uma otimização geral, pois costumam ter bastante recursos visuais. Notas acima disso você pode pular de alegria, hehe.
Muitas imagens que aparecem em nossos blogs nós não temos controle pois são requerimentos que vêm fora de nosso servidor. Os melhores exemplos são as imagens das redes sociais, com ênfase no instagram e pintereset, e imagens de perfil dos seguidores, seja via Gravatar, pela a caixa de seguir e comentar via facebook. São itens super comuns em blogs por causa dos códigos de incorporação (via iframe, script ou tag html qualquer). Pode notar que vários itens pedidos para ser otimizados na análise destes avaliadores virão de redes sociais e outros links externos.
Podem existir itens difíceis de trabalhar se você não tem noção de HTML/CSS ou não tem acesso ao código-fonte do seu layout. No caso, seria interessante contratar alguma pessoa profissional em web design ou desenvolvimento para fazer isso para você. ;D Quase todo tipo de otimização é bem-vindo.
Foque nos itens que vêm diretamente do seu servidor, pois qualquer 100KB faz a diferença, principalmente se você gosta de ter vários posts numa mesma página. Eu consegui acelerar alguns segundos do carregamento do Madly Luv otimizando quase 2MB de imagem!
Eu pretendo fazer mais alguns de posts aqui no Madly Luv na categoria blogosfera sobre dicas de desempenho. O que acha? Te alguma dica que pode incorporar neste post? Conte nos comentários! Me conta também o que você achou deste post, se já sabia de alguma destas dicas ou isso foi uma novidade pra ti. 😎 Espero que seja de grande ajuda. 😍 Depois me diga os seus resultados!
