Image Optimization for Google PageSpeed
There is no limit to perfection, and Google PageSpeed is proof of that. Using it, you can get a detailed report on the performance of a Web page in less than a minute. In the vast majority of cases, PageSpeed will tell you that you need to optimize the graphics. This is the most common and most significant problem.
For example, even on the Google Developers start page, graphics can be squeezed by 71%. The less pictures weigh - the faster the site loads. Smaller images - less traffic - everything works faster. Visitors spend less time - everyone is happy.
In this material, the main tools for optimizing graphics are selected.
The most common are JPG images. Basic tools:
The PNG format is used for icons, logos and low color images. Optimization Tools:
Google worked hard and released a module for Ngnix and Apache to improve site performance. It increases the download speed, optimizing the dofig of any parameters , including pictures. It works automatically, you only need to install and enable it:
The module does everything by itself - and parses HTML, and optimizes resources. For example, pinches pictures or minifies statics. In the page source, all optimized resources will have a different path.
After optimization, PageSpeed saves the file in a new path. But what about photos displayed via JavaScript? Or with links to your photos on third-party resources? Here IPRO comes to the rescue - optimization of resources without leaving the cash desk, or rather without changing the URL.
To do this, just include the following instructions in the config (for Nginx):
Server tools
The most common are JPG images. Basic tools:
- Jpegtran compresses images without loss and deletes metadata:
jpegtran -copy none -optimize -outfile output.jpg input.jpg
- Imagemagick works with almost all formats. The convert utility allows you to specify the quality parameter for compression, which will help reduce the image size:
convert input.jpg -quality 75 output.jpg
The PNG format is used for icons, logos and low color images. Optimization Tools:
- pngquant is a lossy compression tool for optimizing PNG with lossy quality. The main algorithm of work is 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 a lossless compression algorithm:
pngcrush -reduce -brute in.png out.png
Cloud tools
- JPEGmini . It perfectly compresses pictures by 20 ... 30%. The creators claim that they can compress some images 5 times without loss in quality. There is an API for automation.
- TinyPNG . A really cool optimization tool for PNG. Very good compression with no noticeable loss in quality. There is also an API and a large free package.
- i.onthe.io/google_speed . Simple compressor, works with any format. Convenient for one-time processing.
PageSpeed Module
Google worked hard and released a module for Ngnix and Apache to improve site performance. It increases the download speed, optimizing the dofig of any parameters , including pictures. It works automatically, you only need to install and enable it:
pagespeedon;
pagespeed FileCachePath /var/cache/nginx;
The module does everything by itself - and parses HTML, and optimizes resources. For example, pinches pictures or minifies statics. In the page source, all optimized resources will have a different path.
Direct resource optimization
After optimization, PageSpeed saves the file in a new path. But what about photos displayed via JavaScript? Or with links to your photos on third-party resources? Here IPRO comes to the rescue - optimization of resources without leaving the cash desk, or rather without changing the URL.
To do this, just include the following 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 server-side 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 built.
