January 19, 2019

WordPress Image Optimisation

If you are a WordPress site owner and would like to know more about the best practices you should follow when optimising your images for the web then below is a simple guide with some tips and advice on the tools which are available to you with your WordPress media gallery.


So why is image optimisation important?

Have you ever heard people complaining a website is slow? A slow loading web page can be due to many things, site structure or code delivery, but in most cases it will be due to poorly optimised imagery or in other words the file size of the images on the page being too large causing them to take too long to load. This can lead to viewer frustration, lower browser ranking and in some cases can result in loss of custom.

Stat: According to Kissmetrics –

47% of visitors expect a website to load in less than 2 seconds, and 40% of visitors will leave the website if the loading process takes more than 3 seconds

So ideally you are looking to optimise your imagery to have the smallest file size possible, but with no loss of quality – this sometimes can be a trade-off of importance. In a lot of cases, the image size is overlooked before uploading resulting in higher file sizes, but don’t worry, as you can easily change the settings and edit any uploaded imagery directly within WordPress through its own image editor.

Image size vs File size

Example: Say you want to display an image on your site and ideally would like the image size to display 300px v 300px. Most good DSLR cameras will capture an image size of 3000px v 3000px depending on the camera setting. If you resize the image to the preferred size of 300px v 300px, this would reduce the file size and speed up delivery by over 90%.

Tip: Try to reduce your file size to below 250KB (kilobytes) eg 1 quarter of 1MB

WordPress Media Library

The WordPress Media library is where you will find all the uploaded imagery for your site, from here you can – upload, edit file settings, delete and edit images so they are web ready.

First things first – you will need an image!

Navigate to WordPress > Dashboard > Media Library

To upload images to your media gallery first click the “Add New” button – from here you have two options, either drag and drop in your image into the media gallery, or click the “Select Files” button and then choose an image from your desktop finder window.

Tip: Only upload images with .jpeg or .jpg file extensions

Image Settings

Once you have uploaded an image to the media library you can single click on any image which will take you to a pop out window with all your images settings for that selected image.

On the right-hand side settings menu, you will find all the image details – these are non-editable

  • Image URL
  • Filename
  • File type
  • Uploaded on
  • File size
  • Dimensions

The settings below are editable

  • Title text
  • Caption text
  • Alt text
  • Description text

Tip: These editable settings should always be filled out as best as you can to aid screen readers for accessibility users.

The last useful action you will find on this screen is that from here you can delete your image completely – In the settings panel you will see Delete Permanently in red text, which as the name suggests will delete the image permanently off your WordPress Server – this cannot be undone.

WordPress Image Editor

WordPress has a great built-in image editor which most users are unaware of, this simple, yet powerful editing tool which is easy to use and is perfect for making optimisation changes on the fly. Below we will go through the settings, editing options and best practices to follow for optimising your images.

 

Editor Tools

To edit an image in WordPress, Navigate to – Dashboard > Media Library > and single click the image you would like to edit, then under your selected image you will now see a button saying edit image, once clicked you will see the settings have changed and you now have access to some powerful tools to which you can use to optimise your image.

 

  • Crop tool
  • Rotate tool
  • Flip tool
  • Resize tool
  • Scale tool

Below we will take each one of these tools one at a time and explain their different uses and the best practices.

Crop Tool

To crop your image, simply use your mouse cursor to set your crop selection, once you have selected the area you would like to crop, you can still adjust the cropping size by drag and dropping the edges of your selection bounding box. Once you’re happy with the cropping border, just click on the crop icon.

In addition to the freehand drag and drop cropping tool, there are also advanced settings where you can set a specific selection or aspect ratio crop box. In the setting panel on the right, enter either your selection or aspect ratio settings, this will constrain your crop box by a maximum size or shape. So when you click and drag your cursor will be constrained by these values.

Rotate Tool

If you would like to rotate your image you have two options to choose from either clockwise or anti-clockwise, which when clicked will rotate your image in 90 degrees increments left or right.

Flip Tool

To flip your image again you are given two options to choose from, either flip Vertically or flip Horizontally 180 degrees.

Undo or Redo Tool

If you decide to undo a change, you have a lifesaver option to undo an action or redo action after the undo action was clicked, which will click back one change at a time.

Scale Image

Use the scale image option to proportionally resize your image. This is a great tool if you like the image, but just need it to be a certain number of pixels wide or tall. Just type in the pixels you want (width x height) and click the “Scale” button to resize.

WordPress Restore Original Image

If you make a mistake, or if you accidentally edited the wrong image, there is a built-in WordPress safety net. After you’ve saved your changes you will be taken back to the media item page. Just click on the edit button again.

Save Your Changes

Don’t forget to save! When you edit images in WordPress you must save or else you’ll lose all your changes, which can be frustrating.

Tip: If you don’t like your edits, click cancel and the original image will be unaffected.

Advanced image optimisation

For more advanced image optimisation there are many good free and paid tools available, either online or extensions you can add to WordPress to extend its capability.

On-line Optimiser

Compressjpeg is a free tool where you can bulk load 20 images at once – set your optimisation settings – click start and after a few seconds, all the optimised images can be downloaded, from there you can then upload these optimised images to your WordPress library.

WordPress plugin

You can also add one of many free and paid plugins directly from the WordPress site or from the plugin dashboard within WordPress. There are lots of plugins out there so we recommend doing your own research.

But we would suggest looking at WP Smush which is the most popular plugin for image optimization and compression, as It removes all unnecessary metadata from your images and then scales them for you before adding them to the Media Library.

Note: These two options will not crop your image, so they can be used in coalition with other tools in the WordPress image editor.


Now that you can see the advantages of optimising your images and understand the powerful tools WordPress provide, we encourage you to have a go!

If you have any questions please contact us here at support@verve.uk.eu

Edward Fellows
Digital Executive
Website Optimisation
Google Analytics Partner
Google Adwords PPC Partner
Search Engine Optimisation
Graphic Design & Development
t: 01743 360000
e: edward@verve-design.co.uk

Edward is one of Verve's Online Executives, who has developed an excellent working understanding of all things Digital. Edward has a wealth of knowledge and understanding of Optimising Website Designs, and Content for modern day online requirements.

In his spare time, Edward likes to try and keep fit and enjoys being out in our beautiful Shropshire countryside.

Close
  1. 01743 360 000
  2. info@verveuk.eu