Optimising images to improve the performance of your WordPress Website

By:

Date: 8 July 2021

An open laptop running photo editing software

Do you really know the benefits of optimising images for your website? It's a practice that's easily overlooked, but in truth, it's one of the most beneficial things you can do for your WordPress website.

What does the process involve?

By optimising your images, you're aiming to deliver the highest-quality imagery in the proper:

  • Format
  • Dimension
  • Size
  • Resolution

...all the while maintaining the smallest size possible. There are multiple ways to optimise a picture, and these include resizing, caching, or compressing. Images are the backbone of any website.

As consumers, we love to interact with images and interactive content more than the average, wordy blog post. According to research, the stats bear this out; around 64% of a website's weight is made up of images. By optimising these snaps, you'll increase the loading speed of your website. We all value speed and efficiency, and if your website can't offer this, users are more likely to abandon your site. According to Elementor, it's a good idea to keep your page size to 1MB or less when building a website - and optimising your images is the best way to stay within this parameter.

The two most common image types used on websites

Below are two of the most typical image formats uses online:

  • Raster Format Images - These include JPEGs, GIFs, and PNG’S. Each pixel has one or more numbers associated with it, generating a colour that the pixel should display.
  • Scalable Vector Graphics (SVG) - This image type can scale to any size while maintaining its original quality. They also retain their original file size, making them a popular choice for website builders and graphic designers.

Optimising a JPEG

Even if a JPEG image is beautifully crisp and clear on your website, it will load at a much slower rate if it hasn't been optimised. For guidance on how to optimise a JPEG, read on.

Start with Photoshop

Here, you can resize images and maintain their quality. First, open your image in the software, navigate to 'file,' 'export,' and 'export as' until you see the 'export as' screen. Then, select the '2-Up' option to display a side-by-side of your optimised and original image.

Now, you can experiment by adjusting the quality of your image to reduce its file size if needed. The image file size will show at the bottom of the screen. Reducing your image quality can significantly shrink this. Thanks to Photoshop's unrivalled capabilities, reducing the image quality has little impact on the physical appearance of your image, but it will save you file space.

Before exporting the image:

  1. Alter its size by entering the desired number of pixels into photoshop.
  2. Click export, save the image, and upload it to your website using the Elementor editor.
  3. Click on the 'style' tab, where you can upload your newly optimised image and include alt text.

Alternatively, you could use PhotoPea. This is an excellent free alternative to Photoshop and boasts many similar features. Open your image, head to 'file,' then 'export as' and select 'JPEG.'

Like Photoshop, Elementor recommends experimenting with the quality setting to reduce image size. Once you've found your desired quality, follow the same steps above to upload your image to your website.

Optimising a PNG

  • Start by resizing your PNG with Photoshop: Import your PNG and resize it using the 'export as' option. Then ensure the PNG option is selected and the transparency box is checked. Now, adjust the width of your PNG to 300 pixels, and you'll see a significant decrease in the size of your PNG.
  • Now, use Tiny PNG: Once you've exported this optimised image, head over to Tiny PNG. This free tool compresses your PNG while maintaining its quality for faster loading times. On the website, drop your PNG onto the upload box. Tiny PNG will automatically work on this image for you, and after compression, you're shown how many KBs of file size the tool has saved you. To compare this to your previously optimised image, upload the two into Photoshop and view them side-by-side to analyse file size and image quality.

Optimising a Scalable Vector Graphic (SVG)

To upload SVG's in Elementor, you should first enable this in Elementor's settings. For example, on WordPress, click 'Elementor' then 'settings,' head over to 'advanced' and select 'enable' on the 'enable unfiltered file uploads' option.

Use Inkscape - Inkscape is a great way to redraw icon images into vector graphics. Once you've done this, you can export these SVG's and upload them to the icon box widget. In Inkscape, click 'file,' then 'save as,' choose a location and select 'optimised SVG' from the drop-down menu at the bottom of the page.

Remember: Not every image can be converted to SVG. SVG photos need to be drawn in software like Inkscape or Adobe Illustrator.

Optimising images that are already uploaded to your website

Although it's always better to optimise images before publishing them on your website, there may be occasions where you need to optimise photos you've already uploaded. In these instances, you can use a third-party plugin like 'Smush,' a highly rated, free image optimisation plugin. Smush will automatically compress your images to achieve smaller file sizes while maintaining excellent image quality.

Once you've installed this plugin via WordPress, Smush will scan the images on your website to gather some data and figure out which ones need compressing. Once this has been completed, you can scroll through the Smush settings and choose which images you want to optimise based on the information Smush has given you. You can opt to resize your full-size images (by pixel size) to conform to your desired parameters without ever needing to export images from your website.

Copyright 2021. Featured post made possible by Jeff Broth.

What does the * mean?

If a link has a * this means it is an affiliate link. To find out more, see our FAQs.