You are currently viewing WordPress Image Optimisation

Why Optimise Images On Your website?

In a word – speed. Every great website has great images but adding large images to your website reduces page-loading speed, which is a bad user experience, and search engines including Google will penalise for this – the likelihood of appearing on page 1 of the search will reduce.

Best Image Size

This is where optimisation comes in – there is no point having a high-resolution image just to be viewed on a computer screen at a small size, even more so on a mobile phone.  You need to reduce the image size to suit the size it will be displayed by your audience, and for most websites, this includes optimising for mobile phone viewing too. You may want to save 3 image sizes, for desktop, tablet and phone.

How To Check What Size An Image Is

You can right-click the image (either open or closed) and select properties or file info – this will tell you the image size width x height (in pixels). It will also show the file size in Kilobytes.

Check How Your Website Appears On Mobile

In the same inspect-mode mentioned above, you can also change the webpage view from desktop to tablet or mobile quite easily, using the icon next to the inspect icon. A variety of different phone sizes are available, you can choose the one you want. Mostly you will see that they all behave in a similar way, the content has to be rearranged, and menus change from horizontal to vertical, as you reduce available screen width. Alternatively, you can reduce the size of your browser window width to make the webpage think it is displaying on a phone.

Wordpress Image Optimisation 1

Inspect An Existing Webpage To Check Image Size

There are many tools you can use to check the image size needed on your website, or you can ask your developer. It will be built to a particular size (in pixels) for each section. Some pages may be customised with special image sizes, but mostly they will follow a pattern throughout the website. One tool we use is the PixelZoomer chrome extension. This takes a copy of the webpage you are on, and you can easily measure image dimensions in pixels.  Another way is to right-click the page (in Chrome) and select “inspect”, then click on the inspect icon in the top left of the inspect pane. Hover over various parts of the page you are inspecting and it will display the image size.

How Do You Make Your Images Smaller?

Once you know how big the space is on your webpage, and how big your chosen image is, you can optimise your image. There are three main ways to do this:

  1. Use image editing platform, such as Canva, which can re-size the image to any size or shape you choose.
  2. Comress the images (one by one, or in small batches) with image compressing or optimising software. This is often quicker, but you generally do not choose what size the image finishes, so a bit of trial and error may be involved. Two examples of free image compression websites are: https://imagecompressor.com/ or https://compressor.io/
  3. Use an image optimisation plugin on your website. Some websites come with this built-in. If you use WordPress, there are a wide range of plugins available. One of our favourites is Imagify which has a free version good for around 200 images per month. ShortPixel is another popular option.

Pros & Cons Of The Most Common Image File Types

Vector images

Vector Images are the fastest loading and crispest/clearest image types for simple graphics.  Often less than 10kb, even if very large in size. 

Curved lines never go jagged or pixelated as low-res jpeg images do. 

Not a format you can use for photos, but a great format for things like simple text logos, shapes, and lines, anything that has a simple outline and a solid fill. 

Examples of vector file types – svg vs eps images:

  • .svg – a great vector format for websites
  • .eps – another format of vector image, however, designed for the world of print, not websites – convert eps images into svg if you want to use them on your website

Raster Images

The term ‘raster images’ basically means ‘not vector’. Raster images are used for photos of other images made of pixels, rather than lines and shapes, sometimes call bitmaps, or just image files.

Examples of raster file types – jpg vs png vs webp images:

  • .jpg – or Jpeg – very common file type for photos, and one of the best for websites. Often has the best visual clarity for small file size. One drawback is you can’t have a transparent background
  • .png – allows transparent background
  • .webp – Google’s preferred file type for web images – very similar to JPG, but sometimes smaller, also supports transparency
Wordpress Image Optimisation 2

How To Use IrfanView Software

If you have large images and want to reduce the size of them offline before uploading to your website, there is a great free image editing software program called IrfanView.  Another alternative option is Squoosh (from Google). 

Below are some instructions on how to download and then use the IrfanView software to optimise images for your website.

