Why is image optimisation so important?

Image optimisation is extremely important when it comes to the speed of your website. Without proper optimisation, your website could end up being very slow due to the sizes of the linked assets. So without image optimisation, your website is soon going to get very sluggish and we really don’t want that to happen.

When it comes to images we usually recommend that they are saved as 72dpi and have a maximum width or length of 1000px on the tallest side. Don’t worry this will all make sense later but for now lets start from the beginning.


Images in the WordPress Media Folder

The Media Folder is where you can manage the images and files uploaded to your website. If you upload an image to a Page or Post, the image will be stored here in the Media Folder. This allows you to re-use images that have been previously uploaded. You can also upload images here which I will be showing you later on in this article.


How to optimise images using online tools

Convert to 72dpi

We want to start by changing the dpi (dots per inch) of our image. You can do this by going over to Convert Town and simply entering 72 into the DPI Value box and then dragging your desired image into the oval drop zone or choosing it manually. I have highlighted these areas in the screenshot below:

0-1


Resizing Images

Next we want to resize our image so that the largest side of the image is at a maximum of 1000 pixels. To do this head over to reizeimage.net and begin by uploading your image in section 1 which you can see below:

1

Once you’ve uploaded your desired image you want to head over to section 4 which you can see below. In this section you will be resizing the image, it’s important to make sure that “Keep Aspect Ratio” is selected or else your image is only going to get resized on one side and as you can imagine it’s not going to look good. Next you want to change the largest number out of the 2 boxes to 1000. If you don’t have a number thats over 1000 in any of these boxes then you don’t need to resize your image, you can quit out of this window and upload your image to the Media Folder which I will show you in the next section.

2

Next head over to sections 6 & 7 which you can see below. In this section we will specify how we want our image saving. Simply select “JPG” and “Normal compression“. Once these options have been selected you can then click the “Resize Image” button. I’ve highlighted these options in the screenshot below.

3

Finally when all the above steps have been completed you can download your resized image by clicking on “Download Image” which you can see below:

4


Uploading To The Media Folder

Once you have your resized image ready you can now upload it to the Media Folder to then add it to your page or post. To do this start by clicking on the “Media” button on the left menu which you can see below:

mf1

Next click on the “Add New” button next to Media Library at the top of the page:

mf2

This will then open up a drop zone so you can upload your resized image. You can either drop the file into the drop zone or select it manually:

mf3

Once you’ve uploaded your resized image you will see some options like this on the right hand side:

mf4

In the “Alt Text” field that I have highlighted orange you want to put a short accurate description of what the image is. This is important to do as this tells the web browser what the image is so if an image doesn’t load for some reason a description that you have set will show. Alt Text is also used to tell the blind exactly what is on the page by web browsers speaking out the Alt Text so make sure you are specific in what you write.