Bulk Image Compression How To Optimise Your Images To Increase Page Load Speed

How to Compress Images in Bulk | Optimising Images for the Web

Posted on Posted in SEO

One of the main culprits slowing down your website load time can be your image size.

The speed your website loads is one of the most important factors for SEO. It effects how Google ranks your site. This is because user experience is reduced and frustrated if your website takes a long time to load. Google and the other search engines want to deliver the best possible user experience at all times so will penalise slow loading pages. The slower your site load speed the more likely your site will rank lower.

As a rule of thumb – it should not take longer than 4 seconds for your page to load.

Not only will Google downgrade a slow page, so will your users and you will suffer from a very high bounce rate if your load time creeps over the 4 second rule. This means you will lose valuable customers.

As a photographer, I know too well that a good user experience is also more likely to happen if you have great high quality images on your site.

The best solution for user experience and SEO is therefore a combination of a fast page load time and high quality images. But how do you achieve this? Make sure all images are optimised and compressed to the perfect size. I will walk you through exactly how to do this in this article.

I would usually use Photoshop to compress my images one by one. However, there are quicker options if you need to compress and resize images in bulk. A better tool to use for this is XnConvert.

For me the best way to learn is to first understand what is going on and why. So first, I will walk you through some basics of image compression.

What is an Image?

 

There are two basic types of image files: Bitmaps & Vectors.

example of the difference between Vector and bitmap image

Bitmap Images

Bitmap image files are assortments of many coloured pixels. A pixels is is the smallest controllable element of a picture when it is on a screen.

Most photographs, especially high resolution ones, are Bitmaps.

Bitmaps are generally speaking the only images which need to be compressed.

Think of a bitmap image like a mosaic. As long as this image isn’t enlarged or zoomed in on too much then the image appears as it should, smooth and grainless. But when you zoom in too much you can see the individual pixels.

example of a bitmap image. grainy image

Vector Images

Vector image files are sets of co-ordinates which plot out the shapes, lines and colours which appear in a particular position on an image.

They cannot accurately capture variation, texture and tone which is needed to make up a photograph.

They can be re-produced at any size and they don’t lose their quality as they just apply the co-ordinate data to a different scale.

 

vector image example

What are the different types of image compression?

 

There are two types of image compression; Lossy and Lossless.

Lossy Image Compression

Lossy compression throws away from an image information the human eye does not notice.

It uses complex algorithms to determine what is the best data (Pixels) to discard to maintain the same viewing effect.

Examples: JPG, GIF

How exactly does this compression work?

I will use JPEG Image compression as an example to explain this.

JPEG compression splits the image into blocks, applies compression to each block using a discrete cosine transform operation. These blocks are assembled together, like pixels, to form the image.

This is basically the removal of colour information and brightness in areas of the picture where it will be least visible through the human eye. Information is shed from the image. This is why sometimes using JPEG compression can give the image a patchy or blocky look.

Lossless Image Compression

Lossless image compression is a compression algorithm which allows the original image data to be completely and perfectly constructed from the compressed data.

It retains all the original data so the file size is significantly larger than lossy image compression.

Lossless images still remain quite large so are not typically as useful for web compression. The exception is when you are doing this one by one and using something like Photoshop where you can manually reduce the number of pixels.

Examples: PNG, PSD, TIF, EPS.

An Example of a PNG compressed image
An example of an image i have compressed as a PNG file.

Neither of these are the same as file compression which reduces size by grouping any repetitive data together. This works for any type of file but is not suitable for images which you need to display on the web. These files are saved as zip or gzip.

 

Now you have an understanding of  what is going on when images are compressed, let’s move on to how you can compress images to increase your page load time and keep the quality of your images high.

In which way should I compress my Image?

 

JPEG is generally thought of as the best solution for compressing images needed for the web.

You can compress an image by altering one or all of the following:

1. Size

2. Dots Per Inches (DPI)

3. Compression Type –Lossy or lossless image compression

4. File Type

1. Size

Changing the size changes the height and width of the image.

This therefore alters the height and width of the image on the site so is not the best option if it already fit the area as you want. It is also not recommended if you want to keep the image responsive (so that it changes its size with the size of the screen so it still appears at the same ratios).

