Use Case: Improve Google PageSpeed / Lighthouse Image Opportunities

Written by: Ruud van Lent Published: 01 July 2020

Category: Best Practice

Evergreen BlogHits: 5677Reading time: 03:48

When you display an image on a blog or webpage, should it have a high resolution for large desktop views or are you better of with a small resolution for on mobile devices? What is the impact of the image size on #SEO? Loading a large image and then down scaling it on smaller devices is not good and will impact your page speed and #SEO ranking negatively. What is the best solution here? What is the best average image size to use that will suit all situations? What is the deal about Google's WebP Image format? Why is it so powerfull for your #SEO?

Challenge: How can I pass the 'Properly size images', 'Efficiently encode images' and 'Serve images in nextgen formats' audit opportunities

We have come a long way when it comes to websites, templates and client devices / browsers. Images are a very important factor in getting your message to your potential customer.

But images are also big, putting load on your server and your bandwidth, slowing your website and are hard to maintain: what image size is best for what client device.

What image format should you use: jpg or png? Or should I use Google's own WebP format because it has a very Efficient footprint (size) of up to 35% smaller then jpg format. WebP seems very powerfull but is not supported on all devices....

And what is the best image resolution. Using an average image size will at most give your users an 'average' viewing quality and will likely still negatively impact your sites #SEO.

Image sizes, network speeds, device screen sizes and lately with mobile devices the screen dpi make selecting the perfect image size impossible: it will always be at most a compromise.

An image with a 1920px width will look good on a desktop with a 1920px display, it will also look good on all devices with a lower screen width, but Google will not be pleased: why use a large 1920px wide image on a device where the max image width is 360px?

An image with a width of 360px will load lighting fast and will be good for #SEO, and although the image looks great on mobile device with a screen with of 360px and dpi of 1, it will look blurred on larger screens as the image needs to be up scaled.

Solution: ochResponsiveImages with WebP support

ochresponsiveImages will automatically create image source sets for your images. An image source set consists of multiple sized images from which the visitors browser can then automatically select and download the best size.

When your server's PHP GD Library supports WebP, ochresponsiveImages will not only create different sizes of the image in its original format (jpg or png), but will also create an additional set of images in the superb WebP format. When the browser supports WebP, ochresponsiveImages will serve these images in the source set instead of the original images (jpg / png).

Why not offer multiple sizes of the images in both original (jpg / png) and WebP format and let the browser decide what image is best suited for the device the user is visiting your site with?

So instead of serving one 'average' image, you serve multiple images, ranging from best fit for desktop to best fit for small mobile screens. Depending on the screen size, the screen dpi and the network speed, the browser will download the best possible image and display that to your visitor. And if your visitors' browser supports WebP format, it can use these instead of the slow jpg / png images.

Enter the world of image source sets and WebP!

ochResponsiveImages will handle this for you automatically: no changes on your side needed, no more manually resizing and converting images!

1. you upload and insert the largest possible image into your blog or article (e.g. 3000px wide)
2. ochResponsiveImages will create seperate images for each configured device width (e.g. 1920px, 1360px, 1024px, 768px, 460px, etc.)
3. ochResponsiveImages will create seperate images in the superb WebP format when your server supports it
4. ochResponsiveImages will automatically replace the image code with the image srcset code, injecting all the created images

ochResponsive images works 'on-the-fly'! when you change the resolution in the configuration, ALL article and blog images are directly converted to these new sizes and the src-sets are using this new setting!

Result: your site will be faster, look great and Google will love you (which is good for #SEO)

And even more, you finally have time to do more important things on your website than resizing, converting and uploading images.

Interesting blog? Like it on Facebook, Post it or share this article on other bookmarking websites.

 

Written by: Ruud van Lent

Pro-BloggerTop BloggerThought Leader

With a solid background in ICT (operational, tactical and strategic) and years of experience in the community life, I see in communities and community thinking the future for companies.

This future requires another way of thinking and doing; both for executives and employees. It's not about me; it's about you. Your well-being and your (personal) growth.

'What comes around - goes around'

In the world of communities, the old 'management laws' no longer work and are even counterproductive.

I coach leaders and organizations in their quest for how new and servant leadership can contribute to communities and community thinking, and as a result to the growth of the organization.

I do this from the following initiatives:

• ruudOntwikkelt | Leadership coaching and Organisation development
• Platform Lerende Leiders | The #1 Community for and by Leaders
• Onlinecommunityhub | It's all about the Community...