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)
  • Vickawaii
    Visitar blog
    05 . 10 . 2017

    Oi Aninha! Já tinha lido sua postagem e, assim como todo conteúdo que você posta (conheço o blog há muito tempo e muuuuuito li seus tutoriais), extremamente útil. Às vezes não temos ciência da importância de determinado aspecto ou até temos mas não temos a técnica para implementar determinada modificação. Valeu por compartilhar seu conhecimento com a gente!

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi, Victória! Awwwn, muito obrigada. ♥ Fico extremamente feliz em saber que o conteúdo que trago aqui no blog é enriquecedor para quem o lê. É muito gratificante compartilhar conhecimento. *-*

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

      Responder

  • Sophia Cuñado
    Visitar blog
    05 . 10 . 2017

    Mas gente, eu não sabia de NADA disso, de agora em diante vou prestar mais atenção, vou testar sempre e ver como tá meu bloguinho, super obrigada pelas dicas, tu explica super direitinho!

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi, Sophia! Que bom que gostou do post e que ele foi útil para ti. ♥ Espero que consiga colocar em prática e tenha sucesso com este novo conhecimento!

      Beijocas e obrigada pela sua presença. Seja bem-vinda! ;*

      Responder

  • Duda Nascimento
    Visitar blog
    04 . 10 . 2017

    Que post maravilhoso!!! Amei saber mais sobre como otimizar imagens, sei o quanto é importante, mas confesso que às vezes esqueço de cuidar desse detalhe. Parabéns pelo conteúdo excelente!

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi Duda! Que bom que gostou do post! Espero que tenha sido enriquecedor. ♥

      Beijocas e obrigada pelo elogio. Seja bem-vinda, sempre! ;*

      Responder

  • Luana Souza
    Visitar blog
    03 . 10 . 2017

    Quero começar dizendo algo que eu não sei se já disse, mas que e mesmo assim vale repetir: seu blog é lindo <3 o layout, as cores, o conteúdo… tudo! Parabéns.

    Agora, sobre o post, eu já entrei em blogs que realmente custam a carregar as fotos, e isso é um pouco chato. Adoreias suas dicas e toda a informação que você reuniu, pois tem desde sites a programas :) espero conseguir usar algumas das dicas no meu blog.

    Beijos, chuchu ::love::

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi, Luana! Awwn, muito obrigada pelo elogio, de verdade. É muito bom saber que o conteúdo postado aqui é enriquecedor para quem o lê. ♥ Assim espero que este post seja para ti quando necessitar. Qualquer dúvida é só dizer!

      Beijocas e obrigada pela sua presença! ;*

      Responder

  • Paola
    Visitar blog
    29 . 09 . 2017

    Menina, não conhecia o seu blog… Quanta dica mara!!! Já vou salvar o post pq são muitos links úteis!
    E seu blog é muito amooor..lindo demais! Ja vou seguir!!
    Beijos!!

    Responder

    • Aninha
      Visitar blog
      09 . 10 . 2017

      Oi, Paola! Que bom que o post foi enriquecedor! Fico feliz que tenha gostado do conteúdo e do blog. ♥ Seja bem-vinda, sempre! Obrigada pela visita. ;*

      Responder