How to optimise your images for web.

Your website needs to perform. Whether that’s generating leads, driving sales, or making your brand unforgettable, it needs to load fast, look great, and work hard. Media is a big part of that, creating a more immersive and impactful experience that’s equally beautiful and engaging. 

But there’s a fine line between a visually compelling experience and making your site sluggish, slow to load, and quick to bounce, and without optimising, media can quickly become the Achilles’ heel of an otherwise killer website.

So let’s break it down. Here’s why media matters, how it’s slowing you down, and what to do about it.

Media: Why you need it

Media is powerful. Sharp, on-brand imagery, video, and animations are what make a website feel alive, telling your brand’s story faster and clearer than text ever could. Immersive visuals and bold animations are how modern brands show up, stand out, and make their visitors feel something, keeping them on the site for longer.

But beyond being visually pretty, they’re also a strategic marketing tool. You can optimise them for keywords to help boost your SEO efforts, and they foster engagement by making your content more shareable for social media. Plus, when your visuals are all on brand, they help build brand recognition for a more memorable and recognisable website experience.

How media slows your site down

But those beautiful visuals that should be engaging and converting could actually be the reason people are bouncing. When you load your homepage with a high-res video background, full-width retina-quality images, and half a dozen looping animations, your page gets heavier and slows right down.

Every image, video, animation, or audio file you add to your site increases the amount of data your browser has to load. And the bigger the file, the longer this takes. This is especially problematic on mobile, where connection speeds and device capabilities vary wildly.

The result is a sluggish, clunky user experience that’s going to cost you conversions. 

Your homepage takes five seconds to load, so users bounce before they even see your headline. Service pages are packed with uncompressed images, so Google knocks your SEO score. That cinematic video banner? It’s killing your mobile UX and conversions. And then to top it off, there are issues with overall site responsiveness and lowering your Core Web Vitals.

How to optimise your website media

If your site takes more than 3 seconds to load, 53% of users will leave and probably won’t come back. But that doesn’t mean we need to avoid visuals altogether, rather we just need to be smart with how we use them. 

If you have an image-heavy website, make sure your media is optimised to keep your web pages light, loading speeds fast, and your visitors’ data usage to a minimum. To do that, you need to make them as small as possible while keeping them sharp.

Here’s how:

• Choose the right format

Different formats are used for different kinds of images, and using the right format will speed things up while preserving the quality. Choose JPG for photography and images with lots of colour, and PNG for illustrations or transparent graphics like logos. 

Most modern browsers also support WebP, which is great for producing smaller file sizes that are still high quality. Keep your images in their original JPG or PNG format, and then use a Content Delivery Network (CDN) tool to automatically convert them to WebP. 

• Resize images

Uploading a 4000px-wide image when it only needs to display at 800px will use up unnecessary bandwidth, so check that any files you upload are set to the actual size they’ll be used on the site. If you need to resize using tools like Photoshop, then make sure that you keep the original aspect ratio to avoid distorting the image.

• Compress everything

Use tools like TinyPNG or ImageOptim to strip out unnecessary data without sacrificing quality. Lossy compression removes any parts of an image that are unused but still taking up space, or by merging colours and pixels that are too similar to notice.

For videos, remember that while 4K might sound great and you want the best for your website, 720p is usually more than enough. Nobody will ever really be able to tell the difference, and this keeps your media light and ready to load. You can also use modern codecs like H.264 or VP9 to reduce file sizes without sacrificing quality.

• Lazy load

Make it so that media only loads when it’s about to be seen by placing galleries and imagery below the fold, reducing the initial load speed and keeping the site feeling fast. This also keeps users focused on your page’s main message, giving them something valuable to read while they wait for the rest of the content to load. Similarly, avoid autoplaying video. That way, it only loads when a user actions the play button, which is both quicker and more user-friendly.

Note that if you use lazy loading, you’ll want to specify the size of your images to avoid their position being changed. This won’t impact the actual size of the image, as this will be set up in your website’s coding. What this does do is set the aspect ratio, so the height will always align with the width.

• Load more

If you’re using galleries or videos, keep it to one per page to avoid affecting site performance. And remember that while galleries are designed to handle a large amount of content, having lots of media on display all at once can still slow things down. Using a ‘Load more’ button reduces this initial load, giving you more time while encouraging users to interact with the first few items. 

• Responsive imagery

Desktop, laptop, tablet, mobile. Everyone’s going to view your site on a different device, so choose responsive image sizes that adapt to the user’s screen size. This means that if they view from a smaller screen, the browser will show a smaller file, while a larger display will still have a larger, high-res image. This keeps the speed without reducing the quality.

• Mobile-specific imagery

Alternatively, create separate images designed specifically for mobile devices. That means altering the dimensions, aspect ratio, and resolution to preserve clarity and legibility on smaller screens. You can then tell the browser which images to show and when, depending on the user’s screen size.

• Use a Content Delivery Network (CDN) 

If you have a media-heavy website, a Content Delivery Network (CDN) is a great option. This uses a network of servers around the world to cache your images and videos. When a user accesses your website, the images then load from the server nearest to them, giving quicker delivery while using up less bandwidth for better performance and a great user experience.

For video, host them on sites like YouTube or Vimeo rather than uploading directly to your site. They handle all the heavy lifting and CDNs for smooth playback and reduced load on your servers, with the added marketing benefit of increasing your visibility for extra reach. 

Stay ahead of performance issues

Even if all of your media is optimised, you still need to monitor your site to make sure that nothing is holding it back from peak performance. Use tools like Google’s PageSpeed Insights to analyse your site’s speed, and keep an eye on metrics like page load times, bounce rates, and conversion rates to gauge the impact of your media content.​ That way, you can regularly update and optimise to keep things running.

Engage without compromise

Illustrations, photos, videos and motion are what create an engaging and impactful website that celebrates your brand, but they need to be optimised. Otherwise, even with a killer website that ticks all the right boxes, it’ll struggle to perform. Following these strategies to optimise imagery for web is a great starting point to make sure that your website remains beautifully functional, efficient, and delivers the best experience for your users.​

Want to know more about how to build and maintain a killer website? Let’s chat about how we can enhance your site’s performance without compromising on style.