Well, it improves the load time of your website, this is because there is less for the browser to download. This is more exaggerated for mobile devices where the user is accessing your website via mobile data and therefore has a slower (normally) internet connection than someone on Wi-Fi, so in this case less is more!
We have all gone to a website where they have a large image and you can see lines being drawn across your browser as it loads and renders the image and it is one of the most annoying issues whilst waiting for a page to load.
You can use different image types, this is because some are smaller than others (e.g. a .jpg file is smaller than a .png file of the same image).
This is due to the quality of the image and whether the format is loss-less or not.
The image that I used I got from:
Its dimensions are 2559 x 1437 & it is a .png
To optimize images there are a few options.
If the image is a .png then one of the easiest ways is to do the following:
As you can see this is already a massive saving.
But what if the image was still too large for where it is going to be used (in dimensions e.g. width by height)? In my case (I needed an image that was 400px by 225px).
If so then using paint.NET you can resize an image very easily, to do this do the following:
But what kind of saving can I make if I use both of these simple techniques you ask, well if I resize the image and lower its quality then the results are:
Original .png: 6247.6KB (6.1MB)
Smaller jpg (saved as 90% quality): 31.2KB
This is a massive saving of 6216.4KB (198%) which will greatly improve the load time of my page.
I hope that this blog post was useful, if you have any comments regarding how to optimize your images then let us know!
We'd love to welcome you into our office! We're only 20 miles north of Peterborough, conveniently just off the A16.
Apex Court, Elsoms Way