Fast website, higher speed scores & better user experience. Images take a huge portion of website’s speed. Here’s How to optimize images for best website performance – Pages, products, blog and background image sizes.
Table of content:
1. Image optimization:
1. Image format for optimum performance
If your image does not contain any transparency, then the optimum format is JPEG. If WebP is not possible then JPEG is the better choice. Here are two images, exact same dimensions, one PNG one JPEG.
PNG = 1.13 MB
JPEG = 129 KB
2. Compression
After having the final image, size and format. All that’s left is to compress it. I have only used and still use TinyPNG, the best compression tool for me. Simply go to tinypng.com upload your image, let it compress and download.
Here’s the same above JPEG image which was 129 KB, now is 62KB. Which is 52% compression, that means the page load is twice faster.
The limit per compression is 20 images, max upload size 5MB.
3. Are WebP images the best?
WebP is currently the best image format, the most compressible format. However it loses the quality, and also downloading a WebP image is not a good experience, as no program on your desktop will open it.
There are many debates whether to have all images in WebP or not. If you ask Google, they’ll say do it, which, in some cases, is enough.
2. Optimize images for best website performance:
It always, and always, depends on the purpose and the requirements of the image and where it’s going to be used. However, here are the cases in which I think there are better performing sizes, with explanation of course.
1. Blog featured images – 1200 x 630
Why? Because Facebook’s share snippet shows in that dimension. If you want to see how your URLs featured image will look on Facebook, enter your URL here.
This is how it works.
2. In blog & in page images
Usually square, or 1200 x 630 px. The reason I don’t recommend bigger sizes is simply page load. You can have 5000 x 2000 px but it’s gonna load slower, thus worse experience for visitors.
3. In page backgrounds
This is a tricky part, backgrounds are accepted to be larger, because they cover the entire width of the page. So I don’t recommend anything lesser than 1920px width. Otherwise it will look pixelated, and will give a bad sense to visitors.
4. Product images
I highly recommend them to be square, from 500 x 500 px to 1000 x 1000 px depending on the product. The reason I recommend small sizes is of course page load…
“The lighter the images the faster the page. The faster the page, the higher the rankings. The higher the rankings, the more the traffic. The more the traffic, the more the sales. The more the sales, the bigger the pool. So lighter images lead to an equal life to that of Drake & Kanye West.”
A wise man
So ALWAYS, make sure to have your images in optimum size and format. And ALWAYS compress them using TinyPNG like explained above.
