Otimizar imagens para web faz com que seu site carregue mais rápido e que seus visitantes não tenham que esperar tanto pelo carregamento. Os visitantes de seu site querem imagens otimizadas e de tamanho reduzido, portanto, é importante aprender a otimizar imagens para a web a fim de servir páginas rápidas e de qualidade. Entender o básico sobre compressão e otimização de imagens e seus formatos permite escolher não somente qual a melhor maneira de reduzir o tamanho de imagens, mas também melhorar a qualidade de imagens.

Este é um artigo traduzido do original “How to Optimize Images for Web – Image Optimization Ultimate Guide“, do blog Design Live, e a tradução (com pequenas adaptações) foi feita com autorização do autor, Michael Garmahis.

Retirar o excesso de espaço em branco

Às vezes uma imagem tem espaço branco ou tem um “excesso” de cor ao redor para que o texto e outros elementos não encostem na imagem. Ao invés disso, recorte esse excesso de espaço em branco e dê o espaçamento desejado usando a propriedade CSS padding.

Não redimensionar imagens pelo browser

Não use propriedades HTML ou CSS para redimensionar suas imagens pelo browser, ao invés disso, redimensione suas imagens em seu programa de editoração de imagens preferido, especificamento exatamente a dimensão de cada imagem que será usada.

Escolher o formato de imagem certo

Para otimizar imagens para web, escolher o formato de imagem correto é fundamental. Então, saiba quando optar entre JPG, GIF e PNG.

JPG

JPG é o formato para fotos. JPG pode ter milhões de cores e ainda conseguir uma excelente taxa de compressão. É um formato “de perda”, o que significa que ter qualidade 100% não significa menor perda). Então você perde qualidade a cada edição da imagem. JPG não suporta transparência.

GIF

GIF é o formato para animações. GIF é um tipo de imagem “paleta” (também chamado “indexed”), que contém até 256 cores indexadas. GIF é um formato sem perda, o que significa que quando você modifica e salva a imagem, não há perda de qualidade. GIF suporta transparência (os pixels em uma imagem em GIF ou são totalmente transparentes ou são totalmente opacos).

PNG 8

PNG 8 é o formato para logos, ilustrações, ícones, botões, backgrounds e gráficos. PNG 8 é um formato sem perda, assim como GIF. Diferente do GIF, PNG 8 costuma gerar um arquivo de tamanho menor e tem suporte a transparência alpha variável – gerando pixels semitransparentes (recurso não suportado pelo IE6).

PNG 24

PNG 24 é usado quando você precisa de transparência alpha e mais de 256 cores. PNG24 é também a única opção quando você precisa de uma imagem de qualidade superior e o tamanho do arquivo gerado não importa. O tamanho das imagens em PNG 24 é geralmente maior que JPG e PNG8. Truecolor PNG é um formato sem perda que pode ter milhões de cores (16 bits por canal) e pode servir perfeitamente como “intermediário” entre diversas edições.

Usar “Save for Web & Devices” ao invés de “Save as…” no Photoshop

O comando “Save for Web & Devices…” no Photoshop (Alt+Shift+Ctrl+S) existe para exportar imagens otimizadas para web, com um melhor balanceamento tamanho/qualidade. É possível ter um controle refinado através de previews para experimentar diversos tamanhos de imagem e qualidade. Essa opção tenta reduzir o tamanho dos arquivos retirando informações (metadata) dispensáveis – o que pode fazer com que uma imagem tenha o dobro do tamanho necessário quando se trata de imagens para web.

Usar poucas cores para imagens indexadas e experimentar a paleta “Selective”

Se está produzindo ou otimizando imagens para ícones, botões ou outro tipo que possa ser em PNG8, tente reduzir o número de cores para 32 ou 64. Isso pode reduzir significativamente o tamanho sem alterar na qualidade da imagem.

Usar a paleta “Selective” para imagens com cores chapadas permite uma compressão de imagem melhor e mais eficiente em comparação às paletas “Perceptual” ou “Adaptive”.

Converter PNG para Grayscale se você não precisa de cores

Converta as imagens para Grayscale ou Escala de Cinza (Image >Mode > Grayscale) antes de salvá-las em PNG. Isso ajuda a economizar alguns KBs, especialmente em se tratando de imagens semitransparentes.

Experimentar PNG24 ao invés de PNG8

Às vezes imagens pequenas e alguns tipos de gradientes ficam melhores (custo/benefício) em PNG24 ao invés de PNG8. Isso acontece devido à maneira com que os algoritmos de compressão de “sem perda” trabalham e à “sobrecarga” que cores indexed acrescenta.

