Google Page Speed Optimization for Images
I must tell you straight away, that the article was written in February 2017, and only Google knows how long the research will be relevant.
At the end of the article there is also a short conclusion and a comparative table with all the data pertaining to PageSpeed Insight.
So, this is what I managed to find out and what I recommend.
Let’s start with the fact that PageSpeed Insight is “interested” in 2 parameters of an image:
- The maximum degree of its compression, without particular visual loss of quality (at the discretion of PSI).
- Its size is relation to the viewport (browsing port?) or to the container in which it lies.
Let’s begin with the first one. There are a few ways to compress an image.
To compress images you can take advantage of online services or download desktop version of these programmes.
Here are some of them:
- http://www.jpegmini.com – both online and desktop version,
- https://compressor.io – compresses images more efficiently than others from our list.
- Download archive with optimized images after your check yours site.
Optimization of images on server
- plugins for CMS (example for CMS WordPress – https://wordpress.org/plugins/optimus)
It is worth mentioning that the “WebP” format was created back in 2010 by Google for compressing images. Its advantage is a faster image loading process. However, as always, the support by browsers leaves much to be desired: it is only the Chrome browser (starting from the 9th version) and that is all! If you want to use other browsers you should plug the libwebpjs/libwebpas JS library (http://libwebpjs.appspot.com/).
And now the most interesting point,to be exact, the research which was done based on the image resolution and its affect on PSI rank.
By selection it was found that PageSpeed Insight checks and browses with a resolution of 1024px for the desktop, and for mobile – 412px. I just need to say that PageSpeed Insight does not browse from real devices, but uses a chrome engine, which emulates both devices, desktop and mobile.
The further story gets more and more interesting…
What maximum size of an image should one define to keep the PageSpeed Insight “pleased”?
For the Desktop
The image should not be more than 2 times bigger (from the original size) – “1px”. If we have a full-width image, its width should be no more than “2047px” and if we have a container with a fixed width, then the image should not be more than 2 times bigger – “1px” from the width of the container.
For mobile phones it is a coefficient of 5.25 – “1px”, i.e. if we have a full-width image, then its width should be no more than 2162px (‘412px’ * 5.25 – ‘1px’), and if we have a container with a fixed width, then image width = (‘width container’ * 5.25 -‘1px ‘).
<picture> <source srcset="img_desktop.jpg, img_desktop.jpg 2x, img_desktop.jpg 3x” media="(min-width: 1024px)"> <img src="images/img_fallback.jpg" alt=""> </picture>
PageSpeed Insight takes from srcset 1x image and if the image is optimized and will be no more than 2047px – then everything will be ok!
Example for Mobile:
For the mobile phone “412 px” * 5.25 = “2163 px” – “1px”.
img mobile 3x – 2162px.
<picture> <source srcset="img_mobile, img_mobile 2x, img_mobile 3x, img_mobile 4x” media="(min-width: 412px)"> <img src="images/img_fallback.jpg" alt=""> </picture>
From srcset PageSpeed Insight takes 3x image (yes it is 3x) and if the image is optimized and is no more than 2162px – then everything will be ok! )))
The following example is also for mobile and consists of only two images:
<picture> <source srcset="img_desktop.jpg, img_desktop.jpg 2x, img_desktop.jpg 3x” media="(min-width: 1024px)"> <img src="images/img_fallback.jpg alt=""> </picture>
PageSpeed Insight will take a 2x image and again its size should be no more than 2162px.
So now we know that the image size should not exceed 2162px, regardless of which resolution media queries (1x, 2x, 3x, nx) you use.
PageSpeed Insight parses images from 3x and downward, 2x, 1x, if srcset consists of 1х and 2х – it will parses 2х.
|Google speed insight browsers from, if srcset consists of 1х and 2х – will parse 2х.||412px||1024px|
|ratio for images||5,25 – ‘1px’||2 – ‘1px’|
|Resolution media queries||3x (max)||1x|
|Image max. width (without container)||2162px = (‘412px’ * 5.25 – ‘1px’)||2047px = (‘1024px’ * 2 – ‘1px’)|
|Image max. width (with container)||image width = (‘width container’ * 5.25 -‘1px’);||image width = (‘width container’ * 2 – ‘1px’);|
Be sure to optimize and compress images using online services or through server-side way.
Follow the instructions for image sizes and you will get a high rank from PageSpeed Insight.
Stay in touch