The ratios that I usually prefer are:

1920 pixels (px) x 1200px when I want the image to look it’s best.

1280px x 1024px for most images

800px x 600px for the smallest and quickest loading image. (This works best for mobile intensive sites)

image compression. optimising image size screenshot

If you have an image where you want to keep the dimensions as they are you can use the chrome plugin Measurelt, to measure which size you need to upload the image (pixels).

2. Dots Per Inch (DPI)

The number of dots per inch is essentially the amount of information per square inch. It is basically the number of pixels per inch. (It is not called pixels per inch because it is an old term left over from the print era.)

The rules of thumb here are:

300dpi is a good size to use for high resolution printing, such as banners and massive advertisements.

150dpi is a good size for A4 size printing.

75dpi is a good size for most websites or applications. Mobile can go even smaller but if you want your site across desktop too then it is best to stick at 75.

3. Compression Type

The compression type means whether you are going to compress an image using a lossy or lossless compression method.

Choosing which one you should use also helps you decide on the file type, as typically they relate to a certain type of compression method. It also depends on which tool you want to use to do the compressions as they all have their own preferred methods.

4. File Type

This is where PNG and JPEG and the types of file compression apply. It is related to the above (compression type).

Two Examples of image change type:

1. PNG (Portable Network Graphics) – Lossless file format

PNG are typically bitmap images.

The most common place I have encountered PNG is when I edit a JPEG or RAW photograph in Photoshop and then export the edited picture at a compressed size in PNG format.

This type of compression works best for simple colour images, images with hard lines, as it is not a vector image.

PNG photographs straight from Photoshop will typically need to be compressed more for the web.

To the human eye at website level, there is little difference between a JPEG image and a PNG image. This is an example of a JPEG image.
To the human eye at website level, there is little difference between a JPEG image and a PNG image. This is an example of a PNG image.

2. JPEG(Joint Photographic Experts Group) – Lossy file format

JPEG are typically vector images.

These type of vector images can be used for complex-colour photographs. The most common place I have encountered JPEG images are when shooting photographs on a digital camera.

JPEG photographs straight from a camera will typically need to be compressed more for the web.

When saving a JPEG you can choose quality or compression. A smaller and more compressed file will lose more quality so you need to decide on the level of trade off. You can play around with these ratios to find the best balance between image qualities and file size.

To the human eye at website level, there is little difference between a JPEG image and a PNG image. This is an example of a PNG image.
This is an example of a PNG image taken on the same camera as the previous JPEG example.

Now you have an understanding of ways we can reduce an image size I will walk you through how to do this with xnConvert.

How to decide which images to compress

 

Typically, you would be able to see the size of an image before you upload it or you know you have a set of high quality images you wish to publish on the web.

If you don’t know which images you have already uploaded to your site which are causing a slow page load time you can use one of the following to find out:

1. Google Page Speed Insights

2. GTMetrix.com

I mainly use page speed for image optimisation as it will actually compress the images for you. You can use this to find the optimised images:

google pagespeed insights tool. image optimisation

 

Click on ‘show how’ to fix and it will give you the file paths of the images you need to optimise & how much you need to reduce them by.

How to compress multiple images with xnConvert (on both a Mac and Pc)

 

1.  Import the files you want to compress.

If you don’t have these files on your pc but you know which ones you want to compress, then you can download them from your C-panel.

If you don’t know which files you need to compress use ‘Google Page Speed Insights to find which ones it suggests.

screenshot of xnconvert importing images

2.  Choose your compression type. – Known in xnconvert as ‘Actions’

 

A. Size

screenshot of xnconvert resizing images for optimising page speed

screenshot of xnconvert resizing images 2 for optimising page speed

B. Set DPI

 

screenshot of xnconvert set DPI for optimising page speed

C. Compression format is not available to choose from here as the tool automatically does it for you

screenshot of xnconvert file format for optimising page speed

D. Select your file type

Here I will select JPEG because I like the ability to choose the ideal mix of size and quality.

 

Output > file format (Jpeg) > Settings

 

E. Remove meta data from the image.

screenshot of xnconvert clean metadata optimising page speed

