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

Optimising web imagery for quicker loading websites
More Content

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:

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

Reduce the size of your images

This point may seem like the most obvious one. But 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 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
Sign up for our newsletter
Sign up
Latest
Arrow left Arrow right
What We Do Digital Marketing
Read more: Digital Marketing
Latest News Feel Created Shortlisted at Global Agency Awards 2022
Feel Created Shortlisted at Global Agency Awards 2022
Read more: Feel Created Shortlisted at Global Agency Awards 2022
WordPress specialist web build for an established UK estate agency
Project WordPress specialist web build for an established UK estate agency
Read more: WordPress specialist web build for an established UK estate agency
Project A flexible digital content solution to inspire sixth-form college students
A flexible digital content solution to inspire sixth-form college students
Read more: A flexible digital content solution to inspire sixth-form college students
Useful tips for defining your brand tone of voice
Blog Article Useful tips for defining your brand tone of voice
Read more: Useful tips for defining your brand tone of voice
Latest News Feel Created appointed to tell the story of the Nostell Estate
Feel Created appointed to tell the story of the Nostell Estate
Read more: Feel Created appointed to tell the story of the Nostell Estate
What We Do Digital tool planner sessions
Read more: Digital tool planner sessions
Blog Article Make it easy for your customer to find you with an up-to-date online web presence
Make it easy for your customer to find you with an up-to-date online web presence
Read more: Make it easy for your customer to find you with an up-to-date online web presence
Venn
Project Venn
Read more: Venn
What We Do Web design
Read more: Web design
ACT Launches Immersive Learning Experience with Igloo Vision and Feel Created
Latest News ACT Launches Immersive Learning Experience with Igloo Vision and Feel Created
Read more: ACT Launches Immersive Learning Experience with Igloo Vision and Feel Created
Project A custom WordPress architects website
A custom WordPress architects website
Read more: A custom WordPress architects website
Proud to be partnering with Wilberforce Sixth Form College
Latest News Proud to be partnering with Wilberforce Sixth Form College
Read more: Proud to be partnering with Wilberforce Sixth Form College
What We Do Hosting and Maintenance
Read more: Hosting and Maintenance
Rethink Press
Project Rethink Press
Read more: Rethink Press
What We Do Website & System development
Read more: Website & System development
Should I use a website content writer?
Blog Article Should I use a website content writer?
Read more: Should I use a website content writer?
Blog Article Should I outsource my web development project?
Should I outsource my web development project?
Read more: Should I outsource my web development project?
Digital Champion Shortlisting at Third Sector Awards for Feel Created
Latest News Digital Champion Shortlisting at Third Sector Awards for Feel Created
Read more: Digital Champion Shortlisting at Third Sector Awards for Feel Created
Blog Article 3 easy ways to improve your website's click-through rate (CTR)
3 easy ways to improve your website's click-through rate (CTR)
Read more: 3 easy ways to improve your website's click-through rate (CTR)