Categorias: Tutoriais

Otimizando Imagens

Já repeti várias vezes, que imagens é uma das coisas que mais pesa no carregamento de uma página, mas acredito que essa é uma tecla que precisa bater sempre.

Se você fizer uma análise do seu site no PageSpeed do Google, ele sempre vai dizer pra você que tem imagens pra otimizar. Ainda não peguei um site que não tivesse isso na análise, a não ser um site que não tem praticamente nada de imagens. Então vez ou outra recebo emails de pessoas querendo saber se não tem plugin pra otimizar as imagens (recomendo dar uma lida nesse post, em inglês, sobre o Google PageSpeed).

Você vai encontrar vários plugins para o WordPress que faz isso, mas não recomendo eles para otimizar imagens.
Otimizar imagens automaticamente é igual usar o tradutor do Google. Ajuda, mas não é perfeito.
É claro que facilita a vida, mas se você usar um plugin que faz isso automaticamente, uma ou outra imagem vai ficar com qualidade ruim e você terá que sair arrumando manualmente, isso se o plugin permitir que você faça isso.

O ideal é você tirar um tempinho pra editar suas fotos em um editor como o Photoshop, antes de colocar elas no site. Assim você deixa do tamanho que quer e salva com a qualidade que achar melhor.

E não fique na neura porque o Google está dizendo que precisa otimizar até aquelas imagens que você já otimizou, ou aquelas dos banners de publicidade do Google Adsense (Sim! Já vi ele fazer isso várias vezes!). Otimiza o máximo que conseguir, deixando na qualidade que considera melhor, com tamanho em pixels aceitável e pronto. Novamente, leia esse post, em inglês, sobre o Google PageSpeed.

Diferença de uma imagem original e uma imagem otimizada

Peguei uma imagem no unsplash.com para ilustrar pra vocês a diferença depois de otimizar a imagem.

Otimizando Imagens: Antes de otimizar a imagem tinha 2000x1500 e 515KB

A imagem estava com 2000×1500 pixels e 515KB.
Depois de otimizada a imagem ficou com 700×525 pixels e 61,7KB.

Otimizando Imagens: Depois de otimizar a imagem ficou com 700x525 e 61,7KB

O tamanho 700 pixels de largura foi o que escolhi quando otimizei a imagem.
Você pode escolher o tamanho que desejar, e logo o peso em KB varia de acordo com a imagem e o tamanho em pixels.

O tamanho ideal para imagens em um site depende de como o site foi feito e para quê é esse site, mas posso dizer que uma imagem maior que 1920 pixels de largura é exagero na maioria dos casos.

Para terem uma ideia, o monitor que trabalhamos tem 1920 pixels de largura. É possível encontrar monitores com resoluções maiores que isso, mas acredito que somente quem trabalha com edição de imagens e vídeos (e talvez os gamers) terão um monitor desses. E mesmo assim, nem todos os sites tem as imagens ocupando 100% da largura da tela.

As fotos que você tira com o celular provavelmente tem um resolução maior que 1920 pixels de largura. A maioria dos celulares hoje fazem fotos com uma resolução grande. Então não é recomendado você tirar a foto no celular e jogar ela no post do blog daquele jeito, sem otimizar. Não é porque o celular é um aparelho pequeno, que a foto está pequena e otimizada.

Redimensionando a imagem no Photoshop

Se você tem a uma imagem muito grande e quer redimensionar ela proporcionalmente para um tamanho menor, essa é a forma que acho mais simples de fazer no Photoshop.

Como cortar e redimensionar imagens com GIMP (editor gratuito, indicado como melhor alternativa gratuita ao Photoshop)

Otimizando Imagens: Vá em Image / Image Size no Photoshop

Abra a imagem no tamanho original no Photoshop.
Vá em Image / Image Size.

Otimizando Imagens: Selecione Resample Automatic, deixe Resolution com 72 e coloque uma largura em Width

Depois deixe selecionado a opção Resample: Automatic.
Altere primeiro a Resolution para 72 (72 ou 144 para web. Para impressão use 300).
Depois altere Width (largura) em pixels que deseja que sua imagem tenha e a altura será alterada proporcionalmente.
Então clique em Ok.

Cortar imagem no tamanho desejado no Photoshop

Se você tem um imagem grande e quer cortar ela para um tamanho específico, é possível usar a ferramenta de corte do Photoshop.

Otimizando Imagens: Cortar imagem no tamanho desejado no Photoshop

Você abre a imagem no tamanho original no Photoshop e seleciona a ferramenta de corte.
Depois na barra do topo (normalmente está lá), nas opções da ferramenta selecionada, você coloca o tamanho e resolução desejada.
No exemplo na foto acima, escolhi 700 pixels para largura e 500 pixels para altura, com resolução 72.

Então é só ir na imagem, clicar, segurar e arrastar até fazer a seleção que deseja.
Depois é só dar um enter e você terá a imagem cortada no tamanho que queria.

Otimizando imagens no Photoshop

Depois que já tiver com a imagem no tamanho desejado – redimensionada proporcionalmente ou cortada, como expliquei acima – é hora de otimizar ela.

Com a imagem aberta no Photoshop, vá em File / Save for Web.
E na janela que abrir, altere as opções como desejar, depois é só clicar em Save.

Se a imagem for JPG (ou JPEG), costumo deixar a configuração como essa da imagem acima, as vezes aumentando a qualidade 60 para 70, 80… o quanto eu achar que está bom para a imagem que está sendo editada.

Se a imagem for PNG, seleciono PNG-24 com a opção Transparency selecionada e salvo a imagem.

Recomendo usar PNG somente para imagens pequenas ou imagens que precisam de fundo transparente. A maioria das imagens que são maiores que 500 pixels de largura, o formato JPG é melhor porque a imagem fica menos pesada em KB.

Se você não tem Photoshop, vale a pena testar o GIMP. Ele é um programa free para edição de imagens, bem completo. Assim que for possível farei tutorial explicando esse processo de cortar e salvar as imagens para ele. Como cortar e redimensionar imagens com GIMP.

Otimizando imagens online

Se você não tem Photoshop ou nenhum editor de imagens, você encontra sites online que fazem isso.

Otimizando Imagens: Compressor.io

Um site que testei e gostei bastante é o Compressor.io, mas ele apenas otimiza as imagens, ele não faz o corte da imagem para o tamanho desejado.

Uma outra opção é o TinyPNG, que também só otimiza e não faz corte.

Plugin para WordPress

O plugin que estamos usando e colocando para nossos clientes é o Smush Image Compression and Optimization.
Ele faz a otimização das imagens em todos os tamanhos (o WordPress gera tamanhos diferentes para a imagem que você insere nos posts), e ainda tem opção de Lazy Load, que tem sido recomendado pelo Google porque diz que deixa o carregamento das páginas mais rápidas.
Em todo caso, vale a pena redimensionar e otimizar as imagens manualmente antes de fazer upload delas no seu site ou blog.