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<\/em><\/p>\n 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\u2019t worry, as you can easily change the settings and edit any uploaded imagery directly within WordPress through its own image editor.<\/p>\n 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%.<\/p>\n Tip:<\/span>\u00a0Try to reduce your file size to below 250KB (kilobytes) eg 1 quarter of 1MB<\/p>\n 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.<\/p>\n First things first \u2013 you will need an image!<\/p>\n Navigate to WordPress > Dashboard > Media Library<\/p>\n To upload images to your media gallery first click the \u201cAdd New\u201d button – from here you have two options, either drag and drop in your image into the media gallery, or click the \u201cSelect Files\u201d button and then choose an image from your desktop finder window.<\/p>\n Tip:<\/span> Only upload images with .jpeg or .jpg file extensions<\/p>\n 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.<\/p>\n On the right-hand side settings menu, you will find all the image details – these are non-editable<\/p>\n The settings below are editable<\/p>\n Tip:<\/span>\u00a0These editable settings should always be filled out as best as you can to aid screen readers for accessibility users.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n <\/p>\n Below we will take each one of these tools one at a time and explain their different uses and the best practices.<\/p>\n 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\u2019re happy with the cropping border, just click on the crop icon.<\/p>\n 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.<\/p>\n 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.<\/p>\n To flip your image again you are given two options to choose from, either flip Vertically or flip Horizontally 180 degrees.<\/p>\n 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.<\/p>\n 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 \u201cScale\u201d button to resize.<\/p>\n If you make a mistake, or if you accidentally edited the wrong image, there is a built-in WordPress safety net. After you\u2019ve saved your changes you will be taken back to the media item page. Just click on the edit button again.<\/p>\n Don\u2019t forget to save! When you edit images in WordPress you must save or else you\u2019ll lose all your changes, which can be frustrating.<\/p>\n Tip:<\/span>\u00a0If you don’t like your edits, click cancel and the original image will be unaffected.<\/p>\n 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.<\/p>\nImage size vs File size<\/h2>\n
WordPress Media Library<\/h2>\n
Image Settings<\/h2>\n
\n
\n
WordPress Image Editor<\/h2>\n
Editor Tools<\/h2>\n
![\"\"](\"https:\/\/verve-design.co.uk\/wp-content\/uploads\/2019\/01\/tool-bar.png\")
<\/p>\n\n
Crop Tool<\/h4>\n
Rotate Tool<\/h4>\n
Flip Tool<\/h4>\n
Undo or Redo Tool<\/h4>\n
Scale Image<\/h4>\n
WordPress Restore Original Image<\/h4>\n
Save Your Changes<\/h4>\n
Advanced image optimisation<\/h2>\n
On-line Optimiser<\/h4>\n