Jekyll: Responsive Images

Bei aller Optimierung der Webseite ergibt sich immer noch ein relativ großes Problem mit Bildern.

Man kann zwar größere Bilder für kleinere Geräte “herunter rechnen”, nur müssen trotzdem die Daten erst einmal übertragen werden.

Könnte man nicht bei einem kleinen Gerät, das wahrscheinlich über eine langsamere Leitung angebunden ist, nicht einfach ein kleineres Bild übertragen?

Mit “Responsive Images” geht das. Es gib inzwischen ein “picture” Tag in dem man sagen kann:

• bei großer Auflösung nimm das große Bild
• bei mittlerer Auflösung nimm das mittlere Bild
• bei kleiner Auflösung nimm ein kleines Bild
• bei ganz kleiner Auflösung nimm das kleine Bild und schneide oben und unten noch etwas ab.

So weit so gut. Nur wer schreibt den ganzen HTML Kram und muss ich die ganzen Bilder manuell erstellen? Das Jekyll Plugin Jekyll Picture Tag nimmt einem diese ganze Arbeit ab. Einfach das Bild mit

  {% picture /pfad/zumbild.jpg alt="ein ganz tolles Bild" %}

in den Text einfügen. Der Rest geht automatisch

Die Installation ist recht einfach

     sudo gem install jekyll-picture-tag
 
 

und das Plugin von hier in den _plugin Folder. Die aktuellen Browser unterstützen schon das neue Picture Tag und für die älteren gibt es eine Javascript Bibliothek Polyfill.

Die Konfiguration geschieht in der _config.yml von Jekyll. Ich habe erst mal mit den Standardwerten begonnen. Mal sehen was ich über die Zeit noch anpassen muss.

Habt Ihr schon Erfahrungen?