Responsive HD-Images

04. Jun 2013

HD-Bilder werden nur dann in doppelter Auflösung ausgeliefert, wenn das Standardbild aufgrund der Bildschirmbreite nicht schon ausreicht, um die doppelte Auflösung anzubieten.

HD-Bilder werden nur dann in doppelter Auflösung ausgeliefert, wenn das Standardbild aufgrund der Bildschirmbreite nicht schon ausreicht, um die doppelte Auflösung anzubieten.

Geringe Übertragung durch selektives Nachladen von Bildern

Die aktuellste hd.js prüft nun beim Nachladen des hochauflösenden Bildes zuerst, ob das Standardbild für die HD-Darstellung ggf. ausreicht. In dem Fall wird auch bei einem Device-Pixel-Ratio, welches über dem eingestellten Limit liegt, das Originalbild für die HD-Darstellung genutzt.

Hat das Standardbild beispielsweise eine Breite von 720 Pixel, kann es je nach Ausrichtung ausreichen, um über das Retina-Display eines iPhones in HD-Auflösung dargestellt zu werden. Die hd.js prüft bei jedem Bild auf die dargestellte Größe und entscheidet so, welches Bild auf dem jeweiligen Endgerät genutzt werden soll. 

Responsive Images als Webstandard

Während man derzeit noch auf eigene Lösungen angewiesen ist, sind bereits Standardlösungen in der Entwicklung. Sowohl das picture-Tag, als auch das srcset-Attribut sind Ansätze, um Responsive-Bilder auf Browserebene vollständig zu unterstützen. Mit diesen Techniken können Bilder abhängig von Device-Pixel-Ratio sowie von der Browser-Breite heruntergeladen werden. So ist immer nur ein Bild zu laden.

Optimale Lösung für Adaptive Bilder

Da es derzeit noch keinen Standard gibt, muss entweder eine individuelle Umsetzung genutzt werden oder man setzt auf einen der zwei möglichen Standards und nutzt ein Polyfill, um die derzeit generell fehlende Browserunterstützung zu simulieren. Wikipedia setzt z.B. bereits auf das srcset-Attribut.

Vorteile der Responsive Image Lösung in Weblication

Die derzeitige Umsetzung über HTML5 Data-Attributen schließt jegliche negative Auswirkung auf unterschiedliche Browser oder Suchmaschinen aus, da diese Attribute erstmal generell ignoriert werden. Das Nachladen hat somit immer einen optionalen Charakter. 

Da die Entscheidung, welches Bild geladen wird vollständig browser-seitig durchgeführt wird, entfallen die bei sonstigen Adaptive-Image-Lösungen notwendigen zusätzlichen Skriptaufrufe. Bilder werden nicht, wie oft üblich, über .htaccess auf PHP-Skripte umgeleitet, sondern ressourcenschonend direkt vom Webserver geladen.

Die Weblication Lösung ist vollständig integriert und benötigt keinerlei externen Skripte. So stellen wir sicher, dass Sie über ein Online-Update von zukünftigen Entwicklungen profitieren. Responsive, HD und Lazy-Loading lassen sich aufeinander abgestimmt nutzen.

Die integrierte Responsive- / HD-Lösung berücksichtigt im Gegensatz zu allen derzeit diskutierten Lösungsansätzen nicht die Breite des Bildschirmes, sondern die tatsächliche Breite des anzuzeigenden Bildes. Bei Responsive Webdesign ist eine Anpassung über die Bildschirmbreite deutlich abstrakter, da die Bildgrößen in vielen Fällen nicht proportional mit der Bildschirmbreite skalieren.