**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 [[ https://github.com/octfx/mediawiki-extension-WebP | 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 [[ https://github.com/StarCitizenWiki/mediawiki-extensions-PictureHtmlSupport | Extension:PictureHtmlSupport ]]. You can see it in action with Extension:WebP on the [[ https://star-citizen.wiki/100i | Star Citizen Wiki ]].