search

octfx / mediawiki-extension-WebP

Convert image files on upload to WebP
https://mediawiki.org/wiki/Extension:WebP
GNU General Public License v2.0
6 stars 4 forks source link

AVIF source tag should be placed above WebP source tag #18

Closed alistair3149 closed 1 year ago

alistair3149 commented 1 year ago

The <source> tag for a more preferred format should be placed on top of the other one, as browser will try to load the first supported <source> tag in the DOM order.

Take this as an example (https://star-citizen.wiki/Avenger_Stalker#Die_Avenger-Linie):

<picture>
    <source
        srcset="https://cdn.star-citizen.wiki/images/thumb/webp/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/300px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.webp, https://cdn.star-citizen.wiki/images/thumb/webp/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/450px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.webp 1.5x, https://cdn.star-citizen.wiki/images/thumb/webp/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/600px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.webp 2x"
        type="image/webp">
    <source
        srcset="https://cdn.star-citizen.wiki/images/thumb/avif/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/300px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.avif, https://cdn.star-citizen.wiki/images/thumb/avif/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/450px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.avif 1.5x, https://cdn.star-citizen.wiki/images/thumb/avif/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/600px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.avif 2x"
        type="image/avif">
    <source
        srcset="https://cdn.star-citizen.wiki/images/thumb/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/300px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg, https://cdn.star-citizen.wiki/images/thumb/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/450px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg 1.5x, https://cdn.star-citizen.wiki/images/thumb/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/600px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg 2x">
    <img alt="Standardvariante Avenger Titan Renegade"
        src="https://cdn.star-citizen.wiki/images/thumb/2/29/AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg/300px-AEGS_Avenger_Titan_Renegade_gelandet_in_Schiff.jpg"
        decoding="async" loading="lazy" width="300" height="169" data-file-width="2048" data-file-height="1152">
</picture>

Even though the browser supports AVIF, it will load the WebP image as it is the first support format in the DOM order.