Eco-design at MobileThinking

Media performance

15.07.2025

First team, first challenge : reduce without compromising

In the first article of this series, we told you about our latest Hackathon : a day fully dedicated to web eco-design, to initiate a more responsible shift in the way we design digital services.

No deliverables to hand out. No deadlines to meet.
Just a clear objective : to make our site greener and more efficient.

And in order to achieve this, we formed several small teams around targeted challenges. Here's the report from the first team, made up of Kevin, Mattia and Roseline, who chose to focus on a key lever :

👉 media performance.

Initial findings 🔎

On a web page, everything that is displayed... is downloaded.
And everything that is downloaded... consumes energy.

Media (images, videos, fonts, animations, etc.) therefore play a key role in a site's environmental footprint.

So we started by asking the right questions :
  • Images : are they too big, too heavy, badly compressed?
  • Videos : are they necessary? Can they be hosted differently? Played automatically or on demand?
  • Fonts : how many files should be uploaded? Are all variants useful?
  • Animations & effects : do they have a real function?

Issues identified 🤔

The morning's work raised many questions :
  • What tools can be used to measure environmental impact?
  • How can we make things lighter without damaging the user experience?
  • What is the right balance between aesthetics, performance and simplicity?
  • How can we collectively decide what is and isn't ‘useful’ in an interface?

What we tested 🧪

Once the blocking factors had been identified, we took action :
  • Analysis tools : EcoIndex, Website Carbon, GreenIT Analysis, etc.
  • Exploration of best practices : benchmarks, Frugal UX recommendations
  • Concrete experiments on our site : image formats, video weight, font loading, lazy loading, etc.
The idea was not to “reduce at all costs”, but to re-examine each medium in the light of its real value.

Areas for improvement

💡 Here are the first improvements implemented or identified :
  • Images : → Switch to lighter formats (WebP, AVIF) → Systematically resize according to screens → Use lazy loading and optimise preload
  • Videos : → Give preference to external hosting (YouTube) → Remove automatic playback → Offer a text or image alternative
  • Fonts : → Create custom subsets → Host locally → Enable font-display : swap
  • Animations : → Remove gadget effects → Keep only those that have a real UX or accessibility role

What we'll keep in mind

Working on media performance is not just about technical optimisation.

It's about taking a fundamental look at how we use our media, our automatisms and our quality criteria. It means asking ourselves whether each visual element is really worth the energy it consumes

And it's also a practical way of improving speed, clarity... and awareness.

To be continued… ✨

The first challenge was successfully accomplished.

We can't wait to embed these good practices in our projects, so that they become reflexes!

Next up : a new team, a new dilemma... Client-side or server-side, which consumes more? Spoiler : it's not that simple 😬