Otimizar imagens, LOSSY ou LOSSLESS?

Ter um site performático é requisito número 1 e com o crescente uso de imagens, Javascript e CSS, tornou-se uma tarefa árdua.

Com base nos dados retirado do site HTTP Archive na data deste post, podemos ver que as imagens ocupa a maior fatia de todo conteúdo da página:

Sendo assim, melhorando as imagens já é meio caminho andado e para isso existe algumas ferramentas que podem realizar esta otimização.

Lossless

Modo ideal para quem precisa otimizar pouco e trabalhar com imagem em alta qualidade.

• Sem perda de qualidade na imagem
• Redução de tamanho relativamente baixa, pois é removido apenas os metadados da imagem (horário da foto, coordenadas de GPS, dados do editor, miniatura embutida e etc)

Lossy

Modo para obter o maior ganho de performance, os serviços que oferecem este modo utilizam um algoritmo que promete simular as características da percepção do olho humano, o que lhes permite piorar a qualidade da imagem apenas em pontos que são pouco percebidos pelo nosso olhar.

• "Perda de qualidade" na imagem
• Redução de tamanho significativa

Particularmente sempre escolho o modo Lossy para colocar os sites em produção.

Ferramentas

Kraken.io: Oferece o serviço free e pago, possui diversas opções para o envio das imagens (Upload, DropBox, Google Drive), é possível optar pela otimização Lossy ou Lossless e algumas outras funcionalidades a mais.

TinyPNG: Serviço free, o envio das imagens é feito via upload, trabalha apenas com o modo Lossy.

SVGOMG: Utilizado para otimizar SVG.

Podemos optar ainda por alguns serviços offline como o ImageOptim (apenas otimização Lossless) para OSx e para Windows temos o Riot, ou ainda adotar o Gulp para automatizar esta tarefa, basta configurar uma task para otimizar as imagens do projeto e rodar um comando. 🙂