Mehrere Bildformate als Alternativen anbieten

Will man neuere Bildformate wie AVIF oder WebP anbieten, kann mich nicht unbedingt davon ausgehen, dass jeder Browser das Bild auch darstellen kann, denn es gibt immer einige Benutzerinnen und Benutzer, die noch mit stark veralteten Browsern durchs Web schwirren.

Man kann sich jedoch dadurch behelfen, dass man das HTML-Element <picture> verwendet, das als Container dient. Ganz oben sollte das Bild mit dem favorisierten Dateiformat stehen, ganz unten die Ausweichmöglichkeit mit einem der alten Bildformate wie JPEG oder PNG.

<picture>
    <source srcset="img/meinbild.AVIF" type="image/AVIF">
    <source srcset="img/meinbild.webp" type="image/webp">
    <img src="img/meinbild.jpg" alt="Bildbeschreibung">
</picture>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Mit Absenden dieses Kommentarformulars bestätigst du, dass du die Datenschutzerklärung gelesen hast und dich mit der Speicherung deiner Daten einverstanden erklärst. Deine Daten werden nur benötigt, um dich gegebenenfalls zwecks Beantwortung deiner Anfrage kontaktieren zu können, und werden weder an Dritte weitergegeben noch zu Werbezwecken missbraucht.