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. 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.

digital filetypes

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 vs Umbraco: Which CMS is best for your business?
Blog Article WordPress vs Umbraco: Which CMS is best for your business?
Read more: WordPress vs Umbraco: Which CMS is best for your business?
Latest News Postdoc Portal, Prosper, Launched by the University of Liverpool
Postdoc Portal, Prosper, Launched by the University of Liverpool
Read more: Postdoc Portal, Prosper, Launched by the University of Liverpool
Yoast SEO plugin: A beginner's guide
Blog Article Yoast SEO plugin: A beginner's guide
Read more: Yoast SEO plugin: A beginner's guide
Project Thinc
Thinc
Read more: Thinc
What We Do Web design
Read more: Web design
Latest News Feel Created partners with Blackpool Sixth Form College to deliver new website
Feel Created partners with Blackpool Sixth Form College to deliver new website
Read more: Feel Created partners with Blackpool Sixth Form College to deliver new website
Longitude, WordPress CMS build
Project Longitude, WordPress CMS build
Read more: Longitude, WordPress CMS build
What We Do Digital tool planner sessions
Read more: Digital tool planner sessions
Venn
Project Venn
Read more: Venn
Project Learning English
Learning English
Read more: Learning English
What We Do Custom WordPress design & development
Read more: Custom WordPress design & development
Latest News Blackpool Sixth Form College Launches New Website by Feel Created
Blackpool Sixth Form College Launches New Website by Feel Created
Read more: Blackpool Sixth Form College Launches New Website by Feel Created
Feel Created Shortlisted for Prolific North Creative Award 2023
Latest News Feel Created Shortlisted for Prolific North Creative Award 2023
Read more: Feel Created Shortlisted for Prolific North Creative Award 2023
Blog Article WordPress SEO best practices: How to optimise your website
WordPress SEO best practices: How to optimise your website
Read more: WordPress SEO best practices: How to optimise your website
The best social media platforms for business: How to choose the right ones for you
Blog Article The best social media platforms for business: How to choose the right ones for you
Read more: The best social media platforms for business: How to choose the right ones for you
Latest News Feel Created shortlisted for two Wakefield Business Awards
Feel Created shortlisted for two Wakefield Business Awards
Read more: Feel Created shortlisted for two Wakefield Business Awards
Nicholas Associates
Project Nicholas Associates
Read more: Nicholas Associates
What We Do Website & System development
Read more: Website & System development
Why website maintenance is vital for online success
Blog Article Why website maintenance is vital for online success
Read more: Why website maintenance is vital for online success
What We Do Hosting and Maintenance
Read more: Hosting and Maintenance