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
Getting the most out of custom website design & development
Blog Article Getting the most out of custom website design & development
Read more: Getting the most out of custom website design & development
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?
Venn
Project Venn
Read more: Venn
Latest News Proud to be partnering with Wilberforce Sixth Form College
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
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
Advance Colleges Trust Launches New Website by Feel Created
Latest News Advance Colleges Trust Launches New Website by Feel Created
Read more: Advance Colleges Trust Launches New Website by Feel Created
Latest News ACT Launches Immersive Learning Experience with Igloo Vision and Feel Created
ACT Launches Immersive Learning Experience with Igloo Vision and Feel Created
Read more: ACT Launches Immersive Learning Experience with Igloo Vision and Feel Created
Thinc
Project Thinc
Read more: Thinc
Blog Article 2022 Marketing Trends: Creating a phygital experience
2022 Marketing Trends: Creating a phygital experience
Read more: 2022 Marketing Trends: Creating a phygital experience
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
Learning English
Project Learning English
Read more: Learning English
Project Rethink Press
Rethink Press
Read more: Rethink Press
What We Do Web design
Read more: Web design
Blog Article Should I use a website content writer?
Should I use a website content writer?
Read more: Should I use a website content writer?
We partner with Boardwalk Studio to create 360-degree immersive experience for ACT
Latest News We partner with Boardwalk Studio to create 360-degree immersive experience for ACT
Read more: We partner with Boardwalk Studio to create 360-degree immersive experience for ACT
What We Do Custom WordPress design & development
Read more: Custom WordPress design & development
3 easy ways to improve your website's click-through rate (CTR)
Blog Article 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)
What We Do Digital tool planner sessions
Read more: Digital tool planner sessions