What Is Image Optimization For The Web?

Estimated reading time: 7 minutes

When it comes to your website, speed is important…super important! How quickly your pages load affects both visitor behaviour and rankings, and one of the main reasons for a website being slow is un-optimised images. But, what is image optimization for the web? Well, in this article, I will explain website performance optimisation in terms of image compression.

What Is Image Optimization For The Web?

When we browse around on various websites, we see plenty of pretty images and those images always display nicely within the content area at a size that fits the content.

What many people don’t think about is how that image is placed within that content. The image will be stored in a separate folder on the websites server and a piece of code is added to the page that references the location of that image.

When the page is then viewed in a browser, the browser follows that reference, finds the image and downloads it. It will then re-adjust the size of that image to fit the viewable area of where it needs to go and place it on the page.

So, let’s take a few seconds to think about the main steps in this process:

1. The browser needs to download the image from the web server.
2. The browser needs to resize the image on the fly, as the page loads.

These steps use valuable server resources and all have to happen in the split second that it takes for the page to load. However, the larger the image file size, the longer it will take to download and the larger the dimensions of the image, the longer it will take to resize it.

So, when you want to know how to optimise images for web use, you need to focus on two main things:

1. Make sure the file size of your image is as small as possible, without losing quality, so it can be downloaded as fast as possible.
2. Make sure your image dimensions are the exact size needed, so the browser doesn’t need to resize it for you.

How To Optimise Images For The Web

In order to answer the question, how to optimise images for the web, I typically advise carrying out two main steps:

1. First, use some image editing software on your computer, like Photoshop, that will allow you to save the image for web use. This will run the image through the software’s basic compression tools to reduce the size of the final image file.
2. Secondly, run the image through a standalone web compression tool. Since page loading speed has become so important to the performance of a website, tools like Photoshop can no longer offer the level of compression needed. So, once you have your web-ready image file, run it through an additional online compression tool to get the image size as small as physically possible.

How To Save Images For Web In Photoshop

Let’s take a look at how to save images for the web in Photoshop. First, you need to make sure your image in Photoshop is the correct size. It cannot be too small, else the browser will need to increase the size of the image, making it pixelated. It also cannot be too large, else it will be slow to load and put additional load on the server, having to be reduced in size on the fly.

If you are not sure of the exact size that your image needs to be, simply look at the web page and adjust your image size in Photoshop to visually look the correct size. I wouldn’t worry about getting the dimensions pixel perfect, but as long as you can get it close enough, then you will be fine.

One little tip is to make sure the viewing area of Photoshop is set to 100%. You will find the zoom options in the bottom-left corner of the window and this needs to be set to 100%.

If you had this set to something like 50%, then your image will actually be twice the size of what you see on your screen. This seems like an obvious thing to do, but you wouldn’t believe how many clients have provided images that are too big, just because they forgot to set the correct zoom level in Photoshop.

Once you have got your image looking the way you want, with the correct dimensions, then the time has come to save the image. The steps below are for the latest version of Photoshop CC and may be slightly different in earlier versions, but the steps will be very similar.

1. Go to ‘File – Export – Save for Web (Legacy)…’ to open the save for web dialog box.

1. Choose the file extension that you need and adjust the settings. JPG file types are best for photos, whereas PNG file types are good for images that require transparency. You can flip between the ‘original’ and ‘optimized’ tabs to visually see how the exported image will look. Also, pay attention to the estimated loading time in the bottom-left corner of the preview pane – as you change the settings, you can see how it will generally affect loading times over different modem speeds.

1. Once you have the settings you want, click the ‘save’ button to save a web version of your image.

How To Compress Your Images Using An Online Compression Tool

Once I have the ‘save for web’ version of my images ready, I like to do one last thing and run it through an online compression tool. There are loads of free compression tools out there, and I have tested many over the years, but the one I recommend the most is Optimizilla.

I personally like this tool due to its ease of use, as well as being able to adjust the level of compression using the slider, whilst seeing how it affects the picture quality in real-time.

You need to understand that with web compression, there are two methods:

Lossy – lossy compression will get your images to the smallest possible size, but it will reduce the image quality during the process.

Lossless – lossless compression will ensure your image loses none of its quality, but will not be able to reduce the image size down as far as lossy compression.

Optimizilla is a lossy compression tool that can compress both JPG and PNG file formats as small as they can possibly go. However, to ensure you keep any loss of picture quality to a minimum, you can manually adjust the slider and see how it affects the output quality.

Simply drag and drop your image or group of images onto the ‘Drop Your Files Here’ box, or click the ‘Upload Files’ button to open the image upload dialogue box. By default, the tool will reduce the file size to a level where the output quality is unaffected.

In many cases, the default compression will be enough. However, if you want to get the size down even further, you can play around with the number of colours slider, until you get a best-fit scenario.

Can’t I Just Use An Image Compression Plugin For WordPress?

You can get some great image compression plugins for WordPress, which makes life a lot easier. Not only do these plugins allow you to compress all of your image library with a single click of a button, but many of them will automatically compress your images at the point of upload.

However, as an SEO specialist, I am yet to see an image compression plugin that compresses images enough to keep Google’s PageSpeed Insights happy. Even if you take the paid versions of these plugins, you still cannot beat the process of manually compressing images yourself.

If you simply want a quick and easy way to optimize your images, then sure, download and install a plugin. However, if you are like me and obsessed with page loading time and want to rank as high as possible in search engines, trust me…take the additional time to compress your large images manually yourself, and you will reap the benefits for the long term.