Bilder bearbeiten und optimieren – Pagespeed erhöhen

Bilder bearbeiten, verkleinern, komprimieren, optimieren

Bilder bearbeiten verkleinern optimieren skalieren

Bevor man Bilder auf seine Webseite hoch lädt, sollte man sich ein paar Gedanken darüber machen wie das jeweilige Bild oder die Grafik dargestellt werden soll. Wichtig im Zusammenhang mit dem Pagespeed, also der Geschwindigkeit einer Webseite, ist die Größe und Qualität von Bildern und Grafiken. Um hier eine bessere Website Performance durch optimierte Bilder und Grafiken zu erreichen, müssen wir die Bilder und Grafiken also vorher bearbeiten um unnötigen Traffic und Ladezeiten zu vermeiden. Dazu stehen verschiedene Möglichkeiten zur Auswahl die Bilder und Grafiken zu bearbeiten:

  • Bilder und Grafiken skalieren (Bildbreite und Bildhöhe)
  • Bilder und Grafiken optimieren anhand der Qualität und Dateigröße
  • Bilder und Grafiken komprimieren beim Webseitenaufruf

Haben Sie z.B. ein Bild im Format 2304×1728 Pixel vorliegen, benötigen es aber auf der Website eigentlich nur in einer 300×225 Auflösung, sollten Sie das Bild vor dem Upload verkleinern. Grundsätzlich kann dies auch durch ein CMS System und dem Browser erfolgen. Dies geht aber dann wieder zu Lasten der Website Geschwindigkeit. Mit einem Bildbearbeitungsprogramm können Sie diesem Performanceverlust leicht entgegenwirken. Ein kostenloses Bildbearbeitungsprogramm in deutscher Sprache unter Windows ist z.B.:

GIMP

Dort finden Sie auch eine Anleitung für GIMP auf Deutsch. Weitere Software zur Bildbearbeitung, welche auch von Google empfohlen wird, finden Sie hier:

https://developers.google.com/speed/docs/insights/OptimizeImages



Bilder bearbeiten: skalieren und optimieren

Öffnen Sie anhand unserer Beispielsoftware GIMP ein zu bearbeitendes Bild. Klicken Sie anschließend auf den Menüpunkt „Bild“ und wählen Sie den Unterpunkt „Bild skalieren“ aus.

Bildbearbeitung mit GIMP Bild skalieren verkleinern

Sie können nun einfach die Bildbreite, z.B. auf 300 Pixel ändern. Die Bildhöhe wird bei geschlossenem Kettensymbol automatisch an die eingegebene Bildbreite angepasst. Wenn Sie die Kettenverknüpfung durch einen Klick unterbrechen, können Sie die Bildbreite und die Bildhöhe unabhängig voneinander bestimmen. Drücken Sie anschließend auf den Button „Skalieren“. Danach wählen Sie den Menüpunkt „Datei“ und „Speichern unter“ aus. Geben Sie dem Bild einen neuen Namen, damit Ihr Originalbild nicht überschrieben wird. Wenn Sie dann auf speichern drücken, öffnet sich ein kleines Fenster.

Bildbearbeitung mit GIMP Bild Dateigröße und Qualität anpassen

Klicken Sie hier die Option „Vorschau im Bildfenster anzeigen“ an um die aktuelle Dateigröße des Bildes angezeigt zu bekommen. Mit dem Qualitätsregler können Sie die Dateigröße des Bildes weiter verringern. Achten Sie aber darauf, dass die Qualität nicht zu sehr in den Hintergrund treten muss. Wie sich Ihr Bild bei der Reduzierung der Dateigröße optisch verändert, können Sie im Hauptfenster von GIMP sehen. Speichen Sie anschließend das bearbeitete Bild. Sie können das optimierte Bild nun auf Ihre Webseite hochladen.

Bilder komprimieren

Durch die Bildbearbeitung konnten wir bereits viele Kilobytes einsparen und dadurch auch den Traffic bei einem Webseitenaufruf reduzieren. Wie Sie noch mehr Performance aus Ihrem Webauftritt durch Komprimierung von Bildern erreichen, lesen Sie hier:

Browser Caching Expires und Komprimierung Deflate - Domain Frage DE



1 Antwort

Hinterlassen Sie einen Kommentar

Wollen Sie an der Diskussion teilnehmen?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.