Como otimizar imagens para web [softwares, sites e plugins]

Uma das principais causas de lentidão em sites e aplicativos é o uso inadequado de imagens. Aprenda como otimizar imagens para web, torne-as poderosas aliadas às ferramentas de busca e contribua para uma maior taxa de permanência.

Entender o básico sobre compressão, qualidade da imagem e vantagens no uso de cada tipo de imagem nos possibilita fazer escolhas melhores. Isso pode significar imagens em melhor qualidade e com maior velocidade de carregamento.

O que é otimizar uma imagem?

Uma imagem otimizada significa que ela possui alta performance, ou seja:

• Alta qualidade de formato de arquivo;
• Tamanho do arquivo em dimensões ideais – utiliza o menor valor seguro possível.

Por que otimizar imagens para web?

A partir de relatórios feitos em milhares de sites, identificaram que o tempo ideal de carregamento de um site é de, no máximo 3 segundos. Falta de paciência ou não, o que o estudo aponta é que mais da metade dos visitantes desistem, caso o intervalo seja superior a esse tempo. Além disso, imagens otimizadas:

• Aprimoram a experiência do usuário;
• Reduzem o abandono precoce do usuário;
• Permitem que o visitante se aprofunde e visite mais páginas do site;
• Melhoram o rankeamento, sua posição nos mecanismos de busca  – mais chances frente aos concorrentes, sem custos.

Erros comuns cometidos na hora de escolher o tipo de arquivo:

• Tamanho inadequado – imagens grandes na altura e largura;
• Formato inadequado – cada formato tem um melhor uso em determinada situação;
• Imagens pesadas – excesso de KB;
• Menor armazenamento e largura de banda – possível economia em hospedagem e CDN (Content Delivery Network – Rede de Distribuição de Conteúdo;
• Backups mais rápidos do conteúdo do site.

Como otimizar imagens para web

Você pode fazer a otimização da imagem original, utilizando um software gráfico, site, utilitário do computador ou pluging.

Usando o Photoshop

1. Abra a imagem no Photoshop;
2. Menu “File” (Arquivo) > “Save for Web” (Salvar para Web);
3. Na caixa de diálogo, escolha a opção JPEG e uma das opções de qualidade;
4. Pode clicar em “Preview” para ver como a imagem ficou e clique em “Save” para confirmar.

Usando o GIMP

1. Abra a imagem no GIMP;
2. Menu Arquivo > Exportar como;
3. Na caixa de diálogo, nomeie o arquivo e clique em “Exportar”.

Usando o Affinity Photo

1. Abra a imagen no Affinity Photo;
2. Menu “File” > “Export”;
3. Na caixa de diálogo, escolha a opção JPEG;
4. Reduza a qualidade da imagem para em torno dos 80%;
5. Na parte inferior da caixa de exportação, clique em “More” (Mais) e selecione “Progressive” (Progressivo);
6. Desmarque “Embed ICC Profile” (Incorporar Perfil ICC) e “Embed Metadata” (Incorporar Metadados);
7. Clique em “Close” (Fechar).

Remover os metadados anexados à imagem faz com que o que não é necessário para a web seja eliminado, tornando a imagem mais leve.

Algumas sugestões de medidas:

• Banner grandes: 1200px – 1400px;
• Imagens que são metade da página da web e além do conteúdo: de 600px a 800px;
• Imagens menores e thumbnails: de 250px a 450 px.

Usando o site  TinyPNG/TinyJPG

Ambos são aplicativos gratuitos que usam uma técnica inteligente de compactação com alguma perda ao reduzir o tamanho de arquivos PNG e JPG, respectivamente.

1. Visite o site TinyPNG/TinyJPG;
2. Faça upload ou simplesmente arraste e solte as imagens na caixa indicada;
3. Terminada a compactação, faça download dos arquivos.

Eles também têm uma extensão para Photoshop que combina o melhor do TinyPNG e TinyJPG dentro do Photoshop.

Usando o site JPEG Mini

Usa uma tecnologia de compactação sem perdas, que reduz significativamente o tamanho das imagens, sem afetar a qualidade e com comparativo em tempo real da qualidade de sua imagem original e a imagem compactada.

Você pode usar a versão web gratuitamente ou comprar o programa para o seu computador. Eles também têm uma API paga para automatizar o processo para o seu servidor.

Usando o utilitário ImageOptim (iOS) ou o Trimage (Windows)

Para quem preferir usar utilitários, ambos permitem compactação sem perda de qualidade, buscando melhores parâmetros de compactação ao remover perfis de cores desnecessários.

Usando plugins de otimização de imagens para o WordPress

Se você possui um site com vários autores e precisa de uma solução automatizada, pode experimentar um plugin de compactação de imagens do WordPress. O uso de qualquer um desses o ajudará a acelerar seu site.

1. Optimiole – plugin popular pela equipe por trás do ThemeIsle;
2. EWWW Image Optimizer – permite otimizar imagens automaticamente durante o download, de imagens mais antigas, com a vantagem de otimizar imagens geradas por outros plugins do WordPress e armazenadas fora da sua biblioteca de mídias.
3. Compress JPG & PNG images – plugin da equipe TinyPNG. Exige criar conta e tem limite de 100 fotos otimizadas por mês, na conta gratuita;
4. Imagify – plugin da WP Rocket. Comprime as imagens, baseando-se em algoritmos. Restaura as imagens da galeria automaticamente, quando desinstalado.
5. ShortPixel – otimiza as imagens assim que o plugin é ativado e armazena as imagens originais em uma pasta separada. A conta gratuita só permite 100 imagens por mês;
6. Smush – detecta imagens que são maiores do que o espaço em que ela está sendo usada. O plugin destaca a imagem no site para que ela seja otimizada para o tamanho exato e pode otimizar várias imagens simultaneamente;
   
7. reSmush.it – permite otimizar imagens automaticamente durante o download e oferece opção de otimização de imagens mais antigas. Se você não está procurando opções muito flexíveis de compactação de imagens, ele oferece o melhor desempenho, fazendo diferença real no tamanho do arquivo.

Com informações: hobo e wpbeginner. 

Receba mais sobre Web na sua caixa de entrada

E-mail:

* ao se inscrever você aceita a nossa política de privacidade