Cloudinary: So optimierst du die Ladezeit deiner Bilder

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Alle sprechen vom schnellen Internet. Aber es ist nicht nur Sache der Internet-Provider und Mobilfunkbetreiber, für ein schnelles Netz zu sorgen. Als Webentwickler trägst du mindestens in gleichem Maße dazu bei, indem du deine Website so effizient entwickelst, dass unnötig zu ladender Ballast gar nicht erst entsteht. Gerade bei der Bereitstellung von Bildern kannst du dafür sorgen, dass diese so platzsparend sind, dass sie möglichst schnell geladen werden. Und die Bildverwaltung und -optimierung von Cloudinary hilft dir dabei, Bilder so effizient zu erstellen und bereitzustellen, dass diese nochmal deutlich schneller geladen werden.

wordpress-website-speed

Das richtige Bildformat und die optimale Kompression

Die erste Entscheidung, die ein schnelles Laden deiner Bilder beeinflusst, ist die Auswahl des richtigen Bildformates. Neben JPEG, PNG und GIF gibt es noch weitere Formate wie WebP und JPEG-XR. Während WebP allerdings nur von Chrome unterstützt wird, wird JPEG-XR nur im Internet Explorer und Edge dargestellt. Grundsätzlich lässt sich sagen, dass für großformatige und fotografische Bilder das JPEG-Format gut geeignet ist, während eher kleinformatige und grafische Bilder besser als PNG oder GIF erstellt werden sollten, die zudem noch die Möglichkeit der Transparenz mit sich bringen.

cloudinary_format-qualitaet
Schnelle Auswahl des richtigen Bildformates

Mit Cloudinary steht dir eine komfortable Bildverwaltung zur Verfügung, mit der du im Handumdrehen deine hochgeladenen Bilder in beliebige andere Formate umwandelst. Auch die Qualität der Bilder stellst du über einen Schieberegler ein und siehst direkt eine Vorschau. Gerade bei JPEGs hast du einen großen Spielraum und entscheidest je nach Motiv, wie hoch die Qualität beziehungsweise Kompression sein muss, um ein optimales Verhältnis von Bildqualität und Dateigröße zu erlangen.

Passgenaue Größe festlegen

Ebenfalls wichtig und in Zeiten responsiver Weblayouts nicht einfach, ist die Bereitstellung von Bildern in exakt der Größe, in der sie im Browser dargestellt werden. In der Desktopansicht werden Bilder in der Regel deutlich größer dargestellt als auf Mobilgeräten. Statt dieselbe Bilddatei zu verwenden und diese auf Mobilgeräten per CSS kleiner darzustellen, solltest du für unterschiedliche Auflösungen auch jeweils passgenaue Dateien anlegen.

cloudinary_breite
Einfaches Skalieren per URL

Dank des „<picture>“-Elementes und des „srcset“-Attributes gibt dir HTML5 die Möglichkeit, auf unterschiedliche Layouts beziehungsweise Display- oder Fenstergrößen einzugehen und individuelle Dateien auszugeben. Auch hier unterstützt dich Cloudinary und skaliert dir im Handumdrehen Bilder in beliebigen Auflösungen. So sorgst du auf deiner Website dafür, dass unnötig große Bilddateien vermieden werden.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Pixeldichte berücksichtigen

Dank hochauflösender Monitore und Displays musst du als Webentwickler mittlerweile nicht nur für unterschiedliche Weblayouts Bilder bereitstellen, sondern auch für hochauflösende Displays beziehungsweise Monitore. Hier gilt es, Bilder mit mindestens doppelter Pixeldichte bereitzustellen. So erreichst du, dass deine Websites auch auf Retina-Displays gestochen scharf aussehen.

Auch hier gilt, dass hochauflösende Bilder nur dort geladen werden sollten, wo sie erforderlich sind. Bei „einfachen“ Displays sollten auch normal aufgelöste Dateien geladen werden, um unnötige Ladezeit zu vermeiden.

cloudinary_pixeldichte
Doppelte Pixeldichte per „dpr_2.0“ über die URL definieren

Die Kombination aus responsivem Weblayout und unterschiedlichen Pixeldichten ergibt häufig eine recht große Menge unterschiedlicher Bilddateien, die du bereitstellen musst, um alle Darstellungsfälle abdecken zu können. Dank Cloudinary berücksichtigst du ohne weiteres die Vielzahl unterschiedlicher Bilddateien, ohne den Überblick zu verlieren oder manuell Bilder in unzähligen Formaten ausgeben zu müssen.

Bilder richtig cachen

Mit den richtigen Caching-Einstellungen verhinderst du, dass einmal geladene Bilder erneut geladen werden. So sollte über den Header „Cache-Control“ ein möglichst langer Zeitraum eingestellt werden, für den eine Bilddatei im Browser zwischengespeichert werden soll. Cloudinary gibt hier einen Wert vor, der in etwa 30 Tage entspricht.

Cache-Control: public, max-age=2591907

