Mit Gimp JPGs für Webseiten optimieren

wilber webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin Unbearbeitete JPG-Bilder können das Laden einer Webseite deutlich verzögern. Zum Glück gibt es für GIMP ein paar Kniffe, mit denen die Dateigröße ohne drastische Qualitätseinbüßen auf einen Bruchteil reduziert werden kann.

Das hier benutzte Beispielbild wird dabei auf 13% seiner Ursprungsgröße eingeschrumpft werden. Das “Schrumpfpotenzial” kann aber auch geringer sein und ist u.a. davon abhängig, wie weit man bereit ist, Qualitätseinbußen in Kauf zu nehmen.

Als Ausgangsbild dient dieses Stillleben aus meinem Wohnzimmer (ca. 176 kB groß):

jpg original webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

Das ursprüngliche Bild: 600×399 Pixel, 176 kB

Als erstes sehen wir mal, wie stark wir die Qualitätsschraube des Bildes reduzieren können und trotzdem noch ein akzeptables Ergebnis für ein Bild auf einer Webseite erhalten:

Beim Exportieren des Bildes  kann man den Regler nach links schieben und in Echtzeit die Änderung der Bildqualität beobachten (“Vorschau” muss aktiviert sein):

jpg qualitaet webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

Das Resultat ist folgendes Bild. Natürlich gibt es Abstriche bei der Qualität, doch das Bild ist jetzt gerade mal auf ein Viertel der Größe des Originals geschrumpft:

jpg verbessert webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

Das Bild ist auf 44 kB geschrumpft…

Beim Exportieren gibt es noch ein paar weitere Schräubchen zum Drehen an den Metadaten, ohne dass die Bildqualität darunter leiden müsste.. Alleine die Option “Ohne EXIF-Daten speichern” reduziert das Bild um weitere 10 kB. Das Bild speichere ich schließlich mit folgenden “erweiterten Optionen”:

jpg menue webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

Damit ist das Bild auf 23,4 kB geschrumpft:

jpg verbessert2 webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

EXIF-Daten (u.m.) raus: 23 kB

Hier noch mal alle drei Versionen im Überblick:

jpg vergleich webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

Das letzte Bild hat mit 23,4 kB lediglich ca. 13% der Dateigröße (im Vergleich zum Original). Für einen Foto-Blog wäre das Ergebnis vielleicht nicht akzeptabel. Aber es gibt sicher viele andere Szenarien, wo die schnellere Ladezeit diese Reduktion rechtfertigt. Immerhin haben wir 150kB gespart….

Zum direkten Vergleich noch einmal das Original und die optimierte Version:

jpg original webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

Original 176 kB

jpg verbessert21 webseite webmaster save for web plugin osbn optimieren open source linux ladezeit jpg jpeg howto gimp exif blog bildbearbeitung admin

23 kB

Hier schreibt kein Gimp-Experte. Weitere Vorschläge zur Optimierung? Ab in die Kommentare… Danke! 🙂

Mehr Infos gibt es in der offiziellen GIMP-Dokumentation:

GIMP: Bilder exportieren

Comments

  1. Junge, mein Name, e-Mail und Website ist nun rechtsbündig in den Eingabefeldern, soll das so sein? oO
    Ein kleiner Tipp: du optimierst allerdings nicht, wenn du alle überarbeiteten Bilder gleichzeitig einbindest .. dann lieber nur das Original .. ;))) 😀
    Trotzdem guter Tipp 🙂
    Ich sehe ehrlich gesagt keinen Unterschied bei der Qualität der Bilder, höchstens etwas matter, kann das sein?

    1. Junge, mein Name, e-Mail und Website ist nun rechtsbündig in den Eingabefeldern, soll das so sein? oO

      Neee, das hat wahrscheinlich mit der Umstellung des Themes zu tun…

      Ein kleiner Tipp: du optimierst allerdings nicht, wenn du alle überarbeiteten Bilder gleichzeitig einbindest .. dann lieber nur das Original .. 😉 )) 😀

      ???

      Ich sehe ehrlich gesagt keinen Unterschied bei der Qualität der Bilder, höchstens etwas matter, kann das sein?

      Der Kontrast im Original ist besser. Das “optimierte” Bild hat ein paar hässliche Pixel um die Konturen, genauer betrachtet…

  2. Für dieses Zwecke gibt es ein sehr gutes Plugin für Gimp namens Save for Web. Gibt es auch in diversen Repositories für unterschiedliche Distributionen. Für Ubuntu ist bei GetDeb ein Paket zu bekommen.

    1. Hallo Matthias, ich habe das Plugin getestet. Ich habe versucht auf eine ähnliche Dateigröße zu kommen, wie mit der manuellen Methode. Hier ist das Ergebnis mit ca. 25 kB:
      UPDATE: Hier ist was schiefgelaufen…
      Das korrekte Resultat seht Ihr weiter unten…
      Danke auf jeden Fall für den Tipp, ich werde das Plugin künftig noch mal genauer unter die Lupe nehmen. Vielleicht ist das Ergebnis ja bei anderen Bildern anders.
      Das Plugin kann ja auch zusätzlich GIFs und PNGs optimieren…

  3. Hm, also da ist was schiefgelaufen bei dir. Bei mir sieht das Ergebnis bei 23kB genauso aus wie das bei dir im Text. Habe dir mal einen Screen als PNG mit den Einstellungen und dem Ergebnis an deine E-Mail gesendet.
    [edit admin: hier das bild:]
    Plugin

    Und hier Dein Bild im Resultat:

    Optimiert mit

    1. Fazit: Du hast Recht, da ist was schiefgelaufen, danke für den Hinweis. Das Resultat durch das Plugin ist, denke ich, qualitativ vergleichbar mit meiner manuellen Methode …?

  4. Ich würde noch “progressiv” ankreuzen. Das erhöht zwar wieder leicht die Größe, aber gerade bei langsamen Verbindungen ist schon etwas für den Surfer sichtbar.

Comments are closed