Feature summary :
- Add an optional MediaWiki config to allow thumbnail <img> element to be wrapped in a <picture> element
- Add a hook that allows extensions to register additional <source> element to the <picture> element
Original:
<figure typeof="mw:File/Thumb">
<a href="/File:Thumbnail.jpg" class="mw-file-description">
<img alt="" src="https://example.wiki/thumb/e/e2/Thumbnail.jpg/300px-Thumbnail.jpg" decoding="async"
loading="lazy" width="300" height="169"
srcset="https://example.wiki/thumb/e/e2/Thumbnail.jpg/450px-Thumbnail.jpg 1.5x, https://example.wiki/thumb/e/e2/Thumbnail.jpg/600px-Thumbnail.jpg 2x"
data-file-width="1024" data-file-height="576">
</a>
<figcaption>Thumbnail caption</figcaption>
</figure>Proposed:
<figure typeof="mw:File/Thumb">
<a href="/File:Thumbnail.jpg" class="mw-file-description">
<picture>
<!-- Added by hook -->
<source
srcset="https://example.wiki/thumb/avif/e/e2/Thumbnail.jpg/300px-Thumbnail.avif, https://example.wiki/thumb/avif/e/e2/Thumbnail.jpg/450px-Thumbnail.avif 1.5x, https://example.wiki/thumb/avif/e/e2/Thumbnail.jpg/600px-Thumbnail.avif 2x"
type="image/avif">
<source
srcset="https://example.wiki/thumb/webp/e/e2/Thumbnail.jpg/300px-Thumbnail.webp, https://example.wiki/thumb/webp/e/e2/Thumbnail.jpg/450px-Thumbnail.webp 1.5x, https://example.wiki/thumb/webp/e/e2/Thumbnail.jpg/600px-Thumbnail.webp 2x"
type="image/webp">
<!-- Original img element -->
<img alt="" src="https://example.wiki/thumb/e/e2/Thumbnail.jpg/300px-Thumbnail.jpg" decoding="async"
loading="lazy" width="300" height="169"
srcset="https://example.wiki/thumb/e/e2/Thumbnail.jpg/450px-Thumbnail.jpg 1.5x, https://example.wiki/thumb/e/e2/Thumbnail.jpg/600px-Thumbnail.jpg 2x"
data-file-width="1024" data-file-height="576">
</picture>
</a>
<figcaption>Thumbnail caption</figcaption>
</figure>Use case(s) :
- Allow wikis and extension to serve different images based on the client's browser and device with only HTML, without needing additional CDN or Javascript
- Allow browser native fallback support when using new image formats such as AVIF and WebP
Benefits:
- Allow extensions to use the hook to add additional sources
- Adding more optimized thumbnail formats such as Extension:WebP (T282453, T257652)
- Adding responsive images based on client's viewport
- Adding different URL for the thumbnail (e.g. using an external CDN for image processing)
- Use of semantic HTML5 element (T25932)
- Does not affect WMF wikis if it is disabled by default through a config flag
A proof of concept is available through Extension:PictureHtmlSupport. You can see it in action with Extension:WebP on the Star Citizen Wiki.