How to optimize images?

Asked

Viewed 151 times

2

I was following some advice from Google’s Pagespeed Insights and one of them is:

Properly formatting and compressing images can save many bytes of data.

However I have already optimised them with a program - Jpegmini - and yet still remains the suggestion to optimize the images (even after 30 seconds). Is there any other way to optimize them?

image optimizing pagespeed-insights

2 answers

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.

Sources: Image JPG and PNG

1

Image

An alternative would be the picture, via terminal using the image-cli or if you prefer via imagemin-app, but the latter does not work as well (by the tested version). There is also the possibility via Grunt or Gulp.

If used 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/

Using the reference images (see below) for comparison it is found that:

  • c-1920.jpg had a reduction of 6,7%
  • pia01969-saturn-voyager1.png had a reduction of 11,8%

Imageoptim

Another alternative only for bitmap images, would be the Imageoptim, via terminal using the Imageoptim-cli or if you prefer via imageoptim for MAC OS, or to other platforms. There is also the possibility via Grunt or Gulp.

If used 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/

Using the reference images for comparison, it is found that:

  • c-1920.jpg had a reduction of 21,1%
  • pia01969-saturn-voyager1.png had a reduction of 10,7%

Summary

By this small experiment Imageoptim reduced the JPEG image considerably more than Imagemin (21.1% instead of 6.7%). On the other hand, the PNG image was close, obtaining a better reduction (11.8% instead of 10.7% of Imageoptim). On the other hand, the imagemin also optimizes SVG images.

For the comparison made it was using the source images JPG and PNG used in the Lacobus response.

For other examples see the following comparison

I hope you help someone!

Browser other questions tagged image optimizing pagespeed-insights

You are not signed in. Login or sign up in order to post.