Image Optimization for Google PageSpeed

There is no limit to perfection, and Google PageSpeed ​​is proof of that. With it, in less than a minute you can get a detailed report on the performance of a Web page. In most cases, PageSpeed ​​will prompt you to optimize graphics. This is the most common problem and the most significant.



For example, even on the home page of Google Developers, you can compress graphics by 71%. The smaller the pictures weigh - the faster the site loads. Smaller pictures - less traffic - everything works faster. Visitors spend less time - everyone is happy.
')
This material is selected basic tools for optimizing graphics.

Server tools

The most frequent are images in JPG format. Basic tools:

• Jpegtran compresses images without loss and removes metadata:
  
  

  jpegtran -copy none -optimize -outfile output.jpg input.jpg 

  
  
  
• Imagemagick works with almost all 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 

  
  

PNG format is used for icons, logos and low-color images. Optimization tools:

• pngquant is a lossy compression tool for optimizing lossy PNG. The main algorithm of work - the number of colors used is reduced. This reduces size with little 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 

  
  
  

Cloud tools

• Jpegmini Excellent compresses the photos by 20 ... 30%. The creators declare that they can compress some images by 5 times without loss in quality. There is an API for automation.
• TinyPNG . A real cool optimization tool for PNG. Very good compression without noticeable loss in quality. There is also an API and a large free package.
• i.onthe.io/google_speed . Simple compression, works with any format. Convenient for one-time processing.

PageSpeed ​​module

Google bothered and released a module for Ngnix and Apache to improve the performance of sites. It increases the download speed, optimizing dofig any parameters , including pictures. It works automatically, you only need to install and enable it:

 pagespeed on; pagespeed FileCachePath /var/cache/nginx; 

The module does everything by itself - and analyzes HTML, and optimizes resources. For example, pinch pictures or minimizes statics. In the source of the page all the optimized resources will have a different path.

Direct resource optimization

After optimization, PageSpeed ​​saves the file in a new way. But what about the photos displayed via JavaScript? Or with links to your pictures on third-party resources? Here IPRO comes to the rescue - optimizing resources without departing from the cash register, or rather not changing the URL.

To do this, it is enough to include such instructions in the config (for Nginx):

 pagespeed InPlaceResourceOptimization on; 

Abstract

• Use PageSpeed ​​to find graphics problems on the site.
• If there are a lot of graphics, use the server optimization tools: jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.
• Cloud tools for one-time tasks and API connections: JPEGmini, tinyPNG, i.onthe.io/google_speed.
• The PageSpeed ​​module for Nginx / Apache will do all the optimization itself, but it needs to be assembled.