Closed alistair3149 closed 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.
<source>
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.
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):
Even though the browser supports AVIF, it will load the WebP image as it is the first support format in the DOM order.