Description

Related to W3G sustainability guideline Take a More Sustainable Approach to Image Assets.

• Ideas
  • Incentivize users to avoid uploading large artifacts
  • Introduce images lazy load
  • Introduce image srcset

Ideas

Incentivize users to avoid uploading large artifacts

Pros:

• reduced disk usage

Cons:

• additional step for the user if done badly

Introduce images lazy load

• https://caniuse.com/loading-lazy-attr
• https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes
• https://web.dev/articles/browser-level-image-lazy-loading?hl=en
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading

The idea is to introduce the loading='lazy' attribute on as many images as possible, to prevent images that will never been seen by the user to be loaded.

Pros:

• reduced network use

Cons:

• additional rendering complexity
• might require to add a new option in the image UI to force the loading to be eager for some images

Introduce image srcset

• https://ericportis.com/posts/2014/srcset-sizes/
• https://caniuse.com/srcset
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
• https://web.dev/learn/design/responsive-images#srcset

The idea is to introduce srcset attribute on images of the content so that even when images larger than the user's viewport, a image adapted to the browser size is loaded. This allows to save bandwidth in case of 1) large images 2) small screens

Pro:

• reduced network use

Cons:

• additional rendering complexity