← Back to Videos

A Quick Fix for Heavy Graphics

by Katie Ayres

6 minutes

If waiting around for a website makes you crazy, don’t worry, you’re not alone. In fact, Google did a study and found that 53% of mobile site visitors leave a page that takes longer than three seconds to load. Making sure that your website loads quickly is an important step to creating a great visitor experience.

Today I am going to talk about a common problem where graphics on a website can slow down load time. First, I’ll explain why this happens, then how to find out the weight of any web page on your website, and then show you a straightforward fix that will help your website lose weight.

Why are some Websites Slow?

There are two factors that can slow down a website, the visitor’s connection and the weight of the page being loaded. You can’t control the visitors device and connection, but you can control the weight of the pages on your website.

There are many methods that can help a website lose weight, but I am going to focus on one of the most common problems, one which can be easily corrected, with no downside.

When you look at these two graphics, the one on the left loads quickly, but the one on the right takes a long time. Why the difference?

When a visitor loads a website, their device reaches out to the internet to download the website’s files from anywhere in the world. It is easy to think the information arrives in one big file. But it doesn’t. There are many files needed to display a web page. And those files are arriving in a stream of bits.

That stream of bits is similar to a hose filling a bucket of water. If the hose is small and the bucket is big, it will take a long time. As a website owner, you have no control over the connection used, meaning the size of that hose, but you do have some control over the amount of water that is required to fill that bucket.

How do you Weigh a Web Page?

We use the term weight, because when you watch a graphic chunk onto a screen, it just feels heavy. But in fact, you are actually measuring its file size. And those sizes are measured with units that are hard to understand because we don’t use them anywhere else in our life.

So here is all you really need to know. Computers work in bytes, which is eight on or off switches. A Kilobyte is a thousand of these. If your graphic weighs in kilobytes, you picture is in good shape, somewhere under 500 kilobytes and your picture is in great shape. Megabytes are a thousand kilobytes, and if your graphics weighs in Megabytes, it is just too big.

Let’s measure a website that is particularly challenging when it comes to load time. In the 1 Happy Place showroom of websites, there is a demonstration website, 1happyartist.com. This website is an example of a portfolio website and showcases Monet’s paintings.

Monet’s paintings are very detailed, so the pictures of his paintings will be heavy, requiring a lot bits to draw all those little brush strokes. I’m going to move to the seascape gallery, where I intentionally did not optimize the graphics.

I am running the browser on a snazzy desktop with a fast connection, so it doesn’t get too bogged down trying to load the graphics.

Let’s look at that same webpage on my phone. You can see how much these graphic files are weighing it down. The phone just can’t handle such big files. Normally, even I would have hit the back button by now, and as I said earlier, according to Google, half of all visitors would have left.

So how do we fix it? We need to optimize the graphics. Let’s go back to the desktop, where, if you look behind scenes, you can see the problem.

Let’s start by looking at one of those little pictures. If we ask the browser to display the picture in another tab, you can see it is actually quite large. In fact it is 3000 pixels wide, but the space it is given on the webpage is only 240 pixels wide. We are just simply putting way too many bits into that little square. And this is happening for every picture, so the weight adds up fast.

In fact, if we downsize the picture to fit the space it will be shown in, we will save approximately 7 million extra pixels! Those are bits that don’t have to be loaded over the Internet.

A Simple Fix!

I’d like to show you how this website should load, which means we need to optimize those graphics. I am going to demonstrate this process in Photoshop, but any digital picture editor will do, because we are only going to resize the picture. There are also many tools that can optimize the picture further, but for the purposes of this video, I am going to focus on the sizing, because you can get a lot of reduction from this simple change.

Here in photoshop I have the original picture, which if we go to the Image Size, we will see it is 3000 pixels wide, and the image size is 21 Megabytes, which is very big. If we change the width to 400 pixels, you can see the size is now only 383 Kilobytes, or just ⅓ of one megabyte, that is a big difference from the original 21 megabytes, and all I did was reduce the size to better fit the frame on the web page.

You can see it doesn’t look pixelated at the size it will be displayed, so there is no loss in the overall look of the website. Let’s go back to the website with the newly sized graphics.

Much better!

If we open up the same picture in another tab, you can see it is now smaller.

Let’s go back to my phone and watch it load with the new optimized graphics.

Boom! This is what you want for your mobile visitors. The page displayed quickly and the graphics didn’t weigh it down.

Optimizing graphics is just one of the many ways to put your website on a diet and you can see the effort is well worth it. There is no change in quality of the pictures, but you can be rest assured that you are not going to leave your visitors feeling like this…