Astriata logo mark in orange

How Progressive Images Can Improve Your UX

Progressive JPG
By Alex Oprica   |   October 7, 2021

Did you know that slow load times are one of the most common challenges to having a good UX? Here are some techniques for speeding up your load times and making your website a lot more user friendly.

Tick…tock….tick…tock…..

It’s been the subject of popular memes…website images that load so slowly, line by line, that you want to pull your hair out. That’s standard for older web images; they load from top to bottom, with every pixel crystal clear and sharp. It offers perfect images, but it can be maddeningly slow to load.

But wait!

Those images are slowing your website’s performance down. By converting them to a different file type, you can speed up your load time, improve your Core Web Vitals, and enhance your UX.

One choice? Enter progressive JPEG, seen on everything from websites to apps to videos. With this method of compressing and loading images, a viewer sees the whole image immediately, but it’s blurry. As the image becomes fully loaded, it becomes clear.

Depending on what your image is, a different file type might also help the Core Web Vitals. SVG files, for example, are vector-based and smaller than JPEGs or PNGs, making them great for logos and other graphics.

One way to decide the best file format is to determine the type of image you have. Here’s a cheat sheet of the popular file formats and what they are best suited for

So what’s the point?

Altering your file type helps your user experience in a few ways. One, the user doesn’t have to guess at what the image is, and the brain can start registering it immediately. Two, these images tend to be smaller in size while retaining a quality image, reducing bandwidth and disk space and helping your website load faster.

Our one word of caution is that you will need to determine if your users find this type of image loading to be helpful or annoying.

Your Next Steps

How can you switch out your images? There are some easy steps:

When you’re finished, test your website one more time. If everything was done correctly, you won’t see the word “failed” anywhere, and your website’s performance (and your user experience) will improve.

If your organization has a large website with a lot of images, it’s likely your upload time will be significantly improved by changing your images. At the very least, you won’t be running to the eye doctor the next time you see a blurry image on your computer screen!


We're here for you.