Optimizing Images for Google PageSpeed

There is no limit to perfection, and Google PageSpeed to that proof. With its help you can get a detailed report on the performance of the Web page in less than a minute. In the vast majority of cases PageSpeed prompts you to optimize the graphics.

google pagespeed

For example, even on the Google Developers homepage, you can compress the graphics by 71%. The smaller the weight of pictures is - the faster the site loads. Less pictures - less traffic - everything works faster. As a result, visitors spend less time and everyone is happy.

In this article the main tools for optimizing graphics are described.

Server Tools

The most common are JPG images. Basic tools to compress them are:

  • Jpegtran  compresses pictures without loss and removes metadata:
    jpegtran -copy none -optimize -outfile output.jpg input.jpg
  • Imagemagick works with almost all the formats. The convert utility allows you to specify a quality parameter for compression which will help reduce the size of the image:
    convert input.jpg -quality 75 output.jpg

The PNG format is used for icons, logos and small-color images. Tools for optimization:

  • pngquant is a lossy-compression tool for optimizing PNG with loss of quality. The main algorithm of its work is to reduce the number of colors used. This reduces the size with a small loss in quality:
    pngquant --quality 75 —speed 1 input.png
  • pngcrush is another optimization tool for PNG. Uses lossless compression algorithm:
    pngcrush -reduce -brute in.png out.png

Online tool

In order not to waste you time on downloading and installing offline tools you can simply use our picture compressor.

PageSpeed Module

Google worked hard and released the module to Ngnix and Apache to improve site performance. It increases the download speed, optimizing many different parameters, including pictures. It works automatically, it only needs to be installed and enabled:

pagespeed on;

pagespeed FileCachePath /var/cache/nginx;

The module does everything by itself: both analyzes HTML and optimizes resources. For example, it compresses images or minimizes statics. In the source pages of the page all optimized resources will have a different path.

Direct optimization of resources

After optimizing PageSpeed saves the file in a new path. But what about the pictures displayed through JavaScript? Or with links to your pictures on third-party resources? Here comes to the rescue IPRO - the optimization of resources without departing from the ticket office, or rather not changing the URL.

To do this just include the following instructions in the config (for Nginx):

pagespeed InPlaceResourceOptimization on;