Kompletter Guide zu Adaptive Images
Adaptive Images sind wichtig für Seitengeschwindigkeit und können die Nutzererfahrung mit einer Seite massiv verbessern. Hier erkläre ich, was Adaptive Images sind und wie diese funktionieren.
Definition Adaptive Images
Auf jeder Website sind Bilder vorhanden. Diese Bilder werden normalerweise in einer bestimmten Grösse hochgeladen und dann eingebunden.
Ein Fotograph möchte seine Bilder zum Beispiel in 4k hochladen, damit sein Kunde diese auf seinem 4k Bildschirm scharf und schön sieht. Wenn der Kunde jedoch mit dem Handy auf die Seite geht, muss dieser ein 4k Bild runterladen, was sehr lange dauert und für die Benutzererfahrung schlecht ist.
Adaptive Image bietet hier eine Lösung: Die Bildgrösse wird dynamisch an die Bildschirmgrösse angepasst. Ein 4k Screen, kann so ein 4k Bild laden, ein kleinerer Handybildschirm, ein kleineres Bild.
src="small.jpg"
srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w"
>
Normal wird im IMG Tag ein SRC für das Bild definiert. Aber es können auch SRCSET definiert werden. In dem Beispiel werden 3 Bilder, je nach Breite des Bildschirmes geladen.
Adaptive Images: Theorie vs. Praxis
Ein 4k Screen, kann so ein 4k Bild laden, ein kleinerer Handybildschirm, ein kleineres Bild. Soweit die Theorie, aber in der Praxis führt dies oft zu Missverständnissen und zu Fehlimplementationen.
Dieses Beispiel zeigt die einfache Adaptive Images Umsetzung. Grösseres Display erhält grösseres Bild.
Das Responsive Design zwingt uns aber, Bildgrössen nicht auf Display festzulegen, sondern auf die Anzeigegrösse im Inhalt. So kann es sein, dass ein Bild auf dem Desktop in einem Grit oder in Spalten angezeigt werden und daher “kleiner” dargestellt werden, wie auf einem anderen Gerät, was die identischen Bilder in einem anderen Spaltenformat anzeigt.
Dies ist essentiell bei der Umsetzung von Adaptive Images und wird sehr oft ignoriert, bzw. falsch implementiert, was dann negative Folgen hat.
Adaptive Images: Korrekt funtionierendes Demo
In diesem Beispiel sind die verschiedenen Bilder als verschiedene Farben markiert.
- Dunkel Grün: Bild mit 550px Breite
- Hellgrün: Bild mit 450px Breite
- Orange: Bild mit 250px Breite
- Rot: 150px Breite
Natürlich appliziert sich dies jedoch auch auf grössere Bilder. In diesem Demo eignet sich dies jedoch optimal, um das Verhalten auszuzeigen, bei der Anpassung vom Raster je nach Bildschirmbreite (Responsive Design) zu Adaptive Images.
Backt den schwarzen Balken rechts und bewegt ihn, und schaut, wie die Bildgrössen angepasst werden, auf die entsprechende Grösse / Auflösung.
Erklärung
Desktop Auflösung:
- 2 grosse Bilder
- 3 mittelgrosse Bilder
- 4 mittelkleine Bilder
Je breiter ein Bild angezeigt wird, desto grösser wird es geladen. Aber die Bilder werden nicht anhand des Bildschirmes geladen, sondern anhand des Grösse der Einbindung.
Tablet Auflösung:
- 6 mittelgrosse Bilder
- 3 mittelkleine Bilder
Tablets haben eine relativ hohe Auflösung. Auf diesen Geräten wechseln viele Kacheln auf eine 50% Anzeige.
Mobile Auflösung:
- 8 grosse Bilder
Auf dem Handy, welchseln die Spalten auf 100% Seitenbreite. dennoch bieten einige Handys grosse Auflösungen. Aus diesem Grund, werden alles grössere Bilder geladen.
In dem oben genannten Beispiel, lädt das Handy in dem Fall die höher aufgelösten Bilder, als die Tablett oder Desktopumsetzung, weil die Bilder grösser dargestellt werden. Dies ist aufwändiger, aber die einzig richtige Implementation.
Spezifisch die Elemente anschauen und entscheiden, wann welches Bild geladen wird und in welcher Auflösung.
Hier kommt SIZES mit ins Spiel bei den Bildern:
src="small.jpg"
srcset="small.jpg 100w, medium.jpg 360w, large.jpg 540w"
sizes="(max-width: 500px) 200px, (max-width: 767px) 500px, (max-width: 990px) 200px, (max-width: 1200px) 80px,(max-width: 1250px) 200px, 2500px"
/>
Auch hier gibt es noch eine Definition, von unterschiedlichen Bildern zu Breiten. Aber mit SIZES wird definiert, welche Bildbreite geladen wird, bei welcher Displaybreite. Dies ist ein grosser entscheidender Unterschied.
Dies kann nicht von Seite zu Seite identisch umgesetzt werden, sondern muss speziell für die Elemente, wie diese umbrechen, wie breit diese angezeigt werden implementiert werden.
Das ist auch der Grund, warum Plugins / Erweiterungen keine Chance haben, das korrekt umzusetzen und es eher schlecht machen. Der Entwickler muss dies direkt im Theme umsetzen, für jedes einzelne Element, dass Adaptive Images so funktioniert wie es sollte. Ein grosser Aufwand!
Fazit
Zusammenfassend zeigt sich, dass Adaptive Images mehr sind als nur ein technischer Kniff. Sie sind ein wichtiger Bestandteil moderner Webentwicklung und tragen massgeblich dazu bei, eine optimale Nutzererfahrung sicherzustellen, dass es korrekt umgesetzt wird.
Ich hoffe, dass dieser Artikel dir einen fundierten Einblick in die Welt der Adaptive Images verschafft hat und kennst nun die Herausforderung dies korrekt umzusetzen. Bei weiteren Fragen stehe ich dir natürlich gerne zur Verfügung.
Stefan Murawski
Webprogrammierer
