Why do graphics slow down websites?
Find out how you can improve your website’s load time by speeding up your image loading. You will learn how to see the weight of a page as well as what is slowing it down. It is then followed by an easy fix that takes a big chunk out of that slow load time.
You might be a photographer or artist and have noticed that your website loads slowly when it is displaying your work. You may have a website that is filled with fantastic graphic to help tell your story and you notice those graphics sometimes come in slowly. This quick fix will go a long way to fix that problem.
Script
Introduction
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.
Hi my name is Katie Ayres and I’m a web developer and owner of 1 Happy Place and today we are going to talk about heavy graphics…subscribe to my channel if you want to know all about websites and the internet in a fun and gentle way…
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.
Browsers will also let us look backstage at the details of what happened when it got the web page. To get to these tools, you can right click on the screen, select “inspect”, and look at the Network report. It will show us what happened when each of the files was grabbed from across the Internet.
I’m going to reload the page so that we can watch the report work.
This report looks a little intimidating, but on a closer look, it’s pretty easy to understand. It is actively keeping track of all the files needed for the page and calculating how long each file took to be downloaded across the Internet.
Let’s go down to the summary to see the actual weight of the entire page. You can see that it is 36 MB, which is huge.
Up above, you can see the culprits. The last column shows a waterfall of all the files being retrieved and you can visually see the big bars of those heavy pictures taking up so much time. In the detailed columns you can see each file’s size and timing.
If we go to the file we looked at previously, you can see it is almost 4 Megabytes.
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 that will help your page lose weight
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.
Now let’s run the report one more time and watch it load. Much better. You can see the weight is now just 1 MB, not 36. And yet, the paintings look just as good as they did before.
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…
Hey! Thanks for watching! I post videos all about websites and the internet in a fun and gentle way…so be sure to subscribe if you would like to see more!
Comments