Optimising web imagery for quicker loading websites

Why imagery is slowing your website down – and how to fix it

Four easy ways to speed up your website loading speeds with better application and management of imagery

If your pages are slow to load, images could be the cause…

Is your website loading slower than you’d like, but you’re unsure why? Images are not always the culprit, but it makes sense to consider them a primary suspect. If your team is responsible for managing content without clear image guidelines, they may be unwittingly decreasing your site’s performance with each upload.

And while you may work with a web team for regular hosting and maintenance, it's more than likely you'll add content and imagery in-house (and if not, why not – read more on websites that are easy to update here).

That said, not everyone on your team will understand how to read, manipulate and save images, and that's understandable. To prevent unnecessary high-resolution images from clogging up your site, we've put together a quick checklist for content updaters with four easy ways to ensure site images are up to scratch.

4 ways to optimise your images for better loading:

Reduce the size of your images (images are often added in larger than they need to be)
Reduce the number of images (while this can look great, it can drastically affect your page load time)
Change the format you save the image in (depending on the image, the correct file type can dramatically affect file size)
Prioritise images for loading

Reduce the size of your images

This point may seem like the most obvious one. However, reducing the size of large images is vital to maintaining the performance of your website. Anything over 1MB (megabyte) should never be needed (though, as with everything, there may be rare occasions when you need to break the rule). An easy way to check this is to click on the image and hold down the Command and I keys (on Mac) to reveal an information pop-up. The image size will be on the top right. You can also see what kind of image it is, e.g. JPEG or PNG.

How to: If the image does prove to be large and you don’t have access to professional editing software, what is the best way to resize and compress it? If you have WordPress, uploading your image to the WordPress Media Editor should be your first port of call. The editor has excellent optimisation capabilities and will do most of your work. If WordPress is not your CMS, an alternative is to use software like Preview (Tools) or Photopea. Just open/upload your image and follow the guidelines.

Reduce the number of images

Say you're doing a write-up about an event your company recently hosted – and you have loads of great images. You may want to include them all. A word of caution! Being selective with your images will result in better website performance simply because there is less to load. There are plenty of other non-image-based elements that could be interesting to pull out, creating a page with better variety. A good web design and development company will work with you on your website build to ensure these elements or 'blocks' are incorporated and easy to use.

How to: If you’re faced with too many images to choose from, try to focus on a mixture of people and lifestyle shots. More onus should be placed on the people shots. Substitute as many images as possible with text, stats or CSS (cascading style sheets). Think quotes and figures that highlight successes.

Change the format you save the image in

We mentioned that it's possible to check the kind of image or the 'format'. The format can be JPG (no transparency), PNG (transparent backgrounds) or SVG (scalable icons and shapes, e.g. your company logo). Bur perhaps the most efficient is the WebP format. Multi-purpose WebP can take the place of JPEGs or PNGs, making them, on average, 25 percent smaller without affecting quality. Choosing an efficient image format will avoid performance issues from the first save. You can also convert WebP images to JPEGs or PNGs for alternate usage in in-built Mac or Windows software.

How to: All major browsers and the WordPress CMS support WebP images. You can upload WebP images directly into WordPress CMS. However, WordPress does not yet allow you to convert JPEGs or PNGs to the Web P format in the WordPress Media Editor. Try photo editing software such as Pixlr, which allows the conversion of existing image formats to WebP. Alternatively, you can make use of a plugin on your CMS to convert and serve the images for you though your hosting environment must be configured to allow this. For more information on WebP images, including how to upload them to WordPress, check out this article.

Prioritise images for loading

Something to discuss with your developer in initial website discussions is lazy loading. Lazy loading is a technique whereby content is only loaded as the user scrolls down the page. This prevents everything on the page from loading at once which can potentially slow page loading speeds. It also puts site loading on a level playing field, regardless of the bowsing conditions of a user's device. Other loading techniques, such as progressive loading and placeholding, can be implemented. A good web design and development company will work with you to ensure that your content is dynamic and helps to build user anticipation and engagement on each page.

Let's start a project Let's start a project

Latest

What We Do Web design