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.
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.
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.
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.
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:
2. Dots Per Inches (DPI)
3. Compression Type –Lossy or lossless image compression
4. File Type
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)
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.
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.
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:
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:
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.
2. Choose your compression type. – Known in xnconvert as ‘Actions’
B. Set DPI
C. Compression format is not available to choose from here as the tool automatically does it for you
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.
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
2. Open up ‘File Manager’
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.
4. Select ‘Upload’
Tick ‘overwrite existing files’.
Then ‘select file’. Select the images you have compressed and want to upload.
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
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’.
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.
- Backup your site at the server side.
- Ensure you have ftp access as it is best to delete the faulty plugins within ftp.