Bilder optimieren: Tools und Tipps für mehr Pagespeed

Die Kategorie Performance in unseren Audits ist eine der wichtigsten Anlaufstellen, um den Pagespeed Deiner Webseiten zu optimieren. Dabei hängt die Ladegeschwindigkeit auch von der Downloadgröße eingebundener Ressourcen ab. Häufig stellen hochauflösende Bilder aufgrund der hohen Dateigröße ein Problem dar, welches Du jedoch leicht beheben kannst. Wenn Deine Seite zu große Bilder nutzt, weist Dich der Audit Optimize Images darauf hin.

Inhaltsverzeichnis

  1. Warum ist es wichtig, Bilder zu optimieren?
  2. Welche Bilder sollte ich optimieren?
  3. Bilder komprimieren - Online Tools & Software
  4. Welche Optionen zur Optimierung von Bildern gibt es noch?
  5. Wo finde ich weitere Informationen?

Warum ist es wichtig, Bilder zu optimieren?

Bilder sind aus dem modernen Web nicht mehr wegzudenken und sorgen für abwechslungsreiche, informative Webseiten. Doch obwohl die Downloadgeschwindigkeit sowohl auf dem Desktop als auch mobil stetig gestiegen ist, ist sie nicht immer optimal. Nutzer auf dem Land beziehungsweise mit schwachem Empfang stoßen beim Abruf großer Bilddateien ebenso auf Probleme wie User mit begrenztem Datenvolumen.

Es ist daher wichtig, Deine Bilder zu optimieren und mit so geringer Dateigröße wie möglich bereitzustellen, um Deinen Pagespeed zu steigern. Denn gerade hochauflösende Bilder oder Gifs sind gerne mehrere hundert Kilobyte oder ein paar Megabyte groß, was die Ladezeiten Deiner Seiten stark verlangsamen kann. Mit den folgenden Programmen und Tipps komprimierst Du Deine Bilder, um das Audit Optimize Images zu bestehen.

Welche Bilder sollte ich optimieren?

Speedrank analysiert sämtliche Bilder auf Deiner Seite, komprimiert diese und setzt die komprimierte Dateigröße in Relation zum Original. Wenn Du durch eine Komprimierung mehr als vier Kilobyte sparen kannst, wird Dir das Bild als optimierungswürdig angezeigt. Das mag nicht nach viel klingen, meist sind die Größenunterschiede jedoch wesentlich deutlicher und können Deine Ladezeiten signifikant verbessern.

Unser Audit gibt Dir nicht nur Bescheid, dass Deine Bilder zu groß sind und dadurch Deinen Pagespeed negativ beeinflussen. Du kannst Dir auch anzeigen lassen, um welche Bilder es sich handelt und wie die möglichen Einsparungen aussehen.

Gehe hierzu in die Kategorie Leistung und scrolle zur allgemeinen Auswertung. Dort findest Du den Hinweis Efficiently encode images, den Du mit einem Klick erweitern kannst. Nun erscheint eine Liste der Bilder samt Dateinamen, Dateigröße und möglichem Einsparpotenzial.

Das Speedrank Lighthouse Audit zeigt unter Performance optimierungswürdige Bilder an

Das Speedrank Audit auf Google Lighthouse Basis verrät Dir unter Performance, welche Bilder Du optimieren kannst.

Bilder komprimieren - Online Tools & Software

Es gibt zwei Möglichkeiten, wie Du Deine Bilder fürs Web optimieren kannst. Entweder, Du nutzt ein Online Tool beziehungsweise ein WordPress Plugin oder Du entscheidest Dich für eine Software, die Du für Windows 10, macOS sowie Linux herunterladen kannst. Folgende Programme darfst Du kostenfrei nutzen, um Bilder zu komprimieren.

Bilder online komprimieren

Compressor.io zeigt eine Vorher/Nachher-Vorschau für komprimierte Bilder

Compressor.io zeigt eine Side-by-Side-Vorschau komprimierter Bilder an. Die Größe unseres Artikelbilds konnten wir ohne Qualitätsverlust um 74 % reduzieren.

Bilder komprimieren - Windows 10, macOS & Linux

Neben OptiPNG gibt es zahlreiche weitere Tools zur Bildkomprimierung, die Du über das Terminal ausführen kannst. Am Beispiel von OptiPNG gehst Du für die Installation sowie die Optimierung wie folgt vor:

$ sudo apt-get install optipng
$ optipng filename.png

Welche Optionen zur Optimierung von Bildern gibt es noch?

Neben der reinen Komprimierung von Bildern kannst Du auch mit deren Maßen experimentieren. Schaue Dir an, ob Deine Nutzer einige Bilder wirklich mit einer hohen Auflösung benötigen oder diese auch kleiner dargestellt werden können.

Außerdem kannst Du Dich für alternative Bildformate wie WebP und JPEG 2000 entscheiden oder Logos im SVG-Format als Vektorgrafik abspeichern. Beachte jedoch, dass nicht alle Browserversionen Next Gen Formate unterstützen.

Wo finde ich weitere Informationen?