Eco‑responsible  images

Image compression reduces page weight and loading times.

Read more about it

Search in

Sustainable browsing

UNIL sees itself as a laboratory for societies in transition. This stance must obviously be reflected in all its actions and the UNIL website is no exception. UNIL has therefore applied the principles of sustainable web design and browsing, otherwise known as eco-design.

The digital sector has a significant environmental impact: in 2020, it accounted for 2.1% and 3.9% of global greenhouse gas emissions, putting the digital sector's overall footprint between that of all the world's aircraft (around 2%) and all the world's lorries (around 4%). Eco-design is a continuous improvement process aimed at limiting the production and consumption of IT resources. As such, it operates at three levels, taking into account the digital service as a whole (websites, mobile applications, software, APIs, hardware, software drivers, operating systems, recommendation systems, etc.): 

  1. User devices (computers, smartphones, etc.),
  2. Networks (fibre optic, 4G-5G),
  3. Data centres

Why did you choose UNIL?

The UNIL website(s) are visited by a large number of people. Each person has one or more objectives, and several pages will have to be loaded to meet their needs. This traffic has a significant impact, as each tool or action used to load the various pages (such as the tools that send the request to load the page, the connection through which the request passes, the servers that store the pages and respond to the request, etc.) consumes energy. 

As a result, light pages with relevant information allow web users to find what they are looking for (more) quickly, thereby considerably reducing their ecological impact.

What is directly visible during your visit

The focus is on eco-design from the moment the image is chosen. This means content creators thinking about the use of an image in the message conveyed by that page of the site.

Eco-designed images are processed to integrate them into the site's content management system. In the case of the UNIL website, the first step is automatic processing of the image when it is added by the person responsible for the content. This is not just image compression carried out before it is added by the content creator (JPG or PNG format, for example), but highly effective and systematic additional compression. The result is a greyscale image that takes up 10 times less space on a server and directly consumes fewer resources to display. Finally, a style sheet adds blue tone filters when the image is integrated into a web page. As a result, when browsing in eco-design mode, a much lighter image will be offered by default when your device (desktop or mobile) is read. The infographics are offered in a vectorised format (.svg) that keeps the weight down and provides excellent adaptability (without compromising the readability of the content of a table, for example). 

Images are only loaded when they appear on the user's screen (lazy load). As well as being a pillar of eco-design, this improves performance as less data is loaded at the start and is consumed as it is read.

In terms of the web page's source code, it is possible to indicate upstream to the browser how to choose the most suitable image source based on attributes specifying the size of the image to load according to the area in which it is used. In fact, the browser only loads the most optimised image possible in a given display context.

The source URL and the media player are only loaded at the visitor's request, i.e. when the visitor clicks on it, to ensure that the player is not automatically loaded if the visitor has no need for it. This technical point avoids unnecessary data exchanges between the server and the device viewing the page.

Other technical elements impacted by sustainable browsing

Content creators are encouraged to streamline the specific information on their pages by taking into account the user flows for each target audience and defining a clear objective for each page. By simplifying content and writing specifically for the web medium, pages are more relevant to the people who visit them. What's more, interaction with the content is kept to a minimum by limiting auto-completion, for example. The component that enables documents to be uploaded allows their content to be described as fully as possible, thereby avoiding unnecessary data transfer.
Best practice is supported in the development of the source code by prioritising content (H1, h2, etc.) and also in the proposed redirections (response codes optimised according to the available infrastructure).
In order to rationalise the source code, eco-design accepts differences in rendering according to media and browsers and defines a reasonable number of supported devices and browsers according to its target audiences.
The number of components available for creating pages in the Content Management System (CMS) is limited, including the number of variants.
Developments use a vector font file format (WOFF2) to reduce the number of different fonts and comply with good accessibility practice.
Cache management is optimised to limit the load on servers (Service Worker), as is infrastructure (instances, proxies, backups, etc).

How do I activate or deactivate eco-design mode?

When browsing the pages of this site, you will always find a toggle at the bottom of the page allowing you to modify your browsing experience.

Further reading