Boolie.org

Bilder richtig für das Web optimieren

bilder für das web optimieren

Verfasst von

Marc Borkowski

in

,

Bilder Tutorial wie man seine Produktfotos für sein Onlineshop extrem klein bekommt, um die Seitengeschwindigkeit zu optimieren. In diesem Beispiel habe ich aus einem Produktfoto mit einer Größe von 118 kb auf 29 kb reduziert.

steuer die zu testende Seite an

screenshot onlineshop studio2330

teste die Bilder mit speedtest

Gebe die URL vom Webshop bei Pagespeed Insights ein und klappe den Reiter Bilder auf. Dort siehst du, welcher Bilder optimiert werden müssen.

screenshot testtool webdev

öffne das Bild in Photoshop

Öffne das Bild in Photoshop und speicher es als jpg.

screenshot photoshop mit produktbild

extrem reduziertes Bild in Photoshop anzeigen

Drehe jetzt den Regel der Qualität auf 0 und gehe Schritt für Schritt die Qualität hoch, bis es gut aussieht.

Buchempfehlung Webdesign

screenshot-photoshop-mit-produktbild klein reduziert

Bei mir ist es die Stufe 9.

screenshot-photoshop mit produktbild mittel reduziert

mit Kraken weiter optimieren

Öffne Kraken.io Webinterface und lade dein Bild hoch, bzw das komprimierte Bild runter.

screenshot kraken bild hochladen

mit Photoshop als WebP speichern

Speicher nun das Bild als .webp um die letzten kb rauszukizeln.

screenshot photoshop speichern unter webp

Buchempfehlung Webdesign

Ergebnis

Orginal-Produktfoto 118kb

Bild im Browser öffnen

Produktfoto vor der optimierung

Optimiertes-Produktfoto 29kb

Bild im Browser öffnen

Produktfoto komplett optimiert

Kommentare

4 Antworten zu „Bilder richtig für das Web optimieren“

  1. Avatar von Micha
    Micha

    Bitte nicht mehrfach hintereinander komprimieren. Dadurch addieren sich die Bildartefakte.
    Photoshop kann aber benutzt werden, um die richtige Bildgröße zu exportieren.
    Meine Faustregel: maximale Darstellungsgröße in CSS mal 2

  2. Avatar von Marc Borkowski
    Marc Borkowski

    Hi @Micha,
    ich glaube es gibt ein unterschied zwischen, qualität reduzieren und komprimieren oder?
    Danke für den Tipp, mit CSS mal 2, werde ich in Zukunft beachten.

  3. Avatar von Micha
    Micha

    @Marc bei verlustbehaftetem Komprimieren ist dies immer auch mit Qualitätsverlust verbunden! Wie stark dieser ist, kann mit dem Butteraugli Algorithmus gemessen werden.

    Nur bei lossless hat das komprimieren keinen Einfluss auf die Qualität.
    Bei RAW, TIFF, BMP, GIF, und PNG ist das Speichern der Bilder verlustfrei. Auch WebP und AVIF unterstützen einen lossless Mode. Damit kann man die Bilder zwar unendlich oft speichern ohne Qualitätsverlust, aber die Dateien sind zu groß für eine performante Website.

    Plot twist: Versuche haben gezeigt, dass JPEG Kompression mit genau der gleichen Einstellungen immer wieder die gleichen Artefakte erzeugen und vielfaches Neucodieren die Qualität dann kaum beeinflusst

  4. Avatar von Marc Borkowski
    Marc Borkowski

    @Micha,
    Spannend! Danke für deine Kommentare.

Schreibe einen Kommentar

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

Weitere Beiträge