2

Eu estava seguindo alguns conselhos do PageSpeed Insights da Google e um deles é:

Formatar e compactar corretamente imagens pode economizar muitos bytes de dados.

Entretanto eu já otimizei elas com um programa - JpegMini - e mesmo assim ainda permanece a sugestão de otimizar as imagens (mesmo após os 30 segundos). Existe alguma outra maneira de otimizá-las?

1

2 Respostas 2

3

OptiPNG:

$ optipng /tmp/saturno.png
** Processing: /tmp/saturno.png
1041x1041 pixels, 8 bits/pixel, 195 colors in palette
Input IDAT size = 119947 bytes
Input file size = 120793 bytes

Trying:
  zc = 9  zm = 8  zs = 0  f = 0     IDAT size = 118148
  zc = 9  zm = 8  zs = 1  f = 5     IDAT size = 113455
  zc = 9  zm = 8  zs = 3  f = 5     IDAT size = 112036

Selecting parameters:
  zc = 9  zm = 8  zs = 3  f = 5     IDAT size = 112036

Output IDAT size = 112036 bytes (7911 bytes decrease)
Output file size = 112846 bytes (7947 bytes = 6.58% decrease)

jpegoptim:

$ jpegoptim /tmp/jupiter.jpg 
/tmp/jupiter.jpg 1920x1080 24bit N Exif IPTC XMP ICC Adobe  [OK] 175249 --> 174634 bytes (0.35%), optimized.

Fontes: Imagem JPG e PNG

1

Imagemin

Uma alternativa seria o imagemin, via terminal usando o imagemin-cli ou se preferirem via aplicação imagemin-app, mas esta última não funciona tão bem (pelo a versão testado). Existe também a possibilidade via Grunt ou Gulp.

No caso se usar via terminal imagemin-cli:

# instalar o imagemin via npm
npm install -g imagemin-cli

# optimizar todas as imagens JPG/PNG/SVG de uma pasta
imagemin pasta_com_images/* -o pasta_de_destino/

Utilizando as imagens de referência (ver abaixo) para comparação verifica-se que:

  • c-1920.jpg teve uma redução de 6,7%
  • pia01969-saturn-voyager1.png teve uma redução de 11,8%

ImageOptim

Outra alternativa apenas para imagens bitmap, seria o ImageOptim, via terminal usando o Imageoptim-cli ou se preferirem via aplicação imageoptim para MAC OS, ou para outras plataformas. Existe também a possibilidade via Grunt ou Gulp.

No caso se usar via terminal imageoptim-cli:

# instalar via npm
npm install -g imageoptim-cli

# optimizar todas as imagens JPG/PNG de uma pasta
imageoptim -d ./pasta_com_images/

Utilizando as imagens de referência para comparação verifica-se que:

  • c-1920.jpg teve uma redução de 21,1%
  • pia01969-saturn-voyager1.png teve uma redução de 10,7%

Resumo

Por esta pequena experiência o ImageOptim reduziu consideravelmente mais a imagem JPEG do que o Imagemin (21,1% em vez dos 6,7%). Já a imagem PNG foram próximas, obtendo o imagemin melhor redução (11,8% em vez dos 10,7% do ImageOptim). Por outro lado o imagemin optimiza também imagens SVG.

Para a comparação efetuada foi utilizando as imagens fonte JPG e PNG utilizados na resposta do Lacobus.

Para outros exemplos ver a seguinte comparação

Espero que ajude alguém!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .