Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

Como otimizar imagens para acelerar o carregamento do blog

Blogosfera

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! ::cool::

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.

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.

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 que são metadados?

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.

  1. Imagify
  2. Kraken
  3. Tiny Compress Images

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 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 avtiar 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:

  1. 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.
  2. Compressor.io: legal para uma imagem ou outra, mas é fraco para imagens formato gif. Otimiza tanto como lossy quanto lossless.
  3. 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.
  4. 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.
  5. 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.
  6. 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, e acrescentar alguns tutoriais lá na sessão extra para complementar. 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. ::cool:: Espero que seja de grande ajuda. ::love:: Depois me diga os seus resultados!

Veja também...

Blog Day: 20 blogs lindos para você conhecer
Como trabalho com as newsletters do blog
A importância dos shortlinks em um blog
¬¬ zZz x_x o_O ^^ T_T ;D :x :S :P ::teary:: ::sweat:: ::stress:: ::rolleyes:: ::love:: ::cool:: ::blush:: ::attention:: ::angry:: :) :( ._. *o* *O_O


24 Comentário(s)

(24 pelo blog e pelo facebook)
  • Ane
    Visitar blog
    29 . 09 . 2017

    Menina que postagem super completa, adorei! Já vou favoritar para depois ver como calma cada site que você citou e como se aplicada cada dica. É muito bom ver que na blogosfera ainda há quem se importe em ajudar os outros. Parabéns!

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi, Ane! Obrigada, fico feliz que tenha gostado das informações! Espero que sejam enriquecedoras para ti no futuro. ♥

      Beijocas e muito obrigada pela sua presença! ;*

      Responder

  • Yuri S
    Visitar blog
    29 . 09 . 2017

    Bem legal o post, tem uns blogs que tem tantas imagens que demora mais pra carregar e você consegue sentir o peso só de navegar na página, não é legal :/ Esse post vai ser útil pra muita gente. As vezes não nos damos conta como uma coisa simples como otimização de imagens podem melhorar a experiência de nossos leitores.

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi, Yuri! Sim, e vejo que isso é muito recorrente na blogosfera. Espero que este post ajude :)

      Abraços e obrigada pela sua presença!

      Responder

  • Aline Lima
    Visitar blog
    29 . 09 . 2017

    Mulher, nem sei por onde começar. Bom, primeiro, eu ADOREI suas dicas sobre imagem. É algo que , embora tivesse certo cuidado, não me atentava a todos esses aspectos. Foi realmente enriquecedor ler seu texto. E, segundo, o layout do seu blog é muito lindo! Parabéns pelo seu trabalho, ficou muito bom. E já guardei seu contato para o futuro ;) Beijos e sucesso!

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi Aline, tudo bom? Ahh, que bom que o post trouxe boas informações para ti! ♥ Fico muito feliz quando um conteúdo enriquece o conhecimento de quem o lê. E obrigada pelo elogio ao meu trabalho. *-*

      Seja sempre bem-vinda!
      Beijocas e obrigada pela sua visita e comentário ;*

      Responder

  • Luly
    Visitar blog
    29 . 09 . 2017

    Eu queria caminhar até aí é te dar um beijo de agradecimento por esse post. Depois daquele seu tópico no Facebook dei uma avaliada no meu blog nesses sites e quis chorar. E o problema principal apontado foram as imagens (mesmo que eu adoro reduza a 100px de largura também). Vou começar testando algum desses plugins e ver o que acho, além de buscar um pouco sobre otimização aos poucos. Arrasou, Aninha! Obrigada!

    Responder

    • Aninha
      Visitar blog
      29 . 09 . 2017

      Sua linda, obrigada Luly! Mas sim, é legal ir aos poucos para otimizar. Faz o teste com alguns dos plugins. Verá que fará bastante diferença ::love::

      Beijcoas e boa sorte!

      Responder

  • Kimberly Camfield
    Visitar blog
    29 . 09 . 2017

    Primeiro: que blog mais lindo o seu! Estou apaixonada <3 Adorei o layout, achei super fofo!
    E segundo, gostei muito do post. Confesso que não sabia nada disso e demorei um pouquinho para entender.
    Para mim otimização era só diminuir o tamanho da imagem kkkk
    Adorei a ideia dos sites, no lugar de plugin.
    Já que você mencionou o wordpress, o meu tem o jetpac e – não tenho certeza – mas acho que o Performance de Imagem está ativado no meu desde que baixei. Tenho notado que a qualidade das minhas imagens parece diminuir depois que coloco no site e não sabia a razão disso.
    Vou adorar mais posts assim, beijão e sucesso

    Responder

    • Aninha
      Visitar blog
      29 . 09 . 2017

      Oi Kimberly! Primeiramente, obrigada pelo elogio ♥ Fico muito feliz que tenha gostado do blog e do layout dele! E sim, provavelmente a queda da qualidade de suas imagens é devido a essa ferramenta do JetPack. Se você desativar elas voltarão ao normal, e dai pode optar em utilizar outra ferramenta que você tem mais opção no nível de otimização. :)

      Beijocas e muito obrigada pela sua visita! Seja bem-vinda sempre! ;*

      Responder