Hey everyone, I’m Kelly, and today I’m going to teach you how to optimise your images for WordPress. In this video, I will share my favourite image optimisation plugin, which will really take your image optimisation to the next level.
Images can make or break your website. They can elevate your design, affect your visitor’s emotions and communicate so much, but if they are not optimised, they’re going to slow down your site and affect your SEO.
1. Ensure your images are in the correct format
The first step to optimising your images is to ensure they are in the correct format. There are many different formats for images, and I’m going to talk about the most used today: JPEG, PNG and GIF.
JPEG
JPEG is the ideal type for photographs, especially plain images without any text. These are significantly smaller than the other file types, but they don’t cope well with high contrast. For example, black text on white, wouldn’t work well for a JPEG, and they don’t support transparency.
Transparent backgrounds
If you want an image to have a transparent background (you can see through the background), you can’t use a JPEG. For example, if you want to put an image at the top of your website and wanted the logo to ‘disappear’ into the header, the background of that image would need to be transparent, so you would need a PNG file.
PNG Files
PNG files are perfect for icons, logos and drawings; anything with high contrast. Their ability to save with the transparent background is their main feature. PNGs can also be compressed without losing any quality, so the fine detail of a logo or a sketch will be preserved far better than if you used a JPEG.
GIFs
Finally, GIFs. While they have their place on social media and in email marketing, you should avoid using too many on your website, as they can be particularly large file sizes and the quality can be poor. One or two GIFs are acceptable, but when you’ve got multiple GIFs all loading one after another, things are going to slow down, especially for a mobile user, and they can also make your website look unprofessional. Therefore, think about whether GIFs are the right choice for your business and brand.
2. Sizing the image correctly
Now we have the correct image format, we need to ensure that it’s sized correctly before we can start uploading the images. If your images are too small, they’re going to be blurred, and if your images are too large they’re going to really slow down your website, which is terrible for your user experience and also for Search Engine Optimization (SEO).
The best way to find the size of the image you need for your particular container is on your website itself.
Images in Elementor
In this video, I have created a dummy website in Elementor for a hair and beauty salon. If you don’t have Elementor, your screen could look different to this, but it’s the same principle. You can check the size of the image you want to replace by clicking on it, and it will open in your media library.
In ‘attachment details’, we can see the size of the image: 400 pixels by 400 pixels in this example, which is also a square and a JPEG. If you are still unsure which file type to use, just match the one your developer uploaded or the one included in the template.
Images in WordPress Gutenberg Editor
If you are using the standard WordPress Gutenberg editor, you would head to a Gutenberg page, click on the image you wanted to replace, click on ‘replace’ and ‘open media library’, and it will do the same thing as in Elementor. It will bring up the attachment details and give you the size of the image you want to replace.
No Website, no Worries
If you haven’t got a website yet, you don’t know what your image should be, or you feel the one you’ve just uploaded is too big, then you can always work on the basis that the maximum image size is 2000 pixels wide. However, even that should only be used on images that are the full width of the site (a ‘hero image’, for example).
Once you have your main image, you can then work your way down, so if you want your image to be half of the size of the screen it will be 1000 pixels, or a quarter would be 500 pixels, etc. However, be cautious, as it’s not as precise as the first method I mentioned.
Free Stock Images on Unsplash
Unsplash is a free website that you can use to find free stock images. If you’re yet to create any photos for your business, or you’re looking to create an overview to give yourself an idea of what you need in a brand photoshoot, use Unsplash, it’s fabulous! I found an amazing image for our hair and beauty salon example, by Bryony Elanor, which is a picture of tortoiseshell nails and I will need to resize it.
Before we get started with resizing, there are a few rules we need to follow:
Be careful not to enlarge an image.
For example, if your image is 500 pixels wide but you need it to be 1000 pixels wide and you enlarge it, when you then upload it to your website it’s going to be blurred. If you need an enlarged image, ask your photographer for a larger version, or if you found it on Unsplash, search for an alternative one.
Maintain the proportions of an image.
For example, the nail image in the video (6:45) is a portrait image, and if I dragged the top of the image down to resize it to the square I require, it would squash the image and make it look distorted. What I can do is crop the image into a square to fit my website. You can resize images in the media library on WordPress, however, I don’t recommend this as the quality can be compromised and it does odd things to the images. I tend to use Lightroom or Photoshop and edit the image before I upload it to WordPress, but if you don’t have those, you can use Canva, which is free and easy to use and it’s the method I show you in the video. If you don’t have a Canva account, you can create a free one, and still use this method – you don’t have to pay for pro! Once you have your Canva account set up, click on ‘create a design’ and then ‘custom size’. I generally put in 400 x 400 pixels because that’s how big my image container is, but you can use whichever dimensions you need. Click on ‘create new design’, and you will have a square image you can use on your website. I then upload the image I saved from Unsplash, by going to ‘uploads’, ‘upload media’, click on ‘device’, this will bring up my file, which I double click to get into Canva, and I can now click and drag it into my image/canvas. If I save this as it is and upload it to my website, it’s going to have a peculiar white space around it, which doesn’t look very pleasing, so what we can do is resize it. If I click on the corner of the image, I can drag it to the right width and move it around, so it’s perfectly within the square. You can see on the video (9:15), I’ve cropped the image and it looks good as the proportions have been maintained (rather than skewing it) which is quite difficult to do in Canva anyway. Now all we need to do is click on ‘download’ and it will suggest a PNG, but this is an image, not a logo, so we don’t need transparency, therefore I’m going to save it as JPEG. I leave the size and the quality as they are and just click on ‘download’. That’s now ready to load into my website, but as you can see on the video, it’s named ‘Untitled Design’, which we need to change.
Change the name of the file.
‘Untitled Design’ is not very helpful to search engines, as search engines (like Google) need information about what the image is showing. This makes it more likely that they will find you when someone searches. For example, our salon from our mock-up website was based in Brighton and these particular nails, are a tortoiseshell design. If I was someone who was looking for a nail salon in Brighton that did tortoiseshell nails and I happened to do an image search, we want this one to come up. To ensure this happens, we can right-click on the image and rename (if you’re on a Windows computer, it’ll be slightly different) the file as ‘tortoiseshell-nails-flair-salon-Brighton’. I’ve put dashes in the file name instead of spaces because search engines will read it as a space, it’s also better for your website and it’s best practice to use dashes rather than spaces, so try to use this format every time you upload to your website.
Now that my image is perfectly optimised, we need to go back to WordPress and upload it:
- Click on ‘choose image’, and then ‘upload files’ (this is in Elementor, but it’ll be a similar process for any sort of builder within WordPress).
- Click on ‘select files’.
- Click on ‘tortoise shells nails’ (you will see how much smaller the image now is: the original file was 1.4 megabytes and this is 24 kilobytes, which is far smaller) and the image is now uploaded.
- In the title, it will have brought in our file name, but we need to get rid of the dashes and add in any capital letters, then copy and paste it into your alt text. Your alt text is super important as it is great for screen readers, as well as SEO. Even if the image that was already there didn’t have alt text, you should make it best practice to always enter your alt text. If someone was partially sighted and was reading your website using the screen reader, without the alt text, they won’t know what this image is, especially if it’s called ‘untitled one’, as it will literally read out ‘untitled one’, rather than ‘tortoiseshell nails in Brighton’. Dependent on your theme, you may want to write a caption or description, but I leave that blank in this video.
- Click ‘insert media’, and your image will be uploaded.
- If you then click ‘update’ and come back to your website, you can see my new nail image has been uploaded.
- You could stop there but I also recommend you install the plugin ‘Optimole’. It’s got a powerful free plan that optimizes your images even further and, best of all, it allows your visitors to view the image in the right size for their screen. This means if they’re looking at it on a tiny mobile screen that’s only 200 pixels, it’s not going to show them in an image that’s 2000 pixels wide, it will resize it for them. Best of all, there’s absolutely zero coding for you, so you will make your website retina ready all in one easy process.
Installing Optimole
- If I come back to my dashboard and go down to ‘plugins’, ‘add new’ and search for Optimole it will be there with the subheading, ‘Image optimization and lazy load service’.
- Click on ‘install’, then ‘activate’.
- If you read the information on the screen that comes up, it says you have access to their image optimization service free of charge until you hit 5000 visitors per month. I guess once you’re hitting 5000 visitors per month, you won’t mind paying for the premium version!
- You will now need to click on ‘Register and email the API key’, pop your email address in when prompted, click ‘register for key’, and they will send you an email.
- Once you have the key from your email you can paste it into the empty box, click on ‘connect to Optimole service’ and it will connect your site to the Optimole service.
- Once completed Optimole will protect your website and optimise any images you upload and also resize them so they’re the right size for the device that’s requesting to view them, and you don’t have to change any settings.
- If you did want to, you can click on the settings and have a read through to see if there are any you want to change. Just read it very carefully before changing them.
Thank you so much for watching my video today. It’s been really lovely to teach you and please ask any questions in the comments below. Don’t forget to subscribe before you go so you don’t miss my future videos. I’ll see you again soon.
