Mobile First Website Design, Web Performance Audits and Website Hosting

Examples of image sizes for use with the srcset attribute

Skip to main content

This page demonstrates the differences in image / picture widths and the optimised file sizes associated with each image. It really only works on a large monitor as the largest image is 2000px wide and fills the full width of my 22" desktop monitor. If you are reading this using a mobile device or tablet then it will not really display the physical width of the images shown. The images will shrink to fit your screen as the page is using a responsive layout design. You can always come back later and look at again on your home desktop computer if you have one.

At the bottom of the page is an explanation and also a link to the Google PageSpeed Insights report on this page.

Optimised image 320px wide. File size 13KB

Phone optimised image 320px wide. Image file size 13KB.

Optimised image 600px wide. File size 34KB

Tablet optimised image 600px wide. Image file size 34KB.

Optimised image 820px wide. File size 53KB

Tablet optimised image 800px wide. Image file size 53KB.

Optimised image 1000px wide, File size 74KB

Laptop screen optimised image 1000px wide. Image file size 74KB.

Optimised image 1200px wide, File size 96KB

Screen optimised image 1200px wide. Image file size 96KB.

Optimised image 1400px wide. File size 121KB

Screen optimised image 1400px wide. Image file size 121KB.

Optimised Image 1600px wide. File size 147KB

Large Desktop Screen optimised image 1600px wide. Image file size 147KB.

Optimised Image 1800px wide. File size 189KB

Large Desktop Screen optimised image 1800px wide. Image file size 189KB.

Optimised image 2000px wide. File size 219KB

Large 22" Monitor Screen optimised image 2000px wide. Image file size 219KB.

If you have scrolled this far down then well done, hopefully you will now appreciate the differences in image file widths and their respective image sizes when optimised. However what does Google think of this page? I mean there are 8 image files loaded to demonstrate different image sizes. It is a lot of pictures, surely this will affect the Google webmasters PageSpeed Insights reports - well have a look at it and see for yourself.

Google PageSpeed Insights Report for this web page

The secrete is not the number of pictures / images you use on a website page, it is whether you have optimised the images for website use, and if your site is designed to be Responsive Mobile First.

Obviously there is a balance – if you have hundreds of images and pictures on a web page it can at some point affect your PageSpeed score as the actual time it takes to download the web page could be excessive. Ideally use images and pictures where it will enhance the message you are communicating with your visitor, not just for the sake of having pretty pictures all over the place.