How To Speed Up A Slow Website

By Mark Brinker 
Updated: January 25, 2022

By Mark Brinker  /  Updated: January 25, 2022

How To Speed Up A Slow Website

Remember the last time you called your cable company or Internet service provider?

Chances are you waited on hold listening to elevator music, with the occasional interruption, “Due to an unusually high call volume, we are experiencing longer than normal wait times.”

So you waited. One minute went by, then 2 minutes, then 3 minutes. After 6 minutes you finally made it through to a customer service representative.

But that 6 minutes felt like 45 minutes!

And that’s pretty much what people feel like when they encounter a slow website that takes forever to load — whether it be on a desktop, tablet or smartphone.

If a web page loads in 2-4 seconds, that’s acceptable. If it takes 10-20 seconds for a page to load, that’s not ok, and your visitors are going to bail … and you’re going to lose potential customers. The bar has been raised and your visitors now expect your site to be fast.

What Causes A Website To Be Slow?

There are numerous reasons why a web page might be slow to load including poor web hosting, shoddy or outdated coding, bad design or excessive on-page advertising.

But one of the most common and overlooked culprits slowing down websites are non-optimized images, which can easily double or triple the amount of time it takes for a page to load.

Optimizing the images on your website can noticeably speed up your website, and today I’m going to show you how to do this. The process is fairly simple and quick, and it doesn’t require any high-level technical skills or expensive software. (Yay.)

What Many People Don’t Realize About Digital Images

Today’s digital cameras, as well as smartphone cameras, are amazingly powerful. However, the price you pay for those beautiful, high-resolution images are very large file sizes.

If you’re using those images for print media or high-def video production, chances are you’ll need all the data packed in those images. But for your website, those high-resolution, straight-from-the-camera images are overkill. How many people have a monitor big enough to display a 4608 × 3456 pixel image?

To give you some points of reference on image sizes …

  • Hi-res images from today’s cameras often have dimensions of 2000-4000 pixels (or more).
  • Image file sizes from today’s cameras are often between 2-10 megabytes each.
  • The width of a standard website usually ranges from 960 to 1280 pixels.
  • The region on a website where you read the text of an article is typically between 600-800 pixels wide.
  • If you want a webpage to load quickly, the file size of a website image should be less than 500 kilobytes (0.5 megabytes) — preferably less than 250 kilobytes, if possible.

When you use a gargantuan image in a region on your website measuring 640 x 360 pixels, for example, your visitor’s web browser has to download that huge image file then down-sample it to get it to fit — and this takes time, even with a fast Internet connection.

The end result is a slow loading webpage. If you have multiple images on a page or in an image gallery that just compounds the problem even further.

Reducing Files Sizes Without Sacrificing Image Quality

If you want a fast-loading webpage, you simply can’t be using monster image files.

So before you upload any images to your website, you need to pre-process those images on your local computer to reduce the file size and lessen the load on your visitor’s web browser. Pre-processing gives you clean, streamlined images for your website that load quickly but still look really good.

Here’s how you do it.

It’s A Simple 3-Step Process

Crop. Resize. Compress.

I’ll use an actual image so you can see how this works. Our sample image is called “Miami cabana”. The original image size is 1698 x 1131 pixels, 2.18 MB. You can see the actual image here. Really nice image, but it’s WAY too big to use on a standard website.

Step #1: Crop. Begin by trimming and cutting out the non-essential parts of your original image. Not only does this reduce the image dimensions, but it can actually enhance your image by only displaying what matters most.

There are times where no cropping is necessary. This “Miami cabana” is a good example. However, as a matter of practice, I do crop the majority of my website images to a standard aspect ratio like 16:9 or 4:3 because it’s what people are used to.

Step # 2: Resize. This is where you can get a major reduction in file size.

You’ll recall that the original image was 1698 x 1131 pixels, 2.18 MB. But watch what happens when we reduce it to a size that would fit on a standard website:

  • Resizing the image down to 800 x 533 pixels results in an image size of 276 kB — an 87% decrease. You can view that image here (because it’s still a tad too large to show right here).
  • Resizing the image down to 600 x 400 pixels results in an image size of 164kB — a 92% decrease. Here’s that image:

miami_cabana_600

Still looks pretty good, wouldn’t you say?

