Bilder für mobile Ansicht optimieren

Ja, auch den Pagespeed-Wert möchte ich mit meinem CMS im Auge behalten. Ich brauche keinen Wert von 100, aber einen Wert im grünen Bereich hätte ich schon gerne. Und den erreicht man nun am sinnvollsten über die Bildoptimierung. Und das ist auch die sinnvollste Optimierung, die man angehen kann. Selbst bei einer guten Internetverbindung hat man ja unterwegs oft genug auch noch das Damokles-Schwert Datenvolumen über sich hängen. Da können Hochglanz-Bilder doch etwas nerven.

Srcset-Angaben funktionieren bei meinem Handy nicht

Zunächst habe ich mein Glück mit srcset versucht. Ich habe also von den beiden Testbildern jeweils drei Versionen angelegt und diese auch optisch gekennzeichnet, so dass auf einen Blick zu sehen ist, ob die Bilder bei einer anderen Display-Größe getauscht werden oder nicht. Im Firefox hat das auch wunderbar geklappt. Schon der Chrome wollte nicht, auch nicht, wenn ich den Cache geleert habe und mein Handy, ein Samsung Galaxy S6, hat ebenso wenig mitgespielt wie eben die Pagespeed-Anzeige von Google.

Dann habe ich Picture versucht, aber auch das hat nicht zum gewünschten Erfolg geführt. Auch nicht in der Kombination mit srcset. Und wenn ein Code zu unübersichtlich wird, wird es auch nervig.

Normalerweise hätte ich nun gesagt, naja, was solls, ich hab ja eh höchstens ein Bild pro Seite, vielleicht mal zwei, das wird schon nicht so schlimm sein. Aber. Es gibt einen Ansatz, bei dem die Bilder beim Aufruf der Seite mit PHP verkleinert werden. Hab ich vor Jahren mal gelesen, interessant, aber nie angewandt. Ein wenig Suchen hat geholfen, es gibt eine Webseite dazu, das ganze nennt sich adaptive Images.

Hier wird je nach Bildschirmbreite ein Bild in der passenden Größe ausgeliefert. Der HTML Code für die Bilder selbst muss nicht angefasst werden, mit adaptive Images lassen sich also auch bestehende Projekte ohne großen Aufwand nachrüsten. Damit das Programm läuft, braucht man PHP5, die GD-Bibliothek und mode Rewriter. Alles Dinge, die die meisten Webserver heute dann doch haben sollten. Da der Zip-Datei eine deutsche Anleitung beiliegt, verzichte ich auf weitere Installationsanweisungen.

Adaptive Images

Testen von Adaptive Images mit Hindernissen

Natürlich wollte ich testen, ob das auch funktioniert. Dafür ruft man die Webseite auf, in diesem Fall eben Bernsteinkette Baby und schaut anschließend nach, ob für die passende Bildschirmgröße auch Bilder neu angelegt wurden. Wenn man sich nicht selbst veralbert, sieht man recht schnell, dass das auch ganz gut klappt. Mit selbst veralbert: Man sollte daran denken, dass das Programm einen Cockie setzt. Also erst mit dem Handy die Seite aufrufen und dann erst die Bildschirmformate ändern bringt nur etwas, wenn man beim Handy die Kekse löschen würde oder dann dort einen anderen Browser nimmt. Oder man nimmt ein anderes Handy. Und mit dem Desktop Testen macht wenig Sinn, da der ja die Bildschirmgröße abfragt und die bleibt ja gleich, auch wenn man die Browsergröße verändert. Aber ansonsten 🙂

Das kleine Skript läuft zumindest nun und hat mir bei Google Pagespeed einen Sprung von gelb auf grün beschert. Jetzt meckert das Google Tool noch wegen dem Priorisieren von Inhalten und spätestens, wenn ich die Style-Anweisungen irgendwann aus dem Header in eine Extra-Datei auslagere, wird er wohl noch etwas zu meckern haben. Aber ich brauch da keinen Wert von 100. Grün reicht mir. Und noch wichtiger: Die Bilder sind optimiert.

Hier die Pagespeed Angaben für die mobile Version vorher und nachher:
Pagespeed Bernsteinkette Baby vorher

Pagespeed Bernsteinkette Baby Nachher

So, jetzt brauch ich nur noch ein vernünftig aussehendes Menü. Dann hab ich den Großteil der Optik erledigt. Im Moment sieht die Seite in etwa so aus:

Bernsteinkette fürs Baby
Das derzeitige Layout von Bernsteinkette fürs Baby.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.