Das heißt, erst nach 30 Tagen wird der Browser eine heruntergeladene Datei erneut anfordern. Falls sich die Bilddatei innerhalb des Caching-Zeitraums ändert, solltest du sicherstellen, dass der Browser dies mitbekommt. Dazu gibt es das sogenannte „ETag“. Über dieses Header-Feld wird ein Hash-Wert übertragen, der sich ändert, sobald sich die Datei auf dem Server ändert. Da das „ETag“ immer abgefragt wird – auch innerhalb des Caching-Zeitraums –, erkennt der Browser durch einen veränderten Hash-Wert, dass sich die Datei auf dem Server geändert hat und lädst diese trotz Caching-Headers herunter.

ETag: "07c35c9716cf1702b22cda61526a0c5a"

Cloudinary erstellt für jede Ressource einen „ETag“, so dass es ein optimales Zusammenspiel mit „Cache-Control“ gibt, um unnötige Downloads zu vermeiden.

cloudinary_caching
„Cache-Control“ und „ETag“-Header

Nutze Sprites und vermeide zu viele Requests

Nicht nur die Größe der Bilder, auch die Anzahl der zu ladenden Dateien bremst die Geschwindigkeit einer Website. Denn jede einzelne Datei, beziehungsweise jeder Request, nimmt Zeit in Anspruch und verlängert das Laden einer Seite. Daher solltest du gerade bei der Verwendung vieler kleiner Bilder diese in einer einzigen Bilddatei unterbringen.

So platzierst du beispielsweise alle auf einer Seite verwendeten Logos in einer PNG-Datei und erstellst einen sogenannten CSS-Sprite. Hierbei wird per CSS nur jeweils ein Ausschnitt aus der Bilddatei dargestellt. Dazu musst du natürlich wissen, an welcher Position innerhalb des Bildes die jeweiligen Logos platziert sind. So werden alle Icons mit einem Request geladen und einfach mehrfach als Ausschnitt dargestellt. Je mehr einzelne Dateien du damit einsparst, desto deutlicher wird der Geschwindigkeitsgewinn auf deiner Website zu spüren sein.

cloudinary_sprites
Schnelle Erstellung von Sprites

Mit Cloudinary erstellst du CSS-Sprites spielend einfach. Lade einfach alle Logos beziehungsweise Bilddateien hoch, die du zu einem Sprite kombinieren willst und weise ihnen jeweils einen identischen Tag – zum Beispiel „logo“ – zu. Anschließend rufst du einfach die URL „http://res.cloudinary.com/demo/image/sprite/logo.png“ auf. Als Dateiname wird einfach der gemeinsam vergebene Tag genommen und als Dateiendung das von dir gewünschte Bildformat.

Cloudinary erstellt automatisch eine Bilddatei, in der alle hochgeladenen Dateien mit demselben Tag platziert sind.

Über die URL „http://res.cloudinary.com/demo/image/sprite/logo.css“ erhältst du die passende CSS-Datei, in der für alle Logos eine Klasse angelegt wurde, die den entsprechenden Bildausschnitt darstellt. Einfacher erstellst du CSS-Sprites nicht, zumal der Austausch und die Ergänzung zusätzlicher Bilddateien ebenfalls einfach und kompliziert ist.

Nutze ein Content-Delivery-Network

Neben der Bildoptimierung und -komprimierung, dem richtigen Caching und dem Verhindern zu vieler Requests gibt es noch einen weiteren kritischen Punkt, der zu langen Ladezeiten führen kann: der Server. Gewöhnliche Provider haben oftmals nur einen Serverstandort und sind nicht darauf ausgelegt, große Datenmengen schnell auszuliefern. Content-Delivery-Networks hingegen unterhalten eine Vielzahl an Servern und sind an strategisch wichtige Internet-Knoten angebunden.

Sie liefern daher vor allem große Datenmengen deutlich schneller aus – und das weltweit. Auch hier hast du mit Cloudinary einen großen Vorteil. Denn alle auf Cloudinary gehosteten Dateien werden über das weltweite Content-Delivery-Network von Akamai ausgeliefert. Damit wird sichergestellt, dass deine Bilder überall schnell übertragen werden.

Fazit

cloudinary
Bilder-Cloud-Dienst Cloudinary

Wer schnell sein will, muss also für mehr als kleine Dateigrößen sorgen. Es gibt gleich mehrere Stellschrauben, an denen du für eine optimale Geschwindigkeit drehen musst. Mit Cloudinary hast du jedoch einen Dienst an deiner Seite, der dir viel Arbeit abnimmt und für optimale Ergebnisse sorgt. Und wer mit 75.000 Bildern, 2 Gigabyte Webspace und 5 Gigabyte monatlichen Traffic auskommt, nutzt Cloudinary sogar kostenlos.

Der Artikel ist ein Sponsored Post von Cloudinary.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

1 Kommentar auf "Cloudinary: So optimierst du die Ladezeit deiner Bilder"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Sebastian
Gast

Super Artikel.. Vor allem viel neues für mich.. Danke Denis