Optimising images uploaded to WordPress
Importance of optimising images
Images uploaded to the backend (WordPress) must be optimised so files do not appear too large, resulting in slower loading times and/or appear incorrectly in the frontend. This section will teach you step by step how to optimise an image using Adobe Photoshop.
Tools required for this process:
- Adobe Photoshop installed on your computer.
- Specified images.
Open Photoshop. Go to File > New… to create a new document.
Give your document a name, width and height. Make sure you check the Image Specification section to find out which height and width to specify. In this example, we are creating a 1920×1080 sized image named ‘slider_image’
You should now have a new document created, like below:
To insert a new image, go to File > Place… A window will pop up allowing you to choose the photo you want to optimise.
Once you have chosen your image, it will appear on your new document, as below:
You will see anchor points on each corner of the image. Hover your cursor over one of the corners then hold down ‘Shift’. Click and drag one of the corners while holding down ‘Shift’ to resize it. Holding down ‘Shift’ will ensure the image maintains its aspect ratio and prevent distortion.
Resize your image until it covers your entire document like below:
Once it is resized, hit the ‘Enter’ key to apply the changes. Or you may click on the tick button near the top of the window:
Hold down cmd + option + shift +s (ctrl+alt+shift+i for Windows) and a window will pop up like below to save for web:
On the right hand side, you may modify the settings to specify the file type and quality when saving out your image.
For photos, it is recommended that you save the image as a JPeG. For JPEGs, change the quality to 60 (we want to have the smallest file size possible but also make sure it doesn’t lose too much quality). Make sure the ‘Optimised’ option is checked.
The below screenshot shows the setting you should have for JPEGs:
Double check the image size is correct and click ‘Save’. A window will appear to allow you to select which location to save it in. Your image is now ready for further compression.
The final step compresses your image further so we have the smallest possible file size (while still maintaining the image quality). If your image begins to look too pixelated at this stage, skip this step.
Go to https://tinyjpg.com/ and upload the image you just saved in Photoshop. You may upload multiple files at once.