Schnellere Bilder mit Cloudinary

Optimierte Auslieferung von Bildern

Media Library Von Cloudinary
Die Media Library von Cloudinary

Ich weiß, dass die meisten von Euch meinen Blog mit dem Handy oder dem Tablet besuchen und bin bemüht den besonderen technischen Anforderung die das Surfen mit diesen Geräten mit sich bringt gerecht zu werden. Denn besonders unterwegs ist es wichtig, dass alles möglichst schnell geladen wird und vor allem nur das über die Internetverbindung geht was wirklich nötig ist. 

Da meine Rezepte und Restaurantberichte doch sehr viele Bilder enthalten, stellte ich mir die Frage wie ich diese am besten für Mobilgeräte ausliefern kann. Nun zum einen bekommen jetzt schon Handys, die eine bestimmte Bildschirmgröße unterschreiten, bereits eine kleinere Version der Bilder von meinem Blog geliefert. Das spart schon mal jede Menge Datenvolumen. Aber am besten wäre es, wenn die Bilder nur einmal geladen werden und beim nächsten Mal sofort verfügbar sind.

Hierzu gibt es in den Browsern bestimmte Zwischenspeicher - sogenannte Caches - die geladene Bilder vorhalten und diese beim nächsten Seitenaufruf direkt ausliefern ohne sie erneut aus dem Internet zu laden. Der Zeitraum für dieses Vorhalten wird durch bestimmte Parameter gesteuert, die eine Website oder ein Blog beim Versand von Bildern an den Browser mitschickt. 

Das Problem war, dass der Webspace Provider bei dem foodie.yamwoonsen.de gehostet wird nicht die Möglichkeit bietet diese Parameter richtig zu setzten und die Bilder so nicht lange genug im Cache gehalten wurden. Deshalb und da es eh sinnvoll ist die Bilder von einem speziellem Server oder einem ganzen Netzwerk von Servern - einem sogenannten Content Delivery Network oder kurz CDN - ausliefern zu lassen, machte ich mich auf die Suche nach Alternativen.

Die meisten CDN Anbieter sehen ihre Kunden im professionellen Bereich und wollen deshalb einiges an Geld für ihre Dienste sehen. Da mein Blog aber ein reines Hobby ist und bleiben soll, fiel diese Option schon einmal flach, den ich zahle ja schon Geld für den Webspace selbst.

Irgendwann stolperte ich dann über den "Free Plan" des CDN Anbieters cloudinary.com. Dieser bietet die Möglichkeit Bilder bis zu einer gewissen Datenmenge kostenlos weltweit hochverfügbar zu machen, also ein Content Delivery Network aufzubauen. Da der Upload in das CDN automatisch durch den ersten Aufruf der Original-URL eines Bildes geschieht, integriert sich das Ganze auch perfekt in meinen automatisierten Bilder Workflow.

Ein Vergleichstest mit dem Performance Test ool GTMetrix bestätigte mir dann auch, dass dies zum gewünschten Ergebnis führte. Die einzelnen Bilder laden schneller und sie werden nur ein einziges mal geladen und dann im Zwischenspeicher vorgehalten.

Lange Rede, kurzer Sinn: Ihr bekommt jetzt schnellere Bilder!

GTMetrix
Performance Analyse mit GTMetrix

Jens am 18.12.2017 um 21:15
in Tech-Talk
Stichwörter