We recommend that you use the 64-bit version unless your computer is over 5 years old or is running Windows Vista.

Firstly, you will need to install the software – this can be done by visiting the website and the option to download is right on the front page. Follow the steps for set-up keeping all the default settings.

Once this is done, find the image that you want to edit in your folders. Right-click, and hover over ‘Open with’. This will then show you an option called ‘IrfanView 64-Bit’. Use this.

Using the third icon along from the left, called ‘Save As’, you will now need to ensure that the slider that pops up to the right is somewhere between 60-80% quality – we recommend trying lower, and if the image doesn’t look great increase the bar up slightly until it is clear.

Just before saving, ensure that it is saving as a .jpg at the bottom. We don’t recommend that you use .png for phototype files, as the size normally ends up larger than .jpg.

If you’re still a little unsure about this, please call us and we will be happy to offer help where we can!

Our Reviews

Rick Clark
Rick Clark
2022-01-27
Verified
We've used UClimb for several months now and found their services of great benefit to our company in the ever-evolving world of Google optimization. Daniel and his team will work with us and review our progress to support monthly SEO activities and any additional campaigns. Would recommend you contact them for a chat!
Annie
Annie
2022-01-27
Verified
Daniel and the team at UClimb have excellent knowledge and experience in SEO, CRO, content and many other aspects of digital marketing. They keep on top of latest google changes and respond accordingly giving us peace of mind. They always do the best for the client, explaining in simple terms what's happening and what we can do to improve and get the best results. Very trustworthy and enjoyable to work with. Highly recommended.
Rob Smith
Rob Smith
2020-09-30
Verified
Daniel and his team at UClimb are knowledgeable and great at what they do, as well as having the ability to convert the world of techie digital stuff into layman's terms. They've been a great partner to work with and we look forward to collaborating further with them.
Paul Fellows
Paul Fellows
2020-09-17
Verified
We have had a great experience with UClimb compared to a number of bad experiences with other companies. UClimb produce RESULTS!!! We are in the process of creating a corporate website and Daniel and his team are doing an amazing job of it. Communication is one of the most important things in a project like this and we are very happy with the regular meetings and updates. UClimb can be TRUSTED!!!
Rick Davies
Rick Davies
2020-02-18
Verified
Daniel at One SEO (now UClimb) has a very good grasp of SEO and Website Optimisation. He keeps up to date and is knowledgeable on the latest Google changes and algorithms and tracks the results closely to respond quickly to any changes. He also uses a clear reporting system / live dashboard so results are visible and can be proved. Would recommend.
Envoprint
Envoprint
2019-11-19
Verified
Daniel has been working with Envoprint for a while now, helping to significantly increase our Google rankings to ensure a high flow of enquiries though our website. He has worked closely with staff to ensure that our needs are covered, and we would all very much recommend him for your SEO and CRO requirements!
Paul Conway
Paul Conway
2019-10-17
Verified
Great to work with, explains what and why he is doing certain things, has been happy to accommodate ongoing changes and directions and has provided solutions within budget. Currently working with One SEO for both SEO and PPC campaigns, have already referred on to friends and would strongly recommend to other start-ups and SMEs.
Stephen Smith
Stephen Smith
2019-09-30
Verified
For SEO and CRO solutions I recommend Daniel of One SEO 100% - I've been working with Daniel for a few weeks, we discussed a sensible package with a balanced level of spend and already I am getting enquiries though the website. Thanks Daniel.
Isobelle Cocker
Isobelle Cocker
2019-04-24
Verified
Daniel at One SEO is extremely knowledgable about all things SEO and online marketing. Daniel has worked closely with our team to ensure he understands the business in order to provide the best results. He has not only worked to increase our company's online rankings but also worked collaboratively alongside our marketing team, outlining each stage of the process. Daniel is extremely details orientated and will not leave any stoned unturned to ensure that he delivers a comprehensive service to his clients. I would highly recommend One SEO to anyone looking for SEO support.

Contact Us

Contact Us on Algorithm Blog
Call?
Services Required *