Web, Performance

So beschleunigen Sie Ihre Website durch Bearbeitung Ihrer Bilder - Teil 2

Alexander Wagner

Wussten Sie, dass eine langsame Website Auswirkungen auf Ihr Ranking bei Google hat? Eine der einfachsten Maßnahmen, um dies zu verbessern, ist die Bearbeitung der Bilder. Nachdem wir im ersten Teil die Abmessungen der Bilder angepasst haben, zeigen wir Ihnen im zweiten Teil unserer Serie, wie Sie die Bilder noch weiter komprimieren können.

Bildkomprimierung

Im ersten Teil unserer Artikelserie haben wir Ihnen gezeigt, wie Sie die Bilder für Ihre Website in die passenden Abmessungen skalieren, damit der Besucher möglichst wenig Daten laden muss.

Als zusätzlichen Schritt sollten Sie nun die technische Komprimierung Ihrer Bilder durchführen. Dabei werden ausgeklügelte Algorithmen angewandt, die die Dateigröße reduzieren. Diese Komprimierung findet ohne Qualitätsverlust statt. Allerdings kann in seltenen Fällen die Helligkeit des Bildes verändert werden, ein manueller Check ist daher nach der Komprimierung empfehlenswert.

Es gibt unterschiedliche Verfahren für diese Komprimierung: Google selbst empfiehlt die folgenden Verfahren:

  • "jpegtran" oder "jpegoptim" für JPG-,
  • sowie "OptiPNG" oder "PNGOUT" für PNG-Dateien.

Glücklicherweise gibt es bereits kostenlose Dienste, die diese Komprimierung für Sie durchführen. Dieser Dienst nutzt die genannten Verfahren, um die Dateigröße von Bildern zu minimieren: http://image-api.suckup.de/

Wenn Sie diesen nutzen möchten, laden Sie Ihre Bilder mit dem Button "Add files" dort hoch. Sie können auch die Qualität variieren, indem Sie bei "Quality" einen anderen Wert wählen. Belassen Sie diesen im Zweifelsfall auf "auto", möchten Sie jedoch keinerlei Qualitätsverlust müssen Sie diesen auf 100% stellen.

Wenn Sie nun auf "Start upload" klicken, werden Ihre Bilder hochgeladen und die Komprimierung durchgeführt. Laden Sie dann die komprimierten Bilder durch Klick darauf herunter. Welche Bilder komprimiert wurden erkennen Sie am Kürzel "_new" am Ende des Dateinamens (der Dienst zeigt zum Vergleich nämlich auch weiterhin das Original an).

Der Dienst http://image-api.suckup.de/ ist eine Möglichkeit, die Komprimierung durchzuführen. Achten Sie auf die Endung "_new" im Dateinamen wenn Sie die Bilder herunterladen.

Benötigen Sie eine alternative Lösung, die die Skalierung und Komprimierung vieler Bilder automatisch für Sie erledigt, ohne sie erst bei einem Drittanbieter hochladen zu müssen, so schreiben Sie uns unter office@foxcraft.at

Haben Sie die Skalierung (siehe hier) und Komprimierung Ihrer Bilder durchgeführt, sind diese nun bereit, auf Ihre Website geladen zu werden. Wie Sie viele Bilder schnell auf Ihren Webspace hochladen können, lesen Sie hier.

Weitere Tipps