Step #3: Compress. Most of the time I stop after step # 2 because the image size has been sufficiently reduced. However, if you want to take it one step further you can compress the image and reduce the file size even further with minimal (if any) reduction in image quality.

There are many pieces of software as well as online resources that do image compression. One that works really well (and doesn’t have a bunch of annoying ads) is tinypng.com. Even though the name implies it only works for .png files, it also works for .jpg files, too.

Here what compression can do:

  • Compressing the original”Miami cabana” (with no cropping or resizing) reduces the image file size from 2.18MB down to 271kb —and 87% decrease. You can view that compressed image here.
  • Compressing our 800 x 533 pixel image from step # 2 above reduces the file size from 276kB to 80.6kB — a 96% decrease from the original. You can view that image here.
  • Compressing our 600 x 400 pixel image from step # 2 above reduces the file size from 164kB to 43.7kB — a 98% decrease from the original. You can view that image below:

miami_cabana_600_compress

Can you tell any difference from the image displayed in step # 2 above?

Here Are The Tools You’ll Need

Perhaps the best news about image pre-processing is you don’t need to learn any complicated or expensive software.

For Windows users, all you need is Microsoft Paint (it comes free with Windows) for cropping and resizing.

For Mac users, you can use your Mac’s free Preview app. Here’s an excellent tutorial.

No need to use complicated or expensive software like Adobe Photoshop for simple cropping and resizing, unless of course you’re already familiar with it because you use it all the time. Me personally, I use Paint Shop Pro from Corel. I’ve been using it since 1999 and I find it much more user-friendly than Photoshop.

You can also use free (or very inexpensive) image editors like Gimp, PicMonkey or Pixlr, if you prefer. But the free apps mentioned above will work just fine.

A Few Image Pre-Processing Tips

The most important thing is to be organized and have a process. Once you have your little system worked out, image pre-processing goes very quickly.

  • Create a simple folder system. Make sure to keep your master image files intact and unaffected. After you’re done editing your image use the “save as” option to save the edited version in a separate folder labeled “Edited for web” or something similar.
  • Use a standard naming convention. Your image library will grow rapidly, especially if you’re creating one or more versions of each image. So you’ll want to develop a simple, descriptive naming convention so you can immediately know what the image is without having to open the image file and view it. In our example above, the master images was labeled “miami_cabana_orig.jpg”. The 800 x 533 version was labeled “miami_cabana_800.jpg”. The resized and compressed image was labeled “miami_cabana_800_compress.jpg”.
  • Standardize your image sizes. When possible, try and be consistent with your image sizes. This will create symmetry, uniformity and improve the overall aesthetics of your website.
  • Save your images as .jpg or .png. These are the 2 most common file formats for images. If your image has a transparent background, you’ll need to use the .png format. The .png might have a tiny bit more image clarity than a .jpg, but most people (myself included) can’t see a difference. All things being equal, a .jpg will usually be a smaller file size than a .png. I actually use both formats, but I tend to use the .png format more.

That’s all there is to it.

Take the time to pre-process your images. It doesn’t take much time or effort, your pages will load faster and fewer website visitors (which might include your next client!) will abandon your site because it’s as slow as molasses in January.

Leave a Reply

Your email address will not be published. Required fields are marked

  1. Great advice. I have never compressed my images, but with photos, I usually reduce them to 400×600. I batch process them in Photoshop. It still takes a lot of time, but it makes a big difference as you pointed out. If I know ahead of time what post I will use them in I am starting to save them with the alt key as the title.

    1. Yes, it does take some time to do this. No doubt. For me, the key word is *process*. Once you document a process, it gets faster and easier each time you do it. Easy, simple and quick … that has a nice ring to it. 🙂

  2. Great info. My art website is getting slower and slower to load as I add more and more imaes. I shall have to work my way through them and look for the ‘trouble makers’
    Thanks , janet davies

    1. Yes, it’ll take a little work to find the trouble makers and fix them. But once you get a little workflow established, it’s not too bad. The biggest thing is to not get overwhelmed if you have a lot of images on your site. Just start with your most frequently visited pages, fix those images one by one, then work your way down to the lesser visited pages on your site. Your visitors will thank you for having a site that loads quickly. 🙂

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}