Optimising Photos & Videos for Websites

Real before-and-after examples showing the dramatic difference optimisation makes to file size and loading speed.

Guides Menu →
Guides Home Contact
Planning & Costs ›
Does a Business Need a Website? How Much Does a Website Cost? How to Choose a Domain Name Web Designer vs Web Developer What Does a Graphic Designer Do? Custom Websites vs. Website Platforms Publishing Platforms vs CMS vs. Website Builders
Building Your Site ›
What Should a Website Include? What Makes a Good Homepage? How to Write an About Us Page Writing for Websites Photos & Logos Optimising Media Website Legal Pages
Hosting & Technical ›
What Is SSL & HTTPS? How to Choose a Hosting Plan What Is Web Hosting? Website Backups Explained Website & Hosting Maintenance What to Do When Your Website Goes Down Why Does My Website Look Different on Different Devices? How Often Should a Website Be Renewed? Why Sending Emails Is Harder Than It Looks: SMTP Explained
Getting Found Online ›
What Is SEO? Is It Enough Just to Have a Website? Get More Customers From a Website Does a Website Need a Blog? Website Traffic & Statistics Why Has My Website Disappeared from Google? How To Check A Site Has Been Indexed
Technology & Other ›
Why You Should Not Use AI to Build Your Website Are Facebook AI Website Ads Accurate, or Just a Scam? Why AI Search Tools Can't Find Your Small Business We Put ChatGPT to the Test. It Couldn't Find Us. Is a Mobile App Necessary? Professional Email Addresses Cookie Banners Explained Why We Don't Post a Client Portfolio & How That Protects You

Why Optimisation Matters

Modern digital cameras produce enormous files — both in dimensions and file size. A typical camera photo might be 7MB and 6000 pixels wide. That is perfectly fine for printing, but catastrophic for a website. Most visitors will abandon a page that takes more than three seconds to load, and a single unoptimised photo can cause exactly that.

With professional optimisation, the same image can be reduced by 90% or more in file size with no visible loss of quality. The examples below show exactly what that looks like in practice.

Recommended Sizes & Specifications

Photos

  • Full-width hero images — 1920px wide
  • Content images — 800 to 1200px wide depending on layout
  • Galleries and slideshows — identical dimensions throughout
  • Consistent dimensions across sections give a professional, cohesive appearance

Videos

  • Full-screen video — 1920 × 1080px, 16:9 aspect ratio
  • Always use landscape format — fullscreen mode handles rotation automatically
  • Multiple videos on one page must have identical dimensions
  • Check copyright before adding background music or sound effects

The image below illustrates why landscape format is always preferred over portrait for website videos.

Comparison showing why landscape format is superior to portrait for website videos

Photo Optimisation Examples

The three versions below are the same photograph at different levels of optimisation. Click any photo to view it full size.

Before Optimisation Original unoptimised photo — 7.04MB, 6000 × 4000 pixels
7.04 MB  |  6000 × 4000 pixels  |  Slow Loading ❌

This original camera file would take 10 to 30 seconds to load on average connections, causing most visitors to leave before seeing your content.

After Optimisation The same photo after professional optimisation — 256KB, 1280 × 853 pixels
256 KB  |  1280 × 853 pixels  |  Fast Loading ✓

96.4% file size reduction. Loads in under one second while maintaining excellent visual quality suitable for most website applications.

Maximum Optimisation The same photo with maximum optimisation — 186KB, 1000 × 667 pixels
186 KB  |  1000 × 667 pixels  |  Very Fast Loading ✓✓

97.4% file size reduction. Perfect for mobile-first designs and lightning-fast page loads on any connection speed.

Video Optimisation Examples

The three versions below are the same video at different levels of optimisation. Press play on each to compare quality.

Before Optimisation
19.9 MB  |  Slow Loading ❌

Original export from video editing software. Too large for efficient web delivery — causes buffering and delays on most connections.

After Optimisation
9.90 MB  |  Fast Loading ✓

50% file size reduction. Optimised for desktop and tablet viewing with excellent quality and smooth playback.

Mobile Optimised
2.25 MB  |  Very Fast Loading ✓✓

88.7% file size reduction. Optimised specifically for mobile devices and slower connections.

Smart Delivery: We can configure your site to automatically serve the mobile-optimised version to smartphones and tablets, while delivering the higher-quality version to desktop users with larger screens and typically faster connections.

Note: If you are viewing the mobile-optimised video on a large desktop screen in fullscreen mode, it may appear slightly softer than the desktop version. This is normal — mobile users will not notice any quality difference on their smaller screens.