How to Handle an Image-Heavy Website

You just created the website of your dreams, and it looks amazing. Mission accomplished — until an Image Speed Test tells you the pictures have slowed down your load time and now Google hates you. It begs the question, how should you handle an image-heavy website? Which is the best Image Format for your website?

Surely you shouldn’t have to choose between those high-quality, eye-catching images that encapsulate your brand perfectly and an SEO-friendly site?

Luckily, you don’t have to make this impossible decision. Here are some tips that will improve your website’s load time without altering its design completely.

Before you start reading this article we recommend to check this other artcile that explain the first steps of image optimization. If you are used to this topic, go ahead and jump into which image format is the best for you.

Size your images properly

When you are looking for images to use on your website, check on technical details. Of course look at the whole picture. Not only technical details, but also what the image is communicating and telling the audience.

Combining these two aspects, our advice is to look forward and pay attention to more than just checking the CSS height and width.

The bigger an image is, the heavier it is for your website, so don’t waste valuable bandwidth by opting for a bigger size than you need to.

It’s simple to find the optimal size requirements for most image purposes, whether you want a thumbnail or a background picture. Once you know what size you need, you can use a free tool to resize the image. We promise that it’s not as tedious as it sounds!

Choose responsive images

If you’re new to this world, you might be wondering what a responsive image is. And no, it’s not a picture that listens to your problems and offers advice, although that would be cool.

Whether you’re viewing a website on your computer, your phone, your tablet, or using a split screen, an image should “respond” to its location.

Any web designer worth their salt knows that an image shouldn’t be the same size on each of these screens — and if we don’t create responsive images, we end up using that precious bandwidth and making the adjustment take place on the client-side.

You know what all this means? Make your clients wait until your content it's loaded.

Check your image format

Anyone who's ever used a computer should know that images can take different formats: JPG and PNG are the most common. But far fewer people know which one they should choose.

Images in PNG format are far larger than their JPG counterparts — often more than twice as large. Does this mean you should always opt for JPGs? Not necessarily.

PNGs can be a good option for logos or images with a transparent background — just make sure that you use them sparingly and only when it’s totally necessary.

There is no just one image format you should use. It would depend on the browser (some browsers don't support some image formats) and of course your goals as a brand. Resizing the images and delivering at high-quality is a challenge. You can try to compress your images with this tool and boost your digital experience reading more about WebP format. WebP and AVIF are other formats to consider.

Compress your images

Now we’re on to the juicy stuff. The simplest method of all to knock your images down a peg is to compress them using an online tool. Sounds simple, right?

It is, but make sure you know the difference between lossy and lossless compression.

Lossy compression involves compressing an image without sacrificing quality, whereas lossy compression loses some of the quality to make a smaller size. Naturally, images subject to lossy compression end up much smaller — but if a picture is very prominent on your site, you might not be willing to sacrifice as much quality.

Think about mobiles

An increasingly high percentage of online activities is happening on mobile devices. Maybe you’re using one right now. As a result, ensuring your website design is mobile-responsive is more important than ever.

On a tiny mobile screen, it’s just not necessary to have a full-sized image — you can compress your images even more than you do for the “standard” site.

Besides, people are even quicker to get distracted on mobile devices than they are on the PC, so don’t give them an opportunity to leave your site by making it too slow to load.

Optimize image delivery

You’d think that resizing and compressing your images would serve as a guarantee that they’d deliver fast, wouldn’t you? Unfortunately, this isn’t always the case. To explain how to optimize your image delivery, we’re going to have to explain a few technical terms.

The easiest way to set up a website is by delivering everything through the same origin server — but this piles all the pressure on to a single server. If that one server is far away from the website visitor, it’s a recipe for disaster (aka a slow load time).

The solution? Using a content delivery network (CDN), which makes use of multiple servers to ease the burden.

Use HTTP/2

Okay, now it’s time to get really technical. HTTP/1.1 is an application layer protocol for data communication on the web. It was first implemented around 1997, but incredibly, some sites are still using it.

If there’s any chance that you could be among them, you’d best get talking to the IT department. For greater efficiency and website loading speed, you must update to HTTP/2, which has been around since 2015.

This has various benefits for your website and eases the burden of lots of images.

Time to kick your site into shape

No matter how big your company is or what industry you operate in, it’s a given that decreasing your website loading time could boast business. Even Amazon would lose $1.6 billion annually if it took one second longer to load!

If you’ve never paid much thought or attention to how image-heavy your website is before, it can seem like a daunting task to get started on — especially if you already have a lot of web content.

For a helping hand to guide you through the process and make your website run faster, schedule your demo with Piio. We can guide you through every step of improving your website and digital presence, tackling heavy images and improve your web performance.