Wer bereits responsive Webseiten umgesetzt hat, weiss, dass Bilder eine Herausforderung darstellen. Bisher gab es nur das img-Element, bei welchem die Grösse eines Bildes über den src-Tag in Stein gemeisselt ist. Allen Besuchern musste unabhängig von der Auflösung des Gerätes das gleiche Bild übermittelt werden (es sei denn, man hätte das Problem mit JavaScript umgangen). Das Problem wird mit hochauflösenden Displays wie dem Retina-Display von Apple-Geräten noch schlimmer, denn diese Geräte benötigen das Bild in einer noch höheren Auflösung.
Die Erweiterungen des img-Tags (Attribute srcset sowie sizes) sowie das picture-Element liefern mögliche Lösungen dazu. Um dem Problem trotz mangelnder Browser-Unterstützung Herr zu werden, gibt es den Picturefill 2.0 – ein Polyfill für das responsive Bilder. Das kleine JavaScript imitiert den Syntax der img-Attribute und des picture-Elements – auch in Browsern, welche responsive Bilder noch nicht nativ verstehen.
Syntax des picture-Elements bzw. von Picturefill
Bevor der Syntax des picture-Elements bzw. srcset funktionieren, muss Picturefill eingebunden werden. Anschliessend kann folgendes HTML für ein responsives Bild verwendet werden:
<picture>
<!–[if IE 9]><video style=“display: none;“><![endif]–>
<source srcset=“/Portals/0/bild-medium-800.jpg, /Portals/0/bild-big-1600.jpg 2x“ media=“(min-width: 800px)“>
<source srcset=“/Portals/0/bild-small-400.jpg, /Portals/0/bild-medium-800.jpg 2x“>
<!–[if IE 9]></video><![endif]–>
<img srcset=“/Portals/0/bild-small-400.jpg, /Portals/0/bild-medium-800.jpg 2x“ alt=“Some alt text describing the image“>
</picture>
Das HTML-Snippet kann folgendermassen beschrieben werden:
- Wenn die Viewport-Breite (Breite des Browser-Fensters) mindestens 800px breit ist wie im media-Attribut definiert, wird das erste source-Element gewählt. Anschliessend wird je nach dem, ob das Gerät einen hochauflösenden Display besitzt oder nicht, wird das Bild mit 800 oder 400 px Breite geladen.
- Wenn 1. nicht zutrifft, wird das zweite source-Element behandelt. Hat das Gerät einen hochauflösenden Display, wird das Bild mit 800 px geladen, ansonsten mit 400 px.
- Das img-Element sollte von Suchmaschinen korrekt indexiert werden, weil das srcset-Attribut mittlerweile verstanden wird.
- Der <!–[if IE 9]> Kommentar wird benötigt, damit der Picturefill im IE9 funktioniert.
Stellt sich nur noch die Frage, wie das im DNN gelöst werden kann. Einem Kunden möchte ich nicht die Aufgabe aufbürden, diesen Code im HTML-Modul einzufügen… wir verwenden für solche Templates in der Regel unser Modul 2SexyContent.
Responsive Image Template für 2sxc (2SexyContent)
Achtung: Wenn du noch nie mit 2SexyContent gearbeitet hast, empfehle ich dir einen Blick auf meinen Einführungs-Artikel ins 2SexyContent Templating.
Als erstes erstellen wir einen Content Type namens Image. Als Felder erstellen wir lediglich Title und Image. Das Template sieht dann eigentlich gleich aus wie das Snippet oben – mit dem Unterschied, dass ImageResizer für uns die Bildgrössen-Thematik löst und der Inhalt einfach vom Kunden bzw. Redaktor eingefügt werden kann:
<picture>
<!–[if IE 9]><video style=“display: none;“><![endif]–>
<source srcset=“[Content:Image]?w=800, [Content:Image]?w=1600 2x“ media=“(min-width: 800px)“>
<source srcset=“[Content:Image]?w=400.jpg, [Content:Image]?w=800.jpg 2x“>
<!–[if IE 9]></video><![endif]–>
<img srcset=“[Content:Image]?w=400.jpg, [Content:Image]?w=800.jpg 2x“ alt=“[Content:Title]„>
</picture>
(Wichtig: Dieses Code-Snippet funktioniert nur in allen Browsern zuverlässig, wenn das Picturefill-JavaScript auf der Seite eingebunden ist)
Als Beispiel hier ein 2sxc-App, welches das Template und den Content Type beinhaltet: Download. Das App beinhaltet zwar das Picturefill-JavaScript, wir würden aber empfehlen den Picturefill im Skin einzubinden, damit alle Vorlagen damit arbeiten können.
Bei Fragen kannst du den Beitrag gerne kommentieren.
Liebe Grüsse
Raphael
2sicgeeks 