3 maneiras de deixar imagens mais leves antes de publicá-las em seu site

Saiba como otimizar as imagens do seu site para que você possa aplicar fotos com boa qualidade e não prejudicar a navegação em seu site deixando-o “pesado”.

Antes de tudo, devemos concordar que ninguém no mundo gosta de entrar em um site e ficar esperando a página carregar, certo?!

Talvez nos anos 90 e começo dos anos 2000 isso não fosse problema, afinal, somos filhos da internet discada. Mas hoje estamos “mal-acostumados” com hardwares e softwares topo de linha na palma de nossas mãos, e, quando estamos navegando em alta velocidade e “topamos” em alguma página lenta, estraga toda a experiência.

Você não quer que a sua empresa seja essa pedra no caminho, não é mesmo?!

Compressão de Imagens

Cada foto digital que você vê é um composto de dados e pixels que formam as imagens. Para quem está familiarizado com o photoshop ou outro programa de edicação de imagens, sabe que cada cor possui seu valor descrito, como o preto “#000000” e o branco “#ffffff”, por exemplo.

Na composição de uma foto, cada cor e dados são repetidos para a construção da imagem pixel após pixel, ou seja, uma foto que possui 60 mil pixels pretos, hipoteticamente, vai repetir o “#000000” 60 mil vezes, sem contar as demais cores presentes na imagem.

A compressão de imagem trabalha para diminuir essa repetição de dados e pixels já utilizados, diminuindo assim o tamanho do arquivo final.

Existem duas formas de compressão de dados, sendo a lossless (sem perda de dados) utilizada por profissionais, como fotógrafos, que precisam trabalhar com a maior qualidade da imagem possível, necessitando também de extensões com maiores recursos, como PNG e TIFF. E também existe a lossy (com perda de dados) que é a forma de compressão mais utilizada para web, pois, apesar de aplicar uma pequena perda na qualidade da imagem (nada muito notável), aplica uma otimização de até 90% do tamanho do arquivo. As extensões mais utilizadas são JPG, JPEG e GIF.

Vamos ver agora modos de como podemos comprimir as imagens e otimizá-las para o seu site.

Softwares de Otimização de Imagens

Photoshop

Para quem conhece e trabalha com o editor de imagens Photoshop já possui uma vantagem de tratar a imagem e otimizá-la para o seu site.

De forma resumida, é possível otimizar a imagem de forma prática na hora de salvá-la. Basta selecionar a opção “Salvar para Web”, selecionar a extenção “JPG” ou “JPEG” para fotos (utilize PNG apenas para ilustrações e imagens de layout) e selecionar o nível de qualidade entre “baixa”, “média” e “muito alta”. Pronto!

Caso você esteja começando a utilizar o photoshop e não tenha muita prática, pode utilizar este passo a passo clicando aqui.

RIOT

Se você utiliza Windows, este programa é bem completo e vai facilitar muito sua vida na hora de otimizar imagens sem problemas.

ImageOptim

Programa para quem utiliza Mac, é bem leve e fácil de utilizar. Se você possui um volume grande de imagens para otimizar ele pode agilizar o processo.

Trimage

Esse programa é para quem utiliza Linux, e assim como o sistema operacional, sabemos que foi muito bem desenvolvido e otimizará suas imagens e tempo de trabalho.

Sites Para Otimização de Imagens

Se você tem um volume baixo de imagens para otimizar, ou simplesmente não quer instalar softwares no seu computador para otimizar imagens, podemos indicar alguns sites que permitem que você faça isso com as mãos nas costas:

Plugin Para WordPress

Para quem utiliza o (nosso queridinho) WordPress a vida pode ser ainda mais fácil (para variar, né?!).
Como tudo, a plataforma WordPress também nos ajuda na hora de otimizar imagens, isso graças ao plugin EWWW Image Optimizer.

Basta instalar o plugin, configurá-lo e pronto, a “mágica” passa a acontecer! As imagens que você subir a partir deste momento serão otimizadas automaticamente, e também pode otimizar as antigas.
Se precisar de ajuda para configurar o plugin você pode ler este post do Janio.

Depois de otimizar as imagens do seu site você pode conferir se realmente ele está com a velocidade ideal, utilizando a Page Speed Insights, do Google, ou também a WebPageTest e Pingdom, que é um pouco mais complexo, visto que analisam as imagens e também scripts e plugins.

Deixe seu comentário