This gets rid of any un-necessary information and thus reduces the file size.

Save these images to your computer. It is very important here to NAME THEM THE SAME AS YOUR OLD UNCOMPRESSED IMAGES. This will make it a lot easier to replace them on your site.

Then you are good to upload these images.

1. Login to your Cpanel

cpanel login screenshot

2.  Open up ‘File Manager’

file manager screenshot in cpanel

3. Find the folders containing the images which needed to be compressed. Open these up.

If you are not sure how to find these files. They are usually within ‘public html folders’ (this is the root folder where all WP files are kept.) then ‘wp-content’.

You can find the exact file location then from the image URL Google Page Speed Insights gave you.
file manager screenshot cpanel

4. Select ‘Upload’

upload of file manager in cpanel screenshot

Tick ‘overwrite existing files’.

screenshot showing uploading images in your cpanel.

Then ‘select file’. Select the images you have compressed and want to upload.

image upload in cpanel when image optimisation

Then click ‘go back to …’.

When you go back these should automatically have replaced your old large files. This is why it is important to name them the exact same as the old folder.

How to replace your images with the compressed version

 

You can do this two ways. Either one by one on your WordPress site, or in bulk within Cpanel.

I will walk you through the second of these options as it is far quicker when you are replacing more than one image.

How to check the images are loading and look correct on your website

 

To view the results of your site with images optimised you have to either clear your browser caching or view in an incognito window (Chrome) or private window (Firefox). Otherwise it may take a while for your browser to pick up the changes.

The best way to clear your browser caching is with ‘hard reset’ for your site, as opposed to clearing all of your internet caching.

How to ‘hard reset’:

1. Enable inspector mode

More Tools > Developer Tools > Chrome Inspector Mode

how to hard reset in inspector mode screenshot

When you see the inspector window appear right click on the refresh button. Then the below will appear. Click the “Empty Cache and hard reload’.

how to hard reset when in inspector mode. screenshot

Once this is complete it is best to check with the Google Page Speed Insights Tool that all the images are compressed and optimised.

Some final words

Understanding what an image is and how it is compressed should help you to make a tailored decision for how to best optimise your site. The above steps, I believe are the quickest and best way to increase your page speed while maintaining the desired quality of your images. If you follow them you should have a page load speed of below 4 seconds and images good enough to deliver a great all round user experience. This great user experience will in turn help your SEO score and ensure Google and other search engines ranks you higher.

 

Additional – Side Note on WordPress Plugins for Image Optimisation

Optimising your images and page speed this way should hopefully mean you would not have to use word press plugins. The reason I would stay away from plugins is because they can crash your entire site even some time after you have installed them.

However, if you do want to optimise further with WordPress plugins then I would highly recommend you do two things before installing anything.

  1. Backup your site at the server side.
  2. Ensure you have ftp access as it is best to delete the faulty plugins within ftp.

 

 

15 thoughts on “How to Compress Images in Bulk | Optimising Images for the Web

  1. It is perfect time to make a few plans for the future and it’s time to be happy. I have learn this publish and if I may I wish to counsel you few interesting issues or tips. Maybe you can write next articles relating to this article. I wish to read even more issues approximately it!

  2. I am extremely inspired along with your writing talents as well as with the structure to your weblog. Is this a paid subject or did you customize it yourself? Either way stay up the nice high quality writing, it is rare to look a great blog like this one nowadays..

    1. It is just a personal blog based on how I am teaching myself to do certain things. Thank you for your kind words

  3. Howdy! I could have sworn I’ve been to this blog before but after checking through some of the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be book-marking and checking back often!

  4. Hello just wanted to give you a brief heads up and let you know a few of the images aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and both show the same results.

  5. Hello there, simply become alert to your blog via Google, and found that it’s truly informative. I am gonna be careful for brussels. I will be grateful in the event you proceed this in future. Many other people shall be benefited from your writing. Cheers!

  6. You’re so interesting! I don’t think I have read through anything like that before. So wonderful to find someone with a few genuine thoughts on this subject matter. Seriously.. many thanks for starting this up. This web site is something that is needed on the web, someone with a little originality!

Leave a Reply

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