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:
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:
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.
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.