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.

UClimb Blog Featured Images 6

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:

  • Use an image editing platform, such as Canva, which can re-size the image to any size or shape you choose.
  • Compress 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: ImageCompressor or Compressor
  • 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, and 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 – a 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
UClimb Blog Featured Images 5

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

Author

Book A Meeting With Daniel

Choose a day and time that will work for you and Daniel will be happy to give you 30 Mins of his time. 

Book A Meeting With Daniel

Choose a day and time that will work for you and Daniel will be happy to give you 15 minutes of his time. 

Request Website Design, Development & Support

Please fill in your info below and we will reach out to get all the details needed to assist you with your website.

Request Google Search Console Setup

Please fill in your info below and we will reach out to get all the details needed to setup Google Seach Console for you.

Request Google Analytics Setup or Overhaul

Please fill in your info below and we will reach out to get all the details needed to assist you with Google Analytics.

Request Google Business Profile Setup or Overhaul

Please fill in your info below and we will reach out to get all the details needed to get your GMB Profile in tip-top shape.

Request Additional Keywords

Please fill in your info below and we will reach out to get you setup with more keywords.

Let's Get Started!

Please fill in your info below and we will reach out to get all the details needed for your Starter SEO Package.

Let's Get Your Dashboard Setup!

Please fill in your info below and we will reach out to get all the details needed for your Tracking Dashboard.

Let's Get Started!

Please fill in your info below and we will reach out to get all the details needed for your Comprehensive Website Audit.

Let's Get Started!

Please fill in your info below and we will reach out to get all the details needed for your Starter Website Audit.

Let's Get Started!

Please fill in your details below and we will get back to you with your Free Mini Website Audit.

Submit Enquiry for WordPress Image Optimisation

Please fill in the details below.

Once submitted, a UClimb representative will contact you to set up the initial call to discuss further details of your project 

Speak Soon!

Book An Exploration Call!

Elevate Your Business: Unleash Your Marketing Potential

Ready to rise above the competition? Book a no-obligation exploration call today. We will discuss how we could be your marketing co-pilot and leverage your point of difference. 

Schedule your free call now—let’s help you transform your business online. 

Enterprise SEO Package

Start Your SEO Journey Today

Please fill out your information below to request a quote for an ENTERPRISE SEO PACKAGE! A UClimb team member will be in touch with you soon

SEO Blitz Package

Start Your SEO Journey Today

Please fill out your information below to request a quote for the SEO BLITZ PACKAGE! A UClimb team member will be in touch with you soon

Platinum SEO Package

Start Your SEO Journey Today

Please fill out your information below to request the PLATINUM SEO PACKAGE! A UClimb team member will be in touch with you soon

Gold SEO Package

Start Your SEO Journey Today

Please fill out your information below to request the GOLD SEO PACKAGE! A UClimb team member will be in touch with you soon

Silver SEO Package

Start Your SEO Journey Today

Please fill out your information below to request the SILVER SEO PACKAGE! A UClimb team member will be in touch with you soon

Let's Get Started!

Please fill in the details below to give us an idea of what you want to achieve. 

We will then use this information when we make our initial exploration call with you as a starting point for your success with UClimb. 

Once submitted, a UClimb representative will contact you to set up the initial call to discuss your marketing needs. 

Speak Soon!