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
WordPress Multisites for multi academy trusts & colleges
Project WordPress Multisites for multi academy trusts & colleges
Read more: WordPress Multisites for multi academy trusts & colleges
Project A dynamic WordPress website for a vibrant sixth-form college setting
A dynamic WordPress website for a vibrant sixth-form college setting
Read more: A dynamic WordPress website for a vibrant sixth-form college setting
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?
What We Do Web design
Read more: Web design
An engaging custom WordPress solution for an Ofsted school
Project An engaging custom WordPress solution for an Ofsted school
Read more: An engaging custom WordPress solution for an Ofsted school
What We Do Website & System development
Read more: Website & System development
Make it easy for your customer to find you with an up-to-date online web presence
Blog Article 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
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)
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
Project Advance Colleges Trust: Custom WordPress website
Advance Colleges Trust: Custom WordPress website
Read more: Advance Colleges Trust: Custom WordPress website
 Feel Created partners with Juice Personnel to create new website
Latest News  Feel Created partners with Juice Personnel to create new website
Read more:  Feel Created partners with Juice Personnel to create new website
Latest News Wilberforce Sixth-Form College Launches New Website by Feel Created
Wilberforce Sixth-Form College Launches New Website by Feel Created
Read more: Wilberforce Sixth-Form College Launches New Website by Feel Created
Feel Created appointed by the University of Liverpool to develop Prosper Portal
Latest News Feel Created appointed by the University of Liverpool to develop Prosper Portal
Read more: Feel Created appointed by the University of Liverpool to develop Prosper Portal
Latest News Feel Created Lead Developer Named Digital Champion of the Year
Feel Created Lead Developer Named Digital Champion of the Year
Read more: Feel Created Lead Developer Named Digital Champion of the Year
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 Should I outsource my web development project?
Should I outsource my web development project?
Read more: Should I outsource my web development project?
What We Do Hosting and Maintenance
Read more: Hosting and Maintenance
What We Do Digital tool planner sessions
Read more: Digital tool planner sessions
What We Do Custom WordPress design & development
Read more: Custom WordPress design & development
Project Venn
Venn
Read more: Venn