Adaptive Images – Bilder für kleine Devices optimieren

Da habe ich mir ein neues Theme ausgesucht und sogar nach einer Ewigkeit wieder mal einen (sogar recht langen) Blogbeitrag geschrieben und was passiert? Ich bastel momentan wieder vermehrt am Blog :)

Nachdem Elmastudio vor kurzem ein neues Theme rausgebracht hatte und ich es quasi ungesehen gekauft habe, begann ich damit es etwas anzupassen. Natürlich auch hier und da einige Plugins ausgetauscht oder gelöscht, CSS angepasst etc. Ihr kennt das ja… Gefällt mir nun nicht nur auf dem großen Monitor, sondern auch auf Smartphones und mit optimierten Bildern werden auch die Ladezeiten klein gehalten.

Nun kommt hier ein Responsive Theme zum Einsatz… Die Struktur/Optik des Blogs passt sich nun also der Auflösung der Besuchergeräte an. Fand ich gut und gefällt mir besser als WP-Touch o. Ä.. Aber die Bilder in den Posts waren doch teilweise recht groß und auf einem kleinen Screen muss man nicht zwingend alle Bilder in der vollen Auflösung laden. Auch nicht im Zeitalter von Datenflats…

Beim googlen bin ich dann über „Adaptive Images“ gestolpert. Ratet mal wo… Im Blog von Elmastudio (Elmastudio – Mit adaptive images Webdesign optimieren). Eine super Quelle im Übrigen für Ideen und Anleitungen rund um WordPress. Wenn noch nicht passiert, dann bookmarken, Notizzettel schreiben oder in Stein meißeln. ;)

Was macht „Adaptive Images“?

Eigentlich ist es ganz einfach. Kommt ein User per Smartphone auf die Webseite, wird ausgewertet mit welcher Auflösung er die Seite aufruft. Das Adaptive Images Script sorgt nun dafür, dass die Bilder auf die jeweilige Größe optimiert werden (und für weitere Besucher in einem extra Verzeichnis zwischengespeichert werden).

Funktioniert mit Javascript und PHP Magie. Hat der Besucher es ausgeschaltet, passiert also nichts und er bekommt die Bilder in der vollen Auflösung präsentiert.

Sinnvoll ist das aber nicht nur für Smartphones. Auch Tablets oder Netbooks haben oft eine andere Auflösung als ein „großer“ Dekstop-PC. Und auch hier bekommt der Besucher wieder entsprechend angepasste Bilder präsentiert.

Wie ihr Adaptive Images bei Euch integriert, könnt ihr am besten direkt bei Ellen im Blog nachlesen. Gute und verständliche Anleitung mit der es kein Problem sein sollte das Script bei Euch zu integrieren und euren Besuchern etwas Bandbreite zu sparen. Und etwas schneller sollte Eure Seite auf kleinen Geräten dann auch laden.

Genau das richtige für einen Sonntag Abend ;)

Wie sieht das bei Euch aus? Was habt ihr als letztes an Eurem Blog verändert/optimiert/gebastelt?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


Es gab einen kritischen Fehler auf deiner Website.

Erfahre mehr über die Problembehandlung in WordPress.