How to optimise images and video for faster website loading


As a developer, I take web performance seriously and see it as a key contributing factor in user experience, as an unoptimised website can be detrimental to that experience.

Optimisation of media assets can significantly improve user satisfaction, especially on devices with limited connectivity, and can even help with SEO rankings. Let’s look into the details on how we can take some simple, effective steps to optimise your website assets.

Jump to image optimisation
Jump to video optimisation

User experience

There is nothing worse than a slow-loading page, this leads to a higher bounce rate, visitors leaving because it’s just taking too long for a page to load.

SEO

Every search engine prioritises fast-loading pages, which in turn improves your rankings. Higher rankings mean better visibility online.

Mobile devices

Optimisation on mobile devices is important as mobile networks can invariably be slower than direct connections to broadband.

Optimising image assets

Different image formats have various use cases and they impact your web page speed differently. I’ve outlined some of the most commonly used types used in web development.

 

  • PNG (Portable Network Graphics) – the best format with lossless compression, perfect for the support of transparency. These don’t lose their sharpness or detail but a drawback is the file size can be quite large.
  • JPEG (or JPEG, Joint Photographic Experts Group) – is best for photographs, especially when you need to balance quality with a smaller file size. This format uses lossy compression which reduces file size but sacrifices some detail and quality.
  • SVG (Scalable Vector Graphic) – this type of format uses an XML-based text format to describe how an image should appear. They are a powerful format in modern web design, providing a flexible, high-quality solution for creating everything from logos to dynamic animations. Being scalable means they are clear at any size without pixelation, useful for responsive design.
  • WebP – a modern, compact image format that supports lossless and lossy compression, keeping image file sizes small while maintaining an excellent image quality. It can also support transparency like the PNG format and supports animation. They are one of the best formats to use in getting your website performing a lot more efficiently.
  • AVIF (AV1 File) – is a relatively new cutting edge in image file technology. This innovative format employs a video codec to compress images, blending efficiency and quality. With lossless and lossy compression, they can also support transparency, animations and a high dynamic range (HDR). This format has a higher compression efficiency then WebP, but doesn’t have as good browser support. AVIF is destined to replace most formats for the web in 2025 according to most experts.

Responsive images

We can ensure images are using the correct image size based on the viewport by utilising the srcset attribute in HTML. Allowing the browser to select an appropriate image size based on the device’s screen size and resolution.

<img
  srcset=“picture_small.jpg 480w, picture_medium.jpg 800w”
  sizes=“(max-width: 600px) 480px, 800px”
  src=“picture_medium.jpg”
  alt=“This is a picture”
/>

 

Lazy loading assets

This is a quick and easy method of optimisation that allows you to defer slow-loading page elements until after a page has rendered. Only loading elements that are within the visible viewport, reducing the load times. Implementing this can improve your LCP rating (Largest Contentful Paint) score and benefit SEO.
This is a particularly useful solution for websites that contain a lot of imagery.

We can utilise the loading attribute on an image or iframe element, this instructs the browser to defer loading until a user scrolls near them. Allowing non-critical resources to load only when required.

Here is an example of how we can achieve this.

Optimising video assets

Choosing the right way to deliver your videos is very important for performance.

Self-hosted videos on your website can have a huge impact on speed and user experience. These are typically MP4 videos uploaded or selected from your Media Library.

For example, let’s say you hosted multiple large videos and you have several visitors on the site at once and they’re trying to watch the same video. This action consumes a lot of bandwidth which pushes the maximum rate of data transfer your hosting is allowed, causing your website to run incredibly slowly. In such a scenario you can expect your visitors to get frustrated due to excess buffering and potentially look elsewhere, this method should be strongly avoided.

Need help with your website speed?

Thank you.

We’ll be in touch soon.

Stream your videos instead of hosting

An effective method to improve video performance is hosting your videos on a video hosting service then streaming it from your website in an embedded component from a video player.

There are many providers out there such as Vimeo or Wista, that can provide a free or premium delivery service, it all depends on your individual budget and circumstances, for example how many videos you have, do you want to share them on other social platforms or want to analyse your audience reach through analytics.

Use a Content Delivery Network (CDN)

If you are serious about getting the most out of delivering optimised media assets, then you should consider implementing a Content Delivery Network to elevate your web performance to another level.

A CDN is basically a network of geographically distributed servers designed to deliver content more efficiently to users. How this is achieved is by caching content on lots of servers, spread across the internet. This in turn reduces latency, increases download speeds (in the browser) and ultimately enhances the overall user experience, because it’s fast.

Some hosting providers like Cloudflare can offer a free CDN service, but to get the most out of optimisation and have limitless flexibility to fine tune everything, a paid plan will prove to be a worthwhile investment.

Final words

The key takeaways here are that optimising media is a key aspect of web performance and plays a big role in user experience. By selecting the right formats, effective media compression and using modern tools and techniques, they can all drastically enhance performance and reduce load times.

Consistent testing and monitoring are essential practices to maintaining optimal results as your website evolves.

If you are actively looking for someone to give you advice or support on optimising your website assets, or anything else, please do get in touch with the digital team at Dawn, we’d be more than happy to help.

Some of the tools I like to use when optimising assets during development

 

Image optimisation and compression

  • https://squoosh.app/ – A really good visual image compression tool where you can compare (and convert) to other popular formats.
  • https://www.iloveimg.com/ – This website provides a variety of handy tools, very useful for batches of images.

 

SVG optimisation and minification

arrow-ghost-primary-left arrow-ghost-primary-right arrow-ghost-white-left arrow-ghost-white-right arrow-none-white-left arrow-none-white-right arrow-primary-left arrow-primary-right arrow-secondary-leftarrow-secondary-rightclosemobile-menu-iconplus-smallplusplus2social_facebooksocial_googleplussocial_instagramsocial_linkedin_altsocial_linkedin_altsocial_pinterestlogo-twitter-glyph-32social_youtubetickweather