Skip to content
FR EN

Handbook of Sustainable Design of Digital Services

MENU
← go back
Frontend    ODD#12     ODD#13    

Is formatting in css preferred, to limit the use of images ?

Recommendation 

UI

C People

B Planet

B Prosperity

Difficulty

**

Priority

High

Récurrence

OnUpdate

Tests

Which images can be replaced by CSS?

Precisions

Among the presentation elements used in the services, the images represent a significant volume, which generates an environmental footprint. In some cases, formatting operations with CSS make it possible to dispense with an image, this lighter solution is to be preferred.

Use Case

Navigation / CHROME network

RGAA 10.1 criterion

Additional elements

Operational issues related to the project

Posts

Rule for assessing the level of compliance of the criterion

Number of images analyzed / Number of images

Life cycle

Réalisation

20 other criteria related to the recommendation: Implement technical solutions with the lowest impact

Recommendation Essential

UI

Is a clean version available for prints ?

Recommendation

user Experience

Is a CSS alternative available for an animation ?

Recommendation

user Experience

Is the service suitable for different accessibility media formats ?

Recommendation

UI

Are the animations necessary, desired by the user ?

Recommendation

UI

Is the service developed in accordance with RGAA recommendations ?

Recommendation

UI

Are the fonts used not loaded only for a small number of objects ?

Recommendation

UI

If printing, is an ink saving font installed ?

Recommendation

UI

Do you limit the number of fonts loaded for the service ?

Advice

UI

Are you reducing the number of pictograms used in the service ?

Advice

UI

Is a video the only solution for the expected illustration ?

Recommendation

UI

Are videos or animations outside the active area automatically paused / stopped ?

Recommendation

UI

Is it really a user action that triggers the "play" ?

Advice

UI

Is the definition of the sound suitable ?

Advice

UI

Does the lazy load bring a gain (weight of the page, CPU resource) ?

Advice

UI

Are CSS sprites implemented to limit the flow of image fetching ?

Advice

UI

Are alternative image formats made available through srcset ?

Recommendation

UI

Do all images have a text alternative ?

Advice

UI

Is the definition of the image reduced and adapted to its objective (illustration, contractual, ...) ?

Recommendation

UI

Are image resizing processed upstream and statically (server side) ?

Recommendation

UI

Have the different image formats available been evaluated to select only the most effective ?