Optimizar as imagens é um dos passos mais importantes para garantir uma excelente performance de um site, seja ele criado em WordPress ou noutra plataforma.

As fotos, ilustrações e demais elementos gráficos estão entre os conteúdos mais ‘pesados’ de um site. Para evitar que se tornem uma carga negativa e tornem o teu site mais lento que um caracol, precisas de os gerir com cuidado.

As semelhanças entre o café e as imagens

Há muitas formas de servir um café em Portugal. Pode ser um café curto, normal, quase cheio, cheio, em chávena fria ou escaldada, sem princípio, sem fim ou sem princípio e fim. Enfim…

Pode parecer algo menor mas não devemos desprezar a forma como os portugueses gostam de consumir uma das bebidas nacionais.

Há quase tantas formas de servir um café como de apresentar imagens num site.

Já percebeste que este é um aspecto fundamental mas, ao mesmo tempo, alvo de alguma negligência.

Evita os erros básicos

O erro mais comum de quem gere sites é carregar imagens muito pesadas.

Algumas mesmo no seu estado original, tal como saíram da máquina, sem que tenha sido feito, de forma prévia, um trabalho de optimização. Mas já iremos a este ponto.

Outros dos erros é a escolha de um formato errado. Os mais comuns são .jpg, .png e .gif. Isto não significa que deves usar um destes de forma indiscriminada. Cada um deles tem os seus prós e contras e lugares e circunstâncias em que devem ser utilizados.

O objectivo é sempre o mesmo: fornecer uma imagem de boa qualidade no menor tempo possível de carregamento. A pensar nisso, há uns anos, o WordPress alterou a definição da compressão das imagens, que desceu de 90 para 82.

A escolha do formato: JPG vs. PNG vs. GIF

O primeiro passo para optimizar as imagens de forma a garantir um site mais leve e rápido é fazer a escolha do melhor formato.

Por norma, as fotografias devem ser mostradas em .jpg. Já os logótipos e outros gráficos devem estar em .png. Os .gif permitem imagem animadas. Se tiver mesmo de ser, usa-os apenas em condições muito particulares e preocupa-te em fazer com que os ficheiros fiquem no tamanho mais reduzido possível. Por vezes os .gif são ficheiros muito pesados.

Não uses ficheiros .tiff ou CMYK no site.

Todas as imagens que inserires no site devem estar optimizadas de forma prévia. Há diversos plugins que podes instalar no WordPress para essa tarefa, uns melhores que outros, mas a solução ideal é sempre carregares a imagem já optimizada. Por um lado, evitas aplicar mais um plugin no teu site, por outro asseguras um melhor controlo sobre a qualidade.

Como optimizar as imagens

Deves começar por editar a imagem usando uma aplicação específica.

Há dezenas de aplicações para computador e dispositivos móveis que te ajudam nesta tarefa. Qual a melhor? Depende das necessidades de cada pessoa. Mas, com a enorme diversidade existente, não terás dificuldades em encontrar uma, entre, por exemplo:

• Photoshop
• Pixelmator
• GIMP
• Paint.Net
• Fotor
• Snapseed – para iOS e para Android
• Affinity Photo
• The Convas Photo Editor

Usa uma destas, ou outra aplicação de edição, para cortar, corrigir e redimensionar as imagens às tuas necessidades.

Algumas delas permitem definir parâmetros como a compressão no momento em que são exportadas.

Mas podes ainda usar outras ferramentas específicas.

Como comprimir as imagens

Uma das nossas ferramentas de eleição para a compressão de imagens é o Tiny PNG.

Tem um site simples e intuitivo, que implica apenas arrastar da imagem que pretendemos optimizar e fazer o download da versão já comprimida.

O website planet também dispõe de um compressor de imagens muito eficiente.

Se quiseres podes usar também aplicações no teu computador como o RIOT para Windows, o ImageOptim para Mac ou o JPEG Mini para ambos os sistemas operativos.

Lossy ou Lossless?

Há dois tipos de compressão comuns que podes utilizar: Lossy ou Lossless.

Lossy: É aplicado um filtro que elimina alguns dados. Acaba por degradar a qualidade da imagem, por isso implica algum cuidado para evitar que fique visualmente destruída. Por outro lado, este facto permite reduzir o peso da imagem de uma forma considerável. A usar com ponderação.

Lossless: É aplicado um filtro que comprime dados. Não afecta a qualidade da imagem mas implica que tenha de ser descomprimida quando é apresentada.

Até onde devemos levar a compressão das imagens?

O objectivo é simples: reduzir a dimensão do ficheiro ao máximo possível sem que isso represente sacrificar a qualidade.

Aqui, como em tantas outras coisas, cada caso é um caso.

Um fotógrafo deseja apresentar o seu trabalho com a melhor qualidade possível. Portanto, irá ter opções diferentes na exigência com que trata as imagens do dono de uma empresa de canalização.

Recomendações finais para optimizar as imagens para um site mais rápido

Tudo começa antes da imagem chegar ao site. Os primeiros passos são dados no teu dispositivo, seja um computador ou equipamento móvel:

• Sempre que possível usa imagens vectoriais
• Usa compressão Gzip e comprime ainda os SVG, se os usares
• Elimina todos os dados e metadados desnecessários das imagens, usando as aplicações aqui referenciadas
• Corta e guarda as imagens nas dimensões apropriadas
• Usa fontes web em alternativa a inserires texto dentro de imagens
• Entre a Lossy ou a Lossless, opta pela última sempre que possível

Tem em conta que a velocidade de carregamento de um site depende muito das imagens que apresenta. Procura fazer com que a entrada e navegação no teu seja rápida e evita que as pessoas sintam estar numa penosa fila nas Finanças quando procuram algo no teu site.