How your images load on your web pages plays a vital role with your website maintenance and overall performance. A very high percentage of website owners fail to optimise their images correctly within WordPress, which has a knock on effect with your load time and Google rankings. In this article i will go through some great tips and tools to boost your overall load speed and performance.
Can I Do This Myself?
Time Required: 77%NEED HELP?
The Common Image Optimisation Mistakes
I’m going to take a wild guess and make this bold statement! If you built a website yourself in WordPress then the chances are, nearly all your images are not correctly optimised! DIY website builders believe that if you get the highest quality images possible, your website will look great. Now, to an extent, this is true but within reason as i will explain below.
Another common error is the file extension or image type you have saved the images. PNG images store a huge amount of data causing the image size to be enormous! In 99% of images, the only reason you may need a PNG image is if you require a transparent background. If this is not required then there’s no need for a huge PNG image to be on your website.
Load speed is a ranking factor when Google determines what websites should be ranked in what position, so placing optimal images throughout your site should be priority number one for your website maintenance and performance tasks.
Identifying The Problems
When clients come to use with our WordPress website maintenance services we always perform this single task first… check the images throughout the website. Image optimisation alone can improve WordPress load speed and performance by up to 43%. This is why we always fix this problem first.
To start with we do a simple load speed check to see where there are bottle necks and images taking a long time to load. We usually use Pingdom for this. Simply enter your web page URL (check every web page on your site) and select a server thats closest to your location.
Make a note of your load speed then scroll down the page where there’s a long list of all the web page load requests.
Reorder the list by size and you can see all the images that are large. You can click on the links to view the image if you do not recognise them by the URL. Make a list of all these image URLs on this web page. Its worth running them all through the below processes as you could save a lot of data space that will boost load speed.
How To Start Optimising Your Images
Take the first image on your list and we will take it from there. Look at the image on your web page and how it needs to be displayed. The most important thing is to get the exact size right. If the image only needs to be 500px x 500px then make sure the image is this size. You can resize this through your computer as below, always keep the ratio the same so it doesn’t look stretched.
Assigning the correct size to your images helps web browsers display your image correctly and helps with your Google rankings. This is the first important point you need to get right.
Now we need to get your image optimised and get rid of any unwanted stored data. A great free tool we use for WordPress image optimisation is picresize. Simply upload your image. Once uploaded follow the below settings:
- Ignore stage 1.
- From the dropdown menu under ‘Resize your picture’ select ‘no change’.
- Step 3 select none.
- Step 4 save as JPG and ‘JPG Quality’ should be set to ‘Better’.
- Click ‘I’m done, resize my picture’.
Now you can see the new size of your image and the size of the original. in 99% of the time the new size will be better than the original. If not, there is no point downloading this new image.
If you absolutely have to have a transparent background then select PNG or GIF in step 4.
WordPress Image Plugins
Now you have your new image, which is correctly resized and has any unwanted data stripped from the file you need to upload in again to your WordPress website by replacing the existing image. make sure you have the correct size stated as to the actual size of your saved image.
Its probably a good idea to complete all your images on your web page before proceeding with this next step as it will save you some time.
Install this plugin – WP Smush. This plugin will try and reduce the images even further to boost your website maintenance and load speed. Once installed and activated go to MEDIA > WP SMUSH in your WordPress dashboard.
Now simply click BULK SMUSH NOW
Depending on the amount of images your site has this may take some time. It’s important you keep this page open and don’t navigate away from it, otherwise the process will not be completed.
Once all your images have been smushed you will receive a completion message. if you have a lot of images you may need to click this process again until all images have been smushed. You will be able to see the total amount of savings WP Smush have saved.
There is an option for a paid version (pro). I have not tried this service so I’m unable to give any advice if the paid version does give you a better saving on your images. In your WordPress WP Smush dashboard the Pro version does give you an estimated image saving, nut this could just be a simple algorithm do add 50% to your current data saving number. Who knows! Please comment below if you have seen better savings with the Pro version.
Please be aware, after the recent WordPress 4.6.1 and WP Smush update, we have seen some problems with a few of our clients websites. When clients try to upload images in any way, they were receiving HTTP error messages where the images were not uploading. If this happens to your site, simply deactivate the plugin until you have uploaded all images, then reactivate it and run the process.
Image Website Maintenance & Optimisation Solved!
Hey presto! There you have it, Your web pages images are now correctly optimised. Run the test again through Pingdom and see if there’s an improvement in your WordPress load speed. Make sure this process is repeated on ALL web pages allowing optimal images, website maintenance and website performance.