Sollten Ihre Bilder immer noch zu viel Speicherplatz belegen, so gibt es noch weitere Maßnahmen zur Reduktion:

  • Beim Abspeichern von JPG Bildern können Sie in den meisten Programmen die Qualität mittels eines Werts zwischen 0 und 100 bestimmen. Meist erzielt man hier im Bereich 50 – 60 immer noch sehr gute Ergebnisse, und kann die Dateigröße damit spürbar reduzieren.
  • Speichern Sie JPG-Dateien in Bildbearbeitungsprogrammen immer als "Progressiv" ab! Dadurch kann das Bild im Browser so geladen werden, dass der Website-Besucher schneller Ergebnisse sehen kann.
  • Ersetzen Sie PNG durch JPG-Bilder. Nutzen Sie PNG-Dateien nur, wenn Bilder sehr feine Details enthalten, die ein Betrachter auch beim Zoomen ins Bild noch gut erkennen soll, z.B. kleine Texte.
    Screenshots von Computerprogrammen sind daher manchmal besser geeignet im PNG Format, doch für klassische Fotos eignet sich JPG am besten.
  • Binden Sie Icons oder andere gezeichnete Grafiken nach Möglichkeit als Vektorgrafik ein, z.B. als SVG. Diese sind bei jeder Skalierung gestochen scharf, und Sie brauchen sich um die Abmessungen keine Gedanken mehr zu machen.
  • Falls Ihre Bilder durch Klick darauf vergrößert werden können: Es ist wichtig, dass hierbei die Bildvorschau (die "thumbnails") und die Detailansicht zwei unterschiedliche Dateien sind: Eine kleine Datei für das Vorschaubild, eine große Datei für die Detailansicht.

In den meisten Fällen müssen Sie nicht alle diese zusätzlichen Maßnahmen durchführen, und können auch ohne gute Ergebnisse erzielen. Wichtig sind vor allem die Anpassung der Abmessungen (siehe Teil 1) und die Komprimierung der Bilder (siehe weiter oben in diesem Artikel).

Finden Sie für sich einen Prozess, der nur die Maßnahmen enthält, die Sie mit vertretbarem Aufwand regelmäßig durchführen können! Machen Sie diesen zur Routine für alle Bilder, die Sie auf Ihre Website laden möchten. Es ist besser, Sie setzen nur die wichtigsten Maßnahmen konsequent um, als alle Maßnahmen unregelmäßig.

Potentielle Fallstricke

Hier noch zwei weitere Warnungen, die es unbedingt zu beachten gilt:

Führen Sie die technische Komprimierung immer zuletzt durch! Egal ob Sie die Bilder zugeschnitten, deren Abmessungen angepasst, oder das Format geändert haben: Als letzten Schritt vor dem Upload muss die technische Komprimierung (wie weiter oben beschrieben) durchgeführt werden.

Funktionen in manchen Content Management Systemen können Ihnen einen Strich durch die Rechnung machen: Wenn diese automatisch Anpassungen bei Bildern durchführen, wird im Normalfall keinerlei Komprimierung durchgeführt. Sie verlieren die Komprimierung im schlimmsten Fall also wieder, wenn das CMS die Bilder automatisch verändert. Vermeiden Sie es daher, Operationen wie die Skalierung oder das Zuschneiden innerhalb des CMS durchzuführen, wenn dieses selbst keine Komprimierung durchführt.

Fazit

Je nachdem, wie bildlastig Ihre Website ist, sind die vorgestellten Maßnahmen unterschiedlich stark spürbar. Die technische Komprimierung ist fast immer eine gute Idee, da sie quasi "gratis" durchgeführt werden kann. Auch sollten Sie darauf achten, dass Ihre Bilder nicht wesentlich größere Abmessungen haben, als sie beim Benutzer dargestellt werden. Nutzen Sie je nach Bedarf noch zusätzliche Maßnahmen für einzelne Seiten mit vielen Bildern, wie z.B. Fotogalerien.

Neben der Bildkomprimierung gibt es natürlich noch gänzlich andere Maßnahmen, um eine Website zu beschleunigen. Doch ist diese Maßnahme oft sehr effektiv und kann durchgeführt werden, ohne dass in den Code eingegriffen werden muss und Programmierkenntnisse erforderlich wären.

Neben wertvollem, semantisch strukturiertem Content ist die Ladegeschwindigkeit einer Website einer der wichtigsten Faktoren für Suchmaschinenoptimierung. Mit komprimierten Bildern haben Sie einen wichtigen Schritt dafür getan!

foxcraft hilft Ihnen gerne bei der Bildkomprimierung und anderen Maßnahmen zur Beschleunigung Ihrer Website.

Unverbindliches Gespräch vereinbaren