How To: Optimise Images for your WordPress Website

Frames for optimised images post

This how-to guide shows you how to optimise images for your WordPress website for FREE!

Page load speed is important and having a slow site can hurt your ranking in search engine results pages (SERPs). Regardless of the theme you are using; most of us will find that media is the heaviest content on your page. By optimising this content you can improve your page load times, improve SEO and reduce the bounce-rate of your pages.

Contents

Optimising Images Pre-WordPress Upload

Optimising Images Already Uploaded to your Website

Optimising Your Images Before Uploading to WordPress

Start by taking your image.

If you’re doing this for a new site and don’t have many of your own images; use royalty free stock photos from sites such as Pexels or Unsplash. Whether you download an image or take a photograph, it’s likely not suitable for website upload straight away. For this exercise I’m going to optimise a landscape image to be a square, 900 x 900 pixels image that loads fast.

Snapshot of download folder with a raw image from Pexels.com

n this case 2.7 MB is way too big for fast-loading web content and the dimensions of it are way too big for the biggest desktop monitor. In most cases you will need to change the aspect and reduce the size and dimensions of the image.

Crop your Image to the Aspect Ratio

With apps like Adobe Photoshop you can reduce dimensions and reduce the size very quickly but they can be expensive. For this demo I’m going to show you the free way with an online tool called BeFunky. Simply head to their homepage and click “Get Started” in the top right hand corner.

Snapshot of BeFunky.com’s homepage.

Click “Edit a Photo” on the left.

Click “Open” > “Computer” and select your image.

Once your image has loaded click “Crop” in the left-hand menu. If your image is already the right aspect, skip to “Reducing the Dimensions of your Image

You’ll then get a Grid over your image with some options for the dimensions.

If I wanted a square image I would reduce the the largest dimension (in this case the width) to match the smallest dimension (in this case the height). Simply enter the new pixel value and drag the grid over the part of the image you want to save.

Click the blue tick and then the original left hand menu will return. Click “resize” (this is to reduce the dimensions, but won’t reduce the file size enough to optimise the image for upload).

Reducing the Dimensions of your Image

Once you’ve clicked resize you’ll see the dimensions of the image. Make sure you tick the “Lock Aspect Ratio” box.

Reduce one of the dimensions to the desired size. If the “Lock Aspect Ratio” box, the other dimension will reduce automatically. Then click the blue tick. You can now save the image by clicking “Save” > “Computer”.

Change the Filename and format if you wish and click “Save”. Don’t reduce the quality as this will affect the visual quality of your image.

Comparing the original versus our new image.

Compress your Image Without Compromising Image Quality

Head on over to TinyPNG and click “to compress your image “Drop your .png or .jpg files here!” and select the file you downloaded from BeFunky. You can compress up to 20 files at once here. So, it’s a good idea to change the aspect ratio and reduce the dimensions of all your images before compressing them.

You’ll see a status bar of each image you upload and then compress. When it’s completed click “download” or “download all” if you’ve compressed in bulk.

All three images compared

Upload Your Image

We’ve reduced the size of the image by over 98%, improving your load speeds and improving your SEO. Now login to your WordPress site admin and select “Media” > “Add New” in the side menu.

Then click “Select Files”

Don’t forget to click “Edit” so you can enter an Alt Text for the image.

“Alt Text” improves your SEO. In a couple of words explain what the image is and its relevance to your content. Also include a keyword!

Product of your work. (I would also use a WordPress plugin as you may be able to optimise further!)

Laptop image optimised pre wordpress demo

Optimising Images Already Uploaded to your Website

Even if you’ve tried your best to optimise your images before the upload you can still optimise further. You can also add features such as “lazy load” which will help your load speeds on mobile devices.

Download your Free Plugin to Optimise your Images

There are a few plugins you can use. Imagify is pretty good. You’ll have to pay for it though unless you subscribe to something like the caching plugin WP Rocket. This plugin includes the image optimisation for free. My favourite plugin for image optimisation and the one I’ll be using for this how-to is Smush, follow this link and click “download”. We have experienced issues with images displaying with Smush. Thus, when moving from a demo site to your final domain only use this optimisation plugin on your final site.

Now upload the plugin by logging in to your /wp-admin/ and selecting “Plugins” > “Add New”

Then click “Upload Plugin” near the top

Then click “Choose file”, select the file from your local machine and then click “Install Now”

Now wait… and a few seconds you should this page should load where you need to click “Activate Plugin”

You’ll then be directed to plugins page. Scroll down to “Smush” and hit “settings”.

Basic Setup of the Plugin

You’ll be welcomed by a set up screen, click “begin setup”

Enable automatic compression, click “next”, enable stripping of metadata, click “next”. In the next step, enable lazy loading (you can turn this off later if it conflicts with your theme/another plugin), click “next”. Then you can choose if you wish to share your usage data and click “finish set up wizard”.

You’ll then be directed to the Smush settings page. You can “smush” imagesindividually but if you scroll down you can “bulk smush” up to 50 images at a time with the free version.

If you have more, don’t worry. When you click “bulk smush” it will compress the first 50 images. You’ll just have to click “resume” to start the process again for each remaining block of 50 images. If you have 1,000’s you may want to upgrade the plugin to Pro!

There you go! You’ve just optimised all your images for FREE!

thanks for reading

Thanks for reading and we hope you’ve found the information in this post useful.

Please subscribe to receive notifications of further posts and feel free to comment below.

Do you want more traffic?

Our blog gives you the simple tactics for ranking higher