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
