Bildoptimierung für Webseiten in 4 einfachen Schritten

Seit diesem Wochenende habe ich begonnen, nach und nach alle Bilder auf meiner Webseite (z. B das Headerfoto dieses Beitrags, Maße: 800px × 375px, Größe: 20,45 KB oder 20.941 Byte) zu optmieren. Wass heißt das genau? Nun, einerseits soll die Datengröße der Bilder möglichst klein werden, um Traffic zu sparen und damit die Ladezeiten der einzelnen Webseiten zu verkürzen.

Andererseits soll auch möglichst nicht die Qualität der Bilder darunter leiden. Ich bin selber überrascht wieviel Datenspeicher man sparen kann, wenn die Bilder vernünftig optimiert und komprimiert werden. So konnte ich die Datenmenge der Bilder in einem Beitrag um bis zu 80 % (!) verringern.

Hier ein Beispiel von einem Bild (Maße 800 mal 600 Pixel) einer roten Katze vor der Optimierung, Datengröße: 135,98 KB (139.245 Byte)

Bild einer Katze ohne Bildoptimierung. Datengröße: 135,98 KB (139.245 Byte).
Bild einer Katze ohne Bildoptimierung. Datengröße: 135,98 KB (139.245 Byte).

Und hier das Bild nach der Optimierung, Datengröße: 65,99 KB (67.569 Byte):

Bild einer Katze mit Bildoptimierung. Datengröße: 65,99 KB (67.569 Byte).
Bild einer Katze mit Bildoptimierung. Datengröße: 65,99 KB (67.569 Byte).

Auf Anhieb kann hier wohl niemand einen Unterschied in der Qualität erkennen und das bei einer reduzierten Datenmenge von über 50 %.

Bildoptimierung in 4 einfachen Schritten

Wie man Bilder derart ohne einen sichtbaren Qualitätsverlust komprimieren kann, erkläre ich im folgenden:

  • Mit einem Bildbearbeitungsprogramm eurer Wahl dem Bild eine Auflösung von 72 DPI geben.
  •  Das Bild auf die maximal benötigten Maße beschneiden, z. B. 800 x 600 Pixel.
  • Das Bild mit folgenden Parametern speichern:
    • Dateiformat: jpg
    • Qualität 50%
    • Unterformat 4:2:2
    • Farbeinstellungen: vom Dokument übernehmen
    • progressiv

Mit diesen Einstellungen wird schon einiges an Datenmenge reduziert.

  • Nun in deinem Browser die Webseite compressjpg aufrufen. Dort einfach euer Bild in das Feld „Drop your files here“ hineinziehen. Das Bild wir nun automatisch komprimiert.

Zum herunterladen einfach auf den „download“ Button unter dem Bild klicken und schon habt ihr ein richtig gutes, komprimiertes Bild für eine Webseite :-).

Quellenangaben

Headerfoto: „compressor“ von Daniel Go, lizenziert unter CC-BY-NC 2.0.

Beitrag zuletzt geändert am 6. Jan 2018 @ 10:56.

Gefällt dir dieser Beitrag?

Dann kannst du mich ganz einfach unterstützen.

Schreibe mir kurz deine Meinung in die Kommentarfunktion am Ende dieses Beitrags.

Vielen Dank!

Bei Fragen nutze einfach mein Kontaktformular

Kommentare(2)

  • Sebastian
    31. Januar 2016, 21:32  Antworten

    An sich ganz interessant… aber absolut unpraktikabel, wenn man mehr als 20 Bilder hat… denn compressjgp begrenzt die Uploads auf 20 Bilder pro Upload…

    Und was mache ich bei 2.500 Bildern?

    Danke für einen Tipp…

    • 1. Februar 2016, 7:58

      Hallo Sebastian,

      Danke für deinen Kommentar. Ich nutze auf meiner Webseite ca. 200 Bilder, welche ich alle mit compressjpg optimiert habe. Hat gut 45 Minuten gedauert. 2500 Bilder für eine Webseite optimieren? Da gibt es andere Lösungen; z. B. kann mit professioneller Software ein Makro erstellt werden, welches alle 2500 Bilder automatisch nacheinander optimiert. Dazu braucht man dann allerdings das kostenpflichtige Adobe, Corel (ö.ä.) und das Knowhow zum erstellen des Makros.

Schreibe einen Kommentar


Liebe/r Leser/in :-)

In diese Webseite sind weit über 1000 Stunden meiner Freizeit geflossen. Alle Inhalte sind frei zugänglich; ohne Werbung!

Daher eine Bitte:

Wenn dir gefällt was du liest, nimm dir etwas Zeit und schreibe mir als Zeichen deiner Wertschätzung einen Kommentar am Ende des Beitrages.

Vielen Dank!

Hintergrundmuster: "sativa" von www.toptal.com