HTML5: responsive Bilder mit dem picture-Element

Die Responsivität von Webseiten wird immer wichtiger. Mit den unterschiedlichsten Geräten und Bildschirmauflösungen wird das Web genutzt. Vom kleinen Smartphone-Display, über Desktop-Computer bis zum 40 Zoll Fernseher. Ebenso ist die Ladezeit der Webseite wichtig, um die Absprungrate der Nutzer zu verringern und schnelles surfen zu ermöglichen. Bilder können dank des picture HTML Tags in unterschiedlichen Größen geladen werden. So kannst du Smartphone-Nutzer ein verkleinertes Bild zur Verfügung stellen. Dem Desktop-Nutzer hingegen die volle Auflösung.

In diesem Tutorial werden wir das HTML Picture Element ansehen und verschiedene Bilder je nach Browserauflösung anzeigen lassen.

HTML Picture Element – responsive Images


Anzeige

HTML5 picture-Tag Syntax

Erläuterung:

Beispiel: verschiedene Bildgrößen laden

In einem kleinen Beispiel zeige ich dir das laden verschiedener Bilder in Abhänigkeit der Browsergröße.

Erläuterung:

Tags: , , , , ,

Schreibe einen Kommentar

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