Sabia que o formato – ou extensão – que você utiliza para determinadas imagens pode não ser o mais adequado?

Isso representa, além de perda de qualidade, uma diferença – que pode ser gritante – no peso final do arquivo.

Vamos explicar abaixo, de maneira rápida, o formato ideal para cada tipo de imagem – de fotos a ilustrações, de animações a ícones.

Vamos lá?!

Fotos em geral: JPG

Se você precisa salvar fotografias, esqueça os outros formatos: o adequado é JPG.

Joint Photographic Experts Group (também JPEG) também pode ser utilizado para outros tipos de imagens, como ilustrações, mas é mais adequado para fotos. É possível ter controle total de compressão e qualidade da imagem.

Ao salvar para web, opte pela qualidade entre 84 a 95. Abaixo disso a imagem começa a perder muita qualidade, e acima não há ganhos de redução do tamanho do arquivo.

Ilustrações, desenhos e elementos de design: PNG ou SVG

Já vimos muitos casos de fotografias salvas com o formato PNG (Portable Network Graphics). Isso é um erro dos grandes!

PNG é o formato ideal para ilustrações, desenhos e elementos de design, como logos, ícones e botões. Uma fotografia salva como PNG, além de poder apresentar problemas com cores, fica extremamente mais pesada. E estamos falando de uma diferença em que o JPG pode ficar com até 10% do tamanho!

SVG (Scalable Vector Graphics) é outro formato indicado para imagens assim – principalmente elementos de design.

Trata-se de um formato vetorial para imagens, ou seja: elas não têm uma medida limite, podendo ser esticadas infinitamente sem que sua qualidade seja comprometida com serrilhamentos.

Quando salvo e otimizado da maneira correta, o SVG pode representar apenas alguns bytes em seu site.

Imagens com fundo transparente

A principal função do PNG, quando inventado, foi substituir o GIF para imagens com fundo transparente com mais qualidade. O PNG não apresenta serrilhamento, ao contrário do GIF.

O mesmo pode-se dizer para o SVG. Então, opte pelas duas extensões para imagens com transparência.

Animações como recortes de vídeos e banners: GIF

Falando em GIF (Graphics Interchange Format), tal formato é o mais adequado para animações em geral.

Por exemplo, se você for criar um banner publicitário animado, salvá-lo como GIF possibilita que ele possa ser visualizado em todos os dispositivos.

Outro uso comum do GIF é com recortes de vídeos, como cenas de filmes. Mas cuidado: esse tipo de imagem pode ser extremamente pesada! Se você for utilizar em seu site, opte por fazer o upload em sites especializados, como o GIPHY. Assim você ocupa menos espaço em seu servidor e economiza em transferência também.

Se possível, opte por HTML5 ou vídeo mesmo

Algumas animações, como de banners publicitários mesmo, podem ser feitas em HTML5. Com isso seu banner ficará mais leve.

Em outros casos, se possível, utilize vídeos em vez de GIFs. E, mais uma vez, opte por serviços especializados para hospedagem de vídeos, como o próprio YouTube.

E animações em Flash?

Esqueça!

BMP, TIFF, PDF, PPT e outros formatos

BMP e TIFF não são, de forma alguma, formatos adequados para web.

PDF e PPT só podem ser incorporados a uma página com a utilização de sistemas específicos para isso, como o Issuu. Caso contrário, é visualizado apenas através de download.

Esses formatos são ideais para documentos e apresentações.

Bônus: WebP

Formato desenvolvido pelo Google, o WebP promete uma bela redução do peso das imagens sem redução de qualidade.

E o melhor: é adequado para fotografias (possui compressão), animações e imagens com transparência. Ou seja, pode ser utilizada no lugar de basicamente todos os casos acima.

Porém, o formato ainda não é suportado por alguns navegadores. A solução, então, é utilizar dois formatos, entregando WebP se o navegador o suporta e o outro formato (JPG, PNG, GIF) quando não.

Mantenha suas imagens otimizadas

Ter um site com imagens otimizadas é garantir que todos os visitantes naveguem com velocidade.

Lembre-se que muita gente ainda utiliza 3G, e que ele é o equivalente à internet discada dessa geração. Então, se você utilizar imagens muito pesadas, além de deixar o site mais lento, consumirá boa parte do pacote de dados de seus visitantes.

Antes de subir imagens para seu site, deixe-as já na medida certa. Por exemplo, se a área de conteúdo do seu site tem 730px de largura, não faz sentido fazer upload de uma imagem com 2000px de largura.

Utilize também otimizadores de imagens para deixar as imagens mais leves. Já vimos o TinyPNG, que serve tanto para JPG quanto PNG, otimizar em até 70% algumas imagens sem reduzir a qualidade das mesmas.

Aqui na WOWF as imagens são otimizadas automaticamente no dia em que você as sobe para o servidor. Além disso, todas as imagens são duplicadas para o formato WebP, sendo que o servidor identifica o arquivo com menor tamanho para exibir para seus visitantes. Veja um exemplo real de otimização de uma das imagens de um cliente:

➜ Tamanho original: 200.426 kb
➜ Tamanho final: 152.579 kb
➜ Tamanho WebP: 79.344 kb

Então, além do ganho com suas otimizações caseiras, garantimos um resultado ainda melhor!