How your website images are killing your site speed, and your site traffic.
And how to fix it in a few easy steps!
A beautiful website will get you all the sales you want… right?
There is a key ingredient in your website stew that can make or break your sales, regardless of how gorgeous your site is.
There is no getting around the fact that people have ridiculously short attention spans. And they get bored easily.
So when your site takes too long to load… they just hammer that ‘back’ button and they’re gone.
We all do it. You can probably even catch yourself getting frustrated the next time you click a link, and it doesn’t appear instantly. It’s just human nature.
This isn’t a guess, either. There’s data. (insert mystical whoosh sound)
“Great! Something else I have to worry about!”
Well, yes. The good news for you is I’m going to show you where a huge majority of that slow speed comes from, and how to fix it in just a few minutes.
Image Size and Page Speed
Images are everything these days. If your visitors can’t see what you’re selling or how it works, they probably won’t want to buy it either. So good images can make the difference every day of the week.
Here’s the kicker… for nearly every client I’ve ever taken on… their images were dragging their site down!
Let’s talk image size for a moment.
Resolution technically refers to an image’s pixel density, or how many pixels per inch (PPI).
For the purposes of understanding, a ‘pixel’ is nothing more than a tiny colored dot in an image, video, screen, etc. When millions of those tiny dots are strung together in the right way, they form an image.
Now, resolution can also refer to the image “size” as measured in pixels. You will see this marked as Width x Height and can be found under “properties” of any image.
For example, 800×600 is 800 pixels wide by 600 pixels high.
Image File Size
Most of us are familiar with file size, since “your hard drive is out of space” has happened to just about all of us.
Well, images with a high pixel density or high resolution, naturally take up more file space. Pack more pixels into the space and it takes more memory to store them all.
Think of it this way…
How many pictures can you hang on a wall in your house? If all the pictures are 8×10, then probably a lot. What if we threw a couple movie posters in there? Maybe a mural that is measured in feet…
Suddenly the number of pictures on the wall shrinks. There just isn’t enough space.
Higher resolution = takes up more file space.
Image File Format
There is also another caveat to image file size and that is file format. I could likely write an entire book on every single format and how it affects the image… but that would be boring.
The most common image formats you will deal with are JPG, JPEG, PNG, BMP, and GIF.
Depending on the format used, the exact same image can take up more, or less, file space. The reason is the way each format compresses the image, but again… boring.
The take away here is that JPG and JPEG will be the best way to save the largest image resolution with the smallest file size. It is the ‘goldilocks zone’ of images.
Image Size on Your Website
Now that we understand what image size means, and also how big the files can be, let’s look at what that means for your website.
Let’s say you sell clothing on your retail website.
Each item has a few of those staged “active-wear suave cool” images of your product in action, along with a few of it hanging in empty space. And because you want to make sure the best quality image is used, each image is 3024×4032.
FYI, I didn’t pull that resolution number out of my hat. That is the resolution of an image I just shot with my stock iPhone 8+.
That image, with that huge resolution size, clocks in at 1.94mb.
But it looks great, right? Of course it does!
It’s also huge!
Sizing Images For Your Site – Think About The Screen!
Remember resolution? Well, computer and mobile screens are measured in the same way.
Back in the day, all you heard about a new TV was it was 1080P. Ooh La La!
What that actually meant was the resolution of the screen was 1920×1080. In other words, the screen literally had 1,920 pixels lined up along the top width, and 1,080 pixels lined up along the side (height).
So if the physical screen display is only 1920×1080, why would we try and cram an image that’s 3024×4032? And what happens when we do?
Two things will happen:
- The image will have to be scaled down in real-time by whatever device is loading that webpage.
- The file size will reflect a 3024×4032 image, but the user will only see a 400×600 image on their screen.
In other words, we are hammering our viewers with unnecessary downloading for an image they won’t even see at the original size!
The goal for website images is for the image to display at the exact same resolution it is saved at, without having to scale up or down.
Now, there are A LOT of different screen sizes out there, so the images will be scaling. Personally, I shoot for images as if they would appear on a 1080P display, because that is the resolution found on a huge percentage of monitors.
What Resolution Size Should Our Images Be?
The rule of thumb for image sizes is that nearly all site images should not be over 800 pixels wide and 600 pixels in height. That amounts to approximately ¼ of the viewing area on the 1080P monitor without scaling.
This image is to-scale (just shrunk down) so you get the idea.
Do you see how much of the screen that 800×600 image takes up? Do you want the image in question to take up that much space on your website? No?
Then size it down!
Here are a few more sizes:
Keep in mind, once you get down to the smaller images, it’s actually better to size up a bit and let them scale down. The overhead for scaling is minimal but may result in a better looking image.
Putting It Into Practice
Let’s look at that iPhone image I mentioned earlier.
At full resolution, the file size is 1.94mb, and the file is saved as a JPEG.
If I take that same file and save it as a PNG without changing the image resolution… 8.07mb!
If I resize the original image down to 800×1067 and keep it as a JPEG… 178KB.
A 90% decrease in file size!
Here is that resized image.
Does it look bad? Not at all!!!
How about a real life example? Here is the speed result before and after test I did for a recent client with an image issue.
The image was resized from 6.6MB down to 169KB, a 97% decrease, with no obvious loss of quality. The before and after images appeared exactly the same because the initial image was so oversized all the fine quality was completely lost to scaling.
Load time for that image went from almost 4 seconds down to 1 second. All from just that image.
Imagine if you had two, six, or over a dozen of these oversized images on your pages.
Talk about sacrificing load speed for something no one is going to see!
Go Forth and Fix Your Images
Fixing the images that are dragging you down is easy and here is how I do it.
First, go to GTMetrix.com and put in the address of the page you want to check. If your domain is example.com, then put in example.com.
The caveat here is that you have to check each page individually. One search does not cover the whole site.
After searching the page on GTMetrix, scroll down to the tabs and hit the “waterfall” tab followed by “images”.
Now you are looking at all the images that load on that page, in the order that they load. Clicking on any of them will open an information window that will show you a whole lot of information you don’t need.
The important bit is at the top of the window where it says “Img (from URL)”.
Clicking that will show you the actual image being referenced so you can find it on your site.
If you find an offending image, download it from your site, resize it to the appropriate size and re-upload it back in place.
You have now wrangled your website images into a more appropriate size that won’t drag down your load speed and kill the number of visitors that will wait for your site to load.
In the future, before you upload new images to your website, resize them right then and there. That way, when you upload them, they will be ready to go without having to be resized after the fact.
Fast site = more conversions! Get on it!
Shameless Plug Ahead
If you read this because you just needed a push in the right direction… awesome! That’s why I put it out there.
But if you read this because your site is slow and you don’t know why, or you realized that this might be a bit over your head… fret not! Shoot me an email at email@example.com and I’ll be happy to go over a few things with you.
I offer quick and painless site survey packages (where I will tell you exactly which images on which pages need to be fixed without you having to hunt them all down, along with a whole bunch of other fun tidbits that can rocket your site speed) or we can discuss what you need from me to get everything sorted out.
I also offer site diagnosis services where I will do a deep-dive on your site and underlying tech to figure out exactly what the problem is that can be killing your performance.
I’m here to help if you want.
James WarnetDirect Response Copywriter & Digital Marketing Problem Solver
James Warnet is a direct response sales copywriter, digital marketer, and owner/one-man-band of NUDGECOPY, a digital marketing solutions company focused on helping First Responder businesses navigate the complexities of online marketing. James is also an 18-year veteran of the volunteer fire service and a third-generation firefighter, now serving with Mahwah Fire Rescue Co #1, in Mahwah, NJ.