How Do Images and Videos Affect a Website's Environmental Impact?
Choose purposeful images and video, deliver them at appropriate sizes and measure resource changes without overstating environmental savings.
Part of our guide: Sustainable Websites: A Practical Guide for Small Businesses
Images and videos affect a website’s resource use through transfer, storage, decoding and display. Large or automatically loaded media can create work even when the visitor does not need it.
Keep project photographs and demonstrations that help customers understand the service. For each asset, check whether that benefit justifies the resources it uses and whether it can be delivered more efficiently.
Give every asset a job
Decide whether the image provides evidence, explains a process or creates atmosphere. Evidence and explanation usually deserve priority over repeated decoration.
If a video repeats the same information as a short heading, reconsider whether it should load automatically. If it demonstrates a difficult task clearly, provide a deliberate way to play it.
The sustainable website guide keeps this judgement connected to usefulness.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
Deliver the size the page needs
A thumbnail does not need the same file as a full-screen project detail. Use responsive image variants and suitable compression while preserving the detail customers need.
Check the actual downloaded resource on a phone. A layout can appear small while still requesting a very large source file.
The speed without losing design guide explains how visual quality and efficient delivery can work together.
Use loading priorities carefully
Important first-screen imagery should appear promptly. Images farther down the page may be suitable for deferred loading.
Do not indiscriminately lazy-load the main hero image if it delays the page’s principal content. Reserve layout space to avoid disruptive movement as images arrive.
Test the result under a slower connection rather than relying on a fast office connection.
Give visitors control of video
Consider a lightweight poster image with a play action instead of an automatically loaded player. Include captions or other appropriate alternatives for meaningful content.
Google’s video-performance guidance explains loading and delivery options. Check browser support and the actual player behaviour.
A third-party embed may add scripts and requests beyond the video itself. Include those in the performance and privacy review.
Optimise the collection, not only one file
Remove genuinely unused assets from delivery paths where appropriate, but keep necessary originals and permission records in a suitable archive.
Review galleries with many near-identical shots. A smaller edited sequence can make the work easier to judge.
The professional presentation guide encourages purposeful selection rather than visual clutter.
Measure what changed
Record transfer size, requests and relevant loading observations before and after the edit. Use the same page and test conditions.
The guide to speed and energy explains why a faster result alone does not quantify environmental savings. If you use a carbon estimate, preserve the model and assumptions.
Avoid translating every kilobyte saved into a precise public carbon claim without an appropriate method.
Keep the design expressive
Texture, composition, typography and a strong photograph can create character without a continuous stream of heavy effects.
The low-impact design guide offers a useful way to brief this work. Do not strip out evidence that customers need merely to make the page look technically lean.
For a practical first step, identify the three heaviest media assets on a key service page and ask what each contributes. Optimise or replace the least useful one, then test the customer journey again.
If you would like help balancing visual quality and delivery, contact AfterWorks.
