5202

ein Blog über technische Fragen zu Blogger

miscellaneous no2: responsive images

von

Das Problem

Bilder sollten grundsätzlich nur in der Größe geladen werden, in der sie in der jeweiligen Situation gebraucht werden. Zu diesem Problem gibt es viele verschiedene Ansätze aber noch keine abschließende Lösung - hier eine Idee für den Fall, das die Bilder auf einem Google-Dienst liegen.

Der Hintergrund

Bilder auf Google-Diensten besitzen eine s Attribut, mit dem sie in einer bestimmten Größe ausgeliefert werden:

Beispiel:

http://2.bp.blogspot.com/-38ohwYpapXc/Uwj14-U2ZeI/AAAAAAAAAF0/gnP17buJU6k/s800/tumblr_mxrv4js70F1st5lhmo1_1280.jpg 

Das Attribut ist hier s800, d.h. das Bild hat eine Breite von 800px.

Blogger

Ein wichtiges Problem ist das in Blogger. Dieser Tag gibt etwa das erste Bild in einem Post mit einem s Attribut von s1600 zurück:

<img expr:src='data:post.firstImageUrl' /> 

Ihr könntet zwar das Bild mit Javascript kleiner rechnen, trotzdem ruft ihr das Bild mit voller Bandbreite auf.

Die Lösung

Meine Idee ist nun, das Bild statt mit src mit data Attribut zu schreiben - das bedeutet, dass das Bild beim Aufruf der Seite zunächst gar nicht geladen wird:

<img expr:data-url='data:post.firstImagelUrl' /> 

Aus dem data Attribut errechnet ihr mit Javascript die passende Bildgröße und übergebt diesen Wert an das src Attribut. Dieser ruft das Bild dann in der richtigen Größe auf.

Beispiel

Ich habe ein Beispiel auf CodePen gebaut. Das data Attribut mit einem Wert von s1600 wird ausgelesen, auf eine Größe von 400px gerechnet, an das src Attribut übergeben und dann geladen.

See the Pen Responsive Image by oliver (@5202) on CodePen.

Diese Idee von mir stammt aus der Entwicklung für ein Blogger-Layout - die Startseite war mir zu langsam. Beim Aufruf von neun Bildern auf der Startseite spare ich jetzt insgesamt 300ms Ladezeit. Das ist rund ein Drittel - der Geschwindigkeits-Gewinn ist enorm!

Ausblick

Die Idee lässt sich natürlich für jede Art von Seite umsetzen, solange die Bilder auf einem Google Dienst liegen [Drive, G+ oder Picasa]. Falls ihr eine professionelle Umsetzung für ein Projekt braucht, sprecht mich über mein Kontaktformular an.