Das <picture>-Element hat einen Trick, den es ausführen kann, bei dem es verschiedene Bildformate in unterschiedlichen Situationen anzeigt. Wenn Sie sich nur für Formate aus Leistungsgründen interessieren, vielleicht würden Sie
<picture>
<source srcset="img/waterfall.avif" type="image/avif">
<source srcset="img/waterfall.webp" type="image/webp">
<img src="img/waterfall.jpg" alt="A bottom-up shot of a huge waterfall in Iceland with green moss on either side.">
</picture>Aber beachten Sie die <source>-Elemente dort… sie können auch ein media-Attribut erhalten! Mit anderen Worten, sie können für responsive Bilder verwendet werden, da Sie das Bild durch ein anderes ersetzen können, vielleicht sogar eines mit einem anderen Seitenverhältnis (z. B. ein breit beschnittener Rechteckform auf einem großen Bildschirm im Vergleich zu einer eng beschnittenen quadratischen Form auf einem kleinen Bildschirm).
Das media-Attribut muss sich jedoch nicht auf die Bildschirmgröße beziehen. Brad Frost hat diesen Trick dokumentiert vor einiger Zeit
<picture>
<source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source>
<img srcset="animated.gif" alt="brick wall">
</picture>Das ist die Verwendung von einer prefers-reduced-motion Media Query, um ein GIF durch ein statisches Bild zu ersetzen, wenn weniger Bewegung bevorzugt wird (eine systemweite Wahl). Clever! Ich habe neulich Manuels Tweet dazu gesehen, wie er viel Zuspruch bekam
Erinnern Sie sich an unser kleines Experiment mit Steve Faulkners Idee von vor einiger Zeit? Anstatt das GIF komplett zu stoppen, können Sie animierte und nicht animierte Bilder übereinander legen (innerhalb eines <details>-Elements) und sie bei Bedarf "abspielen" lassen. Wir könnten das noch ein wenig abändern und es diese Media Query respektieren lassen, indem wir ein wenig JavaScript verwenden