Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Speed - die Zweite

Donnerstag, 24. Juli 2014

Wie in meinem Blogpost Speed angekündigt, beschreibe ich heute kurz die Verwendung des picture-Elements in Verbindung mit picturefill.js, eine Alternative zu Adaptive Images
Eine der beiden Methoden (gibt es weitere?) sind im Zeitalter der mobilen Internetnutzung unverzichtbar. Es sei denn, man will die Mobilfunkanbieter auf Kosten der Nutzer bereichern, durch Generierung von unnötigem / unsinnigem Traffic.

Zuerst eine kurze Gegenüberstellung der beiden Methoden

Adaptive Images

Das picture-Element in Verbindung mit picturefill.js

  • Das picture-Element ist zukünfiger Bestandteil von HTML 5.1, und wird natürlich heute noch von keinem Browser unterstützt.
    Dennoch kann man es bereits verwenden. picturefill.js does the trick.
  • Es müssen mehrere Größen des jeweiligen Bildes erzeugt und auf den Server geladen werden. Dies bedeutet zwar zusätzlichen Aufwand, aber es ermöglicht auch eine weitgehende Optimierung der jeweiligen Alternativbilder.
  • Browser, die weder das picture-Element, noch picturefill.js verstehen, erhalten ein Alternativbild, das individuell festgelegt werden kann.
    Ich verwende als Alternativbild ein relativ kleines Bild, da ich davon ausgehe, dass ich es in diesem Fall mit einem alten, schwachbrüstigen System zu tun habe.

Und hier eine Demo

Um die Funktion zu testen, einfach die Fenstergröße des Browsers verkleinern / vergrößern.

Beide Methoden funktionieren in allen modernen Browsern. Alte IE-Versionen zu unterstützen habe ich zunehmend weniger Lust.

Hier noch der Vollständigkeit halber eine Demo ohne picturefill.js

Nur Chrome (ab Version 38, also derzeit Canary) unterstützt dies bisher. Siehe caniuse.com

Nachtrag 11.09.14

Erhöhte Vorsicht ist angesagt bei der Kombination von mehreren Bildmanipulations-Werkzeugen.
So führt beispielsweise die Kombination von Adaptive Images mit jQuery backstretch.js, oder mit fancybox.js zu unerwünschten Ergebnissen.
Und das picture-Element wird meines Wissens noch von keiner Technik zur Bildmanipulation wie Lightbox o. ä. unterstützt.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE