Trick # 472 | Dieser Beitrag beinhaltet 532 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Responsive-Webdesign ist fraglos wichtig. Doch bei Bildern ist das nicht ganz ohne. Dabei können Sie auch mit einfachem HTML Bildversionen anzeigen lassen, die zur Desktop- oder Mobilversion passen. Der picture-Tag hilft Ihnen dabei.
Kopieren Sie folgenden HTML-Code und fügen Sie ihn in der Text- oder HTML-Ansicht Ihres WYSIWYG-Editors ein. Passen Sie dabei die Pfade zum jeweils zu verwendenden Bild an:
<picture>
<source media="(min-width: 968px)" srcset="https://ihredomain.ch/pfad-zum-DESKTOP-bild.jpg">
<source media="(min-width: 360px)" srcset="https://ihredomain.ch/pfad-zum-MOBILE-bild.jpg">
<img src="https://ihredomain.ch/pfad-zum-FALLBACK-bild.jpg">
</picture>Der <img>-Tag wird nur dann verwendet, wenn das Ansichtsfenster mit keinem der <source>-Tags übereinstimmt oder wenn der Browser <source> nicht unterstützt. Es ist also der gute Platz für ein Fallback-Bild.
In unserem Beispiel sieht das dann so aus:
Desktop-Ansicht
Mobile-Ansicht
neueres iPhone
Fallback-Ansicht
älteres iPhone
Locker! Oder?
Werbung
Werbung
