Who do you love more? Smaller file sizes or higher quality images?
We all want high quality pictures for whatever project we are working on. Whether it’s a website, a social media post, a printed picture, we want it to look the best it can. The issue is, if we save the file at its’ highest quality options, that leaves us with a huge file size that will take a long time to render, leaving the user a little confused as to why the page they are looking at seems incomplete, only to have it finish loading 15 seconds later.
Let’s take a look at a few different images and see for ourselves the differences in higher quality vs lower quality.
This is the image we will be examining. I have accurately named this image “Sad Hat”.
One of these is the 7.8 MB file size, and the other is the 341 KB. Can you tell which is which? Initially, they look pretty darn similar to me. Let’s zoom in a little bit and take a closer look.
Notice that little strand coming off marked by the blue X. The image on the left looks smooth and un-breaking. However, the image on the right is getting pixelated and you start to lose some of that smoothness. Now look at the red X. On the left, the dark colors look how they would if you were to see this hat in person. On the right, you can see some pinkish/red spots. You guessed it, the image on the left is the larger 7.8 MB, while the one on the right is the smaller 341 KB.
Testing
Let’s take a look at what that difference in file size looks like in the real world. To test this, I will need to have them both appear on a web page, and compare the loading times between the two. For this, I fired up Visual Studio Code and got cracking. Luckily, the ‘create-react-app’ library makes it super easy to quickly put together web pages.
For this test, I gave both images a height and a width of 700 px. Doing so made it so it is big enough that we can still see a lot of that detail in the images, but not too big that the image takes over the entire screen.
The difference here is quite obvious. Imagine if you were going to a website, and the main image loaded like the image on the right did. An image loading at this speed would really mess up the user’s experience. A lot of the times, your goal as a developer or designer is to have the user get immersed in your product so much so they forget they are looking at a computer. Having images that slow down a page this much would completely throw away any idea of immersion.
Why Does This Matter?
It is pretty easy to just assume the higher quality picture is better, and forget about that few extra seconds it takes to load, but those loading times are extremely important.
If two web pages had the same or similar information, but one was ready to roll as soon as you opened it, and the other took a few seconds to get everything else to load, which one would you stay on? The main factor that slows a web page down is images. Doing your images properly can make or break your site.
When exploring ways I could improve my site, I can across a nice tool called Image Speed. (https://imagespeedtest.piio.co/). For this site, you can enter in the URL to your site, and it will give you a grade for how quickly your images load. It also gives advice on ways you can get better performance from your images.
On this site, they have some pretty big statistics
$ 1.6B
Did you know that if Amazon took just one more second to load, it would lose $1.6 billion per year?
1 sec, 20% off
A one-second delay in a mobile decreases conversions by up to 20%
High bounce-rate
Slow loading website could be hurting sales, conversions, and your SEO.
It is crazy to me that Amazon could lose that much money if their homepage took an extra 1 second load for their users. For me, that is inspiring. As a web developer, it is not necessarily about coming up with the best ideas and products, but executing others’ ideas in the best way possible.
I decided to give the image comparison one more shot, to see the quickest I could make an image load. This time, I am using 4 images, and in left to right their file sizes are 14KB, 155KB, 341KB and 7.8MB. The differences here are quite impressive. The 14 KB image loads almost instantly, and because it loads so fast it makes the other two 155 KB and 341 KB look pretty slow, even though they are not huge file sizes to begin with. Of course the 7.8 MB shows up extremely late to the party.
My Take Away
Higher quality images does not always mean a higher quality experience on your site. Each thing you are trying to produce is different, but one thing will stay the same. You will never want your images to take seconds to load. This ruins the experience for the user, and as we’ve seen, can cost a company a lot of money. Test, test, test. Using these testing platforms like https://imagespeedtest.piio.co/ are an awesome way to see what we are doing well and what we can improve on. I think my final point is to not be afraid to use that lower quality image. A lot of the times the user is just casually browsing, not zooming in on every image trying to find flaws. I firmly believe users would take a tiny bit of fuziness on a X200 zoomed in image, rather than a crystal clear image on any zoom that took a few seconds to load.