Usar “Posterization” para reduzir o número de cores em PNG

“Posterization” reduz a quantidade de cores, convertendo cores similares em uma só. Para usar esta técnica vá em Image >Adjustment >Posterize, no Photoshop, e experimente um valor em torno de 40.

Reduzir o “ruído” (noise) para diminuir o tamanho da imagem

Noise (“ruído”) faz com que o algoritmo do JPG precise de mais recursos para salvar, deixando menos espaço para a informação realmente útil, ou seja, a imagem em si. Isso significa que, eliminando o noise, você não somente tem uma imagem com tamanho melhor, mas também melhorar seu aspecto visual.

Você pode usar diversos plugins do Photoshop, como Noise Ninja ou Imagenomic Noiseware ou uma maneira fácil de reduzir o ruído no Photoshop é mudar para o modo de cor Lab e, em seguida, aplicar Filter > Mediana (2-4) para os canais A e B.

Embaçar o fundo

Embaçar o fundo de uma imagem JPG ajuda o mecanismo de compressão a gerar uma imagem de tamanho menor. Para usar essa técnica, faça uma selação no objeto principal da imagem, inverta a seleção (CTRL + I), aplique uma pequena quantidade de Gaussian Blur (1 ou 2px). Agora você pode salvar sua imagem como um JPG de tamanho menor.

Embaçar a imagem quando for Salvar para Web

Devido ao fato de o algoritmo de compressão JPG ter facilidade em lidar com transições sutis de cores, acrescentar um pequeno blur (0,2 ou 0,3) quando for Salvar para Web no Phosothop pode ajudar a reduzir e otimizar o tamanho do arquivo. Diminuir ligeiramente o Contraste e Saturação também tem um bom impacto no tamanho de arquivos JPG.

Otimizar imagens com ferramentas especiais

Existem excelentes ferramentas online e utilitários para download que podem ajudá-lo a reduzir e otimizar significativamente suas imagens sem perda de qualidade.  É uma boa prática usar algumas dessas ferramentas para otimizar suas imagens e obter arquivos de tamanhos menores. Atenção aos termos de uso de algumas dessas ferramentas.

Smush.it

Smush.it é uma ferramenta online que utiliza técnicas de otimização diferentes para cada formato de imagem (PNG, GIF, JPEG) para remover bytes desnecessários da imagem sem perda de qualidade. Você também pode usar Smush.it integrado com o plugin do Firefox YSlow ou através de um plugin WordPress.

JPEGmini

Excelente para diminuir o tamanho de arquivos JPG sem perda de qualidade. Qualquer um pode usar o JPEGmini para comprimir 1 imagem por vez, e, criando uma conta (grátis), é possível enviar arquivos em lote e criar álbuns com as imagens otimizadas.

punypng

punypng usa diversas técnicas de otimização de imagens para web para reduzir o tamanho dos arquivos. Os desenvolvedores do punypng afirmam que a ferramenta é atualmente mais eficiente do que o Smush.it.

PNG Monster

PNG Monster é uma GUI para compressão de PNG projetada para converter com eficiência grandes números de arquivos PNG automaticamente. PNG Monster usa uma variedade de aplicações “command-line” (PNGRewrite, PNGCrush, OptiPNG, PNGOut, AdvPNG) para comprimir com variados métodos de compressão PNG.

SuperPNG

SuperPNG é um plugin grátis do Phosothop para salvar arquivos PNG significativamente menores em relação ao salvamento nativo do Phosothop. Também inclui algumas características avançadas de PNG, como suporte a 16 -bit color, compressão variável, correção de gama e salvamento de metadata.

TinyPNG

Uma das melhores ferramentas de compressão de PNG da atualidade! O TinyPNG realmente tem um script eficiente que consegue diminuir o tamanho dos arquivos em mais 80%! Aqui está um exemplo de uso da ferramente num projeto real.

Compress PNG

Tão eficiente quanto o TinyPNG, a Compress PNG, apesar de um pouco mais lenta para trabalhar, ainda permite algumas configurações na otimização para que se adeque às necessidades de cada upload.

SuperGIF

SuperGIF é um utilitário gratuito para Windows e MAC para otimizar imagens GIF. Ele permite comprimir um arquivo GIF em até 50%! A versão gratuita comprime somente um arquivo por vez.

jStrip

jStrip é um programa gratuito que reduz e otimiza imagens e JPG sem sacrificar a qualidade das imagens. JStrip trabalha removendo informações desnecessárias do arquivo JPG sem perda de qualidade ou recompressão.