How to balance between image quality and website speed

When publishing anything online is almost impossible or, at least, not advisable to exclude the use of photos that will reinforce what you have written and even generate certain emotions for your readers.

At the same time, photos are the most resource demanding type of content you could publish online, and the top reason for slow websites. Keeping your website below an industry average of 1.88 MB is challenging considering how many images you might need on a page and how big a photo can get.

If you want your audience to have a nicer experience when interacting with your photos online, I’ve lined up some tips that might point you in the right direction.


First of all, what is image compression and downscaling?

Almost every time you modify an image it gets saved in a compressed file format. A few popular examples are JPEG, GIF, TIFF, and PNG.

Compression is a lossy way of shrinking the file size of an image. It takes similar looking bits of it and mushes them together in a way it thinks you won’t notice and it may also reduce the number of colors in your image.

Higher compression usually results in lower quality. This can be seen when you edit a photo taken in high quality (namely in a Raw format), save the edited one in JPEG format and the file you get is a lot smaller than the original, therefore losing some of the original details.

Downscaling means making your image smaller by lowering its resolution. This also reduces detail but in a more predictable way.

When you downscale an image, all the information gets crammed into fewer pixels and since they have to share that space they get merged together and you lose some detail.

Why does the file size need to be as small as possible? Because larger files take more time to load. People don’t like waiting 10 seconds for your website to load when most others take around only two.
If you want to get more in-depth about speed and why it has become such an important topic make sure to read Vlad’s article on website performance.

Compression is a lossy way of shrinking the file size of an image. It takes similar looking bits of it and mushes them together in a way it thinks you won’t notice.


How does downscaling affect file size?

Downscaling is a fast way of lowering file size by lowering the resolution of an image. It’s great if you want to keep compression low in order to preserve details. Though, there is a point where details become too pixelated so you have to decide what level of detail you want to have in your image.

The best use case for downscaling would be for thumbnails, previews or if you use small images on your website. You can clearly see the file size benefits in the comparison below.

In the next example, you can see the grain pretty much disappearing when we go to 2000px and at 1000px you can’t distinguish the vertical lines of the railing. That’s probably the point where you know you went too far with downscaling.


Aplying different compression levels on the same image

Compression seems to be the most common way to lower file size on the web, mostly because if you use it wisely you can get it more than halfway down with little to no artifacting (the distortion of an image that happens as a side-effect of compression).

If you use small images on your site, most of the time you can barely distinguish anything different between them. Look at the images below, for example.

As you can see, the differences are indistinguishable since they show up only a couple of centimeters wide but the file size difference between them will surely have an impact on loading speed.

Next, you can see the difference compression makes when it comes to file size. Between high and medium quality we went from 240KB to 160KB on a 1000px image without damaging the quality very much.

When going from medium to low, a very aggressive compression, it went from 160KB to just 8KB but you can see how blocky the image gets, you can barely make out the texture on the walls.


Best Option? Use both methods

You should actually use both, that’s the most efficient way of doing it. As a rule of thumb, you should use larger resolution, less compressed images for covers and lower resolution, more compressed ones in the content since they’re smaller.

Here are the extremes again, the first one is the highest quality at the original resolution, the second one is 1/16th the scale and highly compressed. It’s only 0.5% the file size and you can barely tell the difference in the example below.


Why is file size so important?

If you lower the file size, your website is going to load much faster. For example, while loading the compressed file, at 0.08MB the visitor is going to see it instantly, but a 15MB image on a 3G connection can take 17 seconds to load, and that’s a 18650% increase in waiting time.

In a nutshell, people won’t have the patience to wait that long to see a picture and since the recommended website loading time is around 3 seconds, you don’t want a single image to slow you down.

If you want to test your website’s performance, use the Google’s PageSpeed Insights tool and see where you stand.


What tools should I use to reduce file size?

In a pinch, I usually use and recommend these web tools to compress images quickly: compressjpeg.com & compresspng.com.

They work fast, you can upload multiple images at once and have a simple slider-based quality setting with a nifty preview so you can see what you get both in terms of image quality and file size.

Other than those, I usually try to save my image at the file size and compression I want straight from the source, which is usually Lightroom, Photoshop or Figma. They all have different ways in which you can save your image but if you’re in a rush their default settings are usually good enough for most purposes.

If you can’t be bothered to do that yourself for every image, you can always use something like imagify.io, a WordPress plugin that does all that stuff right when you upload an image to your site. It’s the easiest way to go about optimizing images for WordPress, really.

To learn more about this, check out Vlad’s article on the first steps to take if you want to dabble with performance improvements straight from the source, your hosting provider.


Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook
Avatar

George Mihăilă is a Marketing Designer @Pixelgrade.