Make Your Website Faster - How to Optimize Website Images

A slow website will turn people away, especially if you are doing any form of paid ads or SEO. Websites that are fast on desktop may not perform the same as mobile websites, which, in some industries, 70% of website traffic will come from. No matter the platform, your website needs to perform. The largest item we see that slows down website speed is images. Image optimization is a fairly simple process once you're educated on the topic. Simply, you need to figure out what the image is being used for, correctly size the image, compress the size, and upload.

Where is your image being placed on the website?

The first question you need to ask is Where am I putting this image? Another consideration could be what is this image being used for? Depending on where you put your image dictates how we go about the image optimization process.

For example, if you are using the image on the "hero section" of your website, the large top section that often times contains a large image, you won't want as much optimization as a thumbnail for a blog article. For a hero section, you will want a crisp, large image. For a thumbnail, it can be much smaller and compressed.

I'll be creating a small image for a services section. I've outlined an example below:

Image Sizing

For a services page, we don't need to take a ton of real estate on the end-users screen. We can have a fairly small image size. For this, we can use 300x300 px or something close to it. The marketing team sent me the image below that they want to use. By viewing more information about the image on the "Preview" app on mac, I'm able to find the size of the image and the current file size.

Admittedly, 1.1MB isn't a large file size. However, when you have multiple images on a page, every megabyte makes a difference. 2740x2740 is a bit large considering our 300x300 goal. Luckily, we have a few options to get this smaller.

On macOS preview app, we can select Tools > Adjust Size. From there, we can select our desired dimensions, shown below. For other devices, such as Windows or a web based OS, you can use simpleimageresizer.com to resize the image easily and quickly.

As you can see from the image above, the image file size is already a fraction of what it was. By clicking "OK", the image will be smaller and you can save the file.

Image Optimization

Now that we have a smaller image size, we can compress our image. On macOS, I like to use ImageOptim, a free image optimizer for Mac. On Windows, Caesium Image Compressor is what I would recommend.

For both apps, you can drag the image into the app and it will automatically compress. In the image below, our file size is now a mere 4.5KB.

On most images, I want a file size of less than 300KB, so this ends up exceeding my goal. The end result is a smaller image, both in pixel size and won't affect your website speed.

One thing you could be asking: But Cameron! This image will look slightly blurry on my website! Won't that hurt conversions or my brand? The short answer, it depends. If it's a filler image, it won't hurt you. If you're in the software industry trying to show off an app feature, you might want to have a higher quality image, meaning a larger one, to show off your features.

Admittedly, this is a pretty aggressive example. I could have used 600x600 px and still have had a successful result with a slightly less blurry image.

Conclusion

By resizing, optimizing and compressing the images on your website, you will have a faster website. Just by image optimization alone, we've taken websites that take 10 seconds to load and achieved loading times of less than 1 second. If you're doing any sort of advertising, you might see an uptick in users, conversions, and people browsing your site. After all, people on the internet want a fast way to access information. Don't let your images be the item that slows them down.

Note: All of the tools and websites that I mentioned in this article are free and easy to use.