When Almost Every KB Counts

A quick update about my eCommerce project and a follow up to my previous post about speed. I didn't mention that I also activated the Performance/CDN feature from Jetpack. I didn't think to mention it because it was active when I ran the test and before I installed WP Fastest Cache. At that point, the site was loading between 2 and 5 seconds so I didn't think that Jetpack was making a huge impact.

But as I was trying to come up with some new graphics for the homepage, I noticed that my images were being served from a Jetpack-based URL. This served as a good reminder to be mindful of the size of the new banner I was making.

I thought I'd share some thoughts about image size with you if you're interested. After I finished my design, I went to export the image from Photoshop and this is what I found:

Using PNG

The image is 680px by 358px. Initially, I wanted to export it as a PNG to take advantage of the transparency in case I decide to change the background color where the image is going to be displayed. This means that If I changed the background on the website, I wouldn't have to update the banner image to match. But this made the total image size 167KB. This image alone would be almost as heavy as the homepage without it, as you can see in the previous post the homepage is only 228KB right now and I'd love to keep it under 1MB ?.

Using JPEG

The easiest answer to reducing the size of this image was to use the JPEG export option instead of PNG. JPEG has better compression and the size difference is a significant gain. Compromising on making the background a solid color, white in this case isn't a big deal, so I tested that out. Using JPEG reduced the image by over 50% to a size of 89 KB. Huge difference!

But then if I'm going to use JPEG I also should also reduce the quality during export. I remember reading years ago somewhere that people can't tell the difference between an image exported at 100% quality vs one exported at 85% to 87% quality so I turned the quality down to 85%. This brought down the size by another 36KB for a total size of 52KB; that's a little bit less than one third from the original PNG size. Can't complain about that!

But what about WebP

Ideally, I should use WebP if I want the smallest size, but for the sake of expediency, I'll leave that for a round of fine-tuning that I can do after launch. Doing this right now could add more work, more time, more plugins, or all of the above. And I'm already late in launching this. Besides, I did a quick test by converting the full-size PNG that I mentioned to WebP and it turned out to be 47KB, not a huge difference between that and the JPEG.

TL;DR

If that was too geeky for you, or too long for you, when you create images you need to keep quality high but also mind the size of the images so your visitors can have the best and fastest experience you're able to offer. In this example, I reduced an image from about 167KB to 52KB, a size savings of about 70%. If you're using Photoshop, use the export to JPEG feature, not the save as feature, and reduce your original image quality to 85%. If you're not using Photoshop, maybe you're using something like Canva, you can find a ton of image optimizer sites out there.