Compressed images improve your websites performance. Here’s how you do it.

The bottom line is, business owners that don’t optimize or compress images before uploading them to their websites are missing out on TONS of potential leads.

In today’s fast-pacing digital landscape, we as internet users have come accustomed to fast loading websites. We strive for that instant gratification of immediately being able to view the content of the site we came to read.

In fact, 40% of visitors will leave a website if it takes longer than 3 seconds to load. So if your website is taking too long to load, then you’re missing out on TONS of potential leads to your business.

In this post I’ll show you the quick and easy way to optimize and compress your images. But first, why do compressed images even matter for a website?

Why uncompressed photos are bad for your website

There’s a number of reasons why just blindly uploading any photo to your website is bad. Let’s look at a few of them in depth.

Too many images can slow down your website

By default, when a website loads, it’s going to try and load everything all at once. This includes not only all of the images, but also all the HTML, CSS, JavaScript, ads, and everything else that’s needed to make a webpage.

The problem is that all of these resources take time to load. The more “things” your website needs to render, the longer it’s going to take.

And a slow loading website is literally losing you business!

Now Google does tend to favor content-rich web pages, so contractors tend to benefit from having a lot of images of their work posted as a portfolio for what they do.

However, when not done correctly, this also tends to backfire and make the web page load really slow, causing a negative factor in the page’s ranking.

So while having lots of images can be very beneficial for your website, it’s incredibly important to make sure they’re optimized and compressed!

Images may have too large file sizes

For free and professional stock photos, I love using Unsplash.com. This is a phenomenal website for finding high quality, professional looking images for almost anything you can think of.

The problem with most images on Unsplash though is that the file sizes are HUGE!

Take for instance this photo here of 3 contractors installing siding.

When downloading this image directly from Unsplash, it’s a whopping 2.9MB.

(For reference, the average web page size is around 2.2MB, for the entire web page! This means that one single uncompressed photo is larger than most web pages!)

Images may have too large dimensions

Having the wrong dimensions is also a big problem causing your website to be slow.

Using the same image from above, we can see that the dimensions of downloaded image was 4892 × 3240 pixels.

This is insanely huge. Especially considering that average device dimensions usually max out at 600 pixels for mobile and 1920 pixels for desktop. There’s no reason to have an image that’s nearly 5000 pixels wide!

How I compress, resize, and optimize my images

I love free online tools. And while you can easily search Google to find whatever image compressor tool you like best, my personal favorite is Simple Image Compressor.

This is because Simple Image Compressor let’s you compress AND resize your image at the same time, allowing you to specify the resolution of the image you want.

Let’s optimize the image we downloaded from Unsplash earlier using Simple Image Compressor.

For this test, I’m going to throttle down the quality to 80% (you can always Compare the Before and After images to play around with different settings until you get what you like).

I’m also going to set the max width to 2000 pixels. And if you expect most of your traffic to come from mobile, feel free to set it even lower to maybe 1000 pixels wide only.

And look at that, we reduced the image size from almost 3 MB to under 500 KB, an 85% savings!

Now if you just look at those numbers, you may assume that “there’s no way the image quality can still be good at 85% the original size, right?”

Well these image compressors specialize in “lossless compression” meaning that most of the time, you really can’t even tell anything has been changed.

Let’s use the Compare button to see the Before and After this compression.

So, you tell me. Can you notice a difference between the two photos here? I sure can’t.

Use a Lazy Loader plugin on your website

Another tip to optimize your web pages’ performance is to add a lazy loader.

A lazy loader will delay the loading of your sites images before the web page tells the browser it’s finished loading.

This allows the user to be able to view the web page sooner, while the browser will still load the image a few milliseconds later. The difference here is that this makes the image loading a non-blocking factor when visitors (and thus, Google’s indexing bots) are trying to get to your page.

If you’re using WordPress or Wix or Squarespace or any other modern page builder, there’s plugins you can install to enable this type of feature.

Use an image compressor plugin on your website

Another helpful tip is to add an image compressor plugin directly on your site. This way, even if you forget to go through the manual step of compressing your images before uploading them, the plugin will do it for you during the upload.

This can save you time and energy when creating lots of content with lots of images. Just let the plugin do the work for you!