Using images on your WordPress website is easier than ever with simple drag-n-drop uploads and editing from within your dashboard. However, the ease of uploading images has lead to many sites being very badly optimised with huge load times just because of unoptimized images having to load. Images from smartphones can be 5mb + in size so just one image added directly from an iPhone to your WordPress site can lead to a huge load time.

Google also considers the page load time to be a big ranking factor in SEO, so the faster your site loads the better your position will be in search. As images are the largest asset on most sites starting with optimising and compressing images is the most logical thing to do. In this guide, we will explain how you can resize and optimise your images before you even upload them to your CloudCanvas WordPress website. CloudCanvas has a built in image optimizer but it is a good practice to also ensure your images are ready for the web before uploading.

 

Step 1: Image Resizing for the web

Most likely you need to upload an image from a camera, this means the image is likely going to be 10megapixels in size which is way too large for a website. the largest size you really should consider using is 1920×1080 which is around 2megapixels and that is still likely too large. If you are unsure how large your image needs to be then we recommend you resize so the longest edge is 1024px.

How to see image resolution and resize image in windows

To resize a picture using Paint

  1. Open Paint by clicking the Start button Picture of the Start button, clicking All Programs, clicking Accessories, and then clicking Paint.
  2. Click the Paint button Picture of the Paint button, click Open, click the picture you want to resize, and then click Open.
    On the Home tab, in the Image group, click Resize.
  3. In the Resize and Skew dialogue box, select the Maintain aspect ratio check box so that the resized picture will have the same aspect ratio as the original picture.
  4. If the Maintain aspect ratio check box is selected, you only need to enter the horizontal value (width) or vertical value (height). The other box in the Resize area is updated automatically.
  5. Do one of the following in the Resize area, and then click OK:
  6. To resize your picture by a certain percentage, click Percentage, and then enter a percentage to reduce the width by in the Horizontal box or a percentage to reduce the height by in the Vertical box.
  7. To resize the picture so it’s a specific size, click Pixels, and then enter a new width in the Horizontal box or new height in the Vertical box.
  8. Click the Paint button Picture of the Paint button, point to Save as, and then click the picture file type for the resized image.
    Type a new file name in the File name box, and then click Save.

How to see image resolution and resize image on your Mac

Resize your image using Preview App

  1. Right click your image > Open with > Preview App
  2. Click toolbox icon in top right corner of Preview App
  3. Click adjust size icon on the toolbar (box icon with arrows pointing outwards diagonally)
  4. In the image dimensions window enter the width 1024, you may have to select pixel units if cm or other is in the dropdown selection. Make sure the padlock icon is locked and the ‘Scale proportionately’ box is ticked.

 

Step 2: Optimising your images for the web

Resizing your image is just the first step, this step is recommended but as CloudCanvas does optimise your image it isn’t essential. We optimise our images before upload, if the CloudCanvas system can optimise further it will but if no more optimisations can be made then the image won’t be processed. Images are automatically optimised when you upload to CloudCanvas so you don’t need to do anything when uploading.

We recommend you also run your images through TinyPNG before uploading to your site, this is not just a good practise but also ensures that your images are fully optimised.

 

TinyPNG Image Optmising

TingPNG allows you to upload your images and then you can download an optimised version, you can see the savings instantly.

 

Step 3: Optimise the image name

Now you have resized your image you can make the image name better, using a long default name such as our sample A6000_19-04-17_DSC00226.jpg is not very good for a number of reasons. If you have many images with long names such as this it will increase the overall HTML size of the page. WordPress will also generate an image title using your image name, if you forget to change this then the image name would be “A6000_19-04-17_DSC00226” which is terrible for SEO.

We recommend that you rename your images to keep the name short and relevant. You can use very short names if you wish but be sure to add a relevant title and alt title when you have uploaded.

 

Conclusion

Now you should have fully optimised images ready to upload, don’t forget to add a title and alt title once you have uploaded to your site.

Below is a sample of our optimised image and a link to the unoptimized image, the original was 8.2mb by resizing to 1980×1229 pixels the image was reduced to less than 400kb and by optimising with TinyPNG the image is now 326kb.

Image Optimising Sample

This is our fully optimised image as you can see there is no major loss in quality.
Picture by Adam Haworth