Wie man Bilder richtig fĂŒrs Web optimiert

Die Ladegeschwindigkeit deiner Website hĂ€ngt von vielen unterschiedlichen Faktoren ab, unter anderem wesentlich von der GrĂ¶ĂŸe der Daten, die geladen werden mĂŒssen. Und oft sind es kleine Dinge, die einen großen Unterschied machen.

Dabei spielen Bilder, deren Format und vor allem Optimierung & Komprimierung eine wichtige Rolle.

Welchen Vorteil bringt Bild-Optimierung?

Kurz gesagt: das passende Bildformat richtig optimiert kann die Ladegeschwindigkeit deiner Website deutlich verbessern. Je bildlastiger deine Seite gestaltet ist – desto grĂ¶ĂŸer das Potential.

Die Bildformate des Webs

Bevor du mit dem Ändern deiner Bilder beginnst, sollten wir uns zuerst die unterschiedlichen Bildformate ansehen, die im Web vorkommen und wann diese zum Einsatz kommen. Wenn du dich damit bereits auskennst – wunderbar! Wenn nicht, lies zuerst unseren Artikel: Bildformate des Webs im Detail erklĂ€rt.

„Eines gleich vorweg: es gibt keine beste Lösung. Wie so oft gilt: verwende das Tool das sich am besten in deinen persönlichen Workflow integrieren lĂ€sst und fĂŒr deinen Use Case passend ist.“

Ansatz & Tools zur Optimierung

Eine schnelle Google Suche zeigt: die Auswahl an Image Optimization Tools ist riesig. Aber welches Tool ist nun das richtige fĂŒr mich? Eines gleich vorweg: es gibt keine beste Lösung. Wie so oft gilt: verwende das Tool das sich am besten in deinen persönlichen Workflow integrieren lĂ€sst und fĂŒr deinen Use Case passt.

Welche Tools gibt es?

Egal ob Web App, Desktop App, WordPress Plugin oder Image CDN – im Grunde machen alle das selbe – deine Bilder optimieren/komprimieren und damit Ladezeit einsparen. GrundsĂ€tzlich haben wir also 4 Kategorien:

  1. Web (Optimierung/Komprimierung direkt im Browser)
  2. Desktop-Anwendungen
  3. Plugins fĂŒr dein CMS, z.B. WordPress
  4. Image CDNs (Content Delivery Networks)

3 AnsÀtze Bilder zu optimieren:

Um herauszufinden welches Tool fĂŒr deinen Use Case passend ist, schauen wir uns auch die unterschiedlichen AnsĂ€tze der Bildoptimierung an.

1. Single Image Optimisation (Per Web oder Desktop App)

Unsere Empfehlung: Squoosh (Web App)

Vorteile:

  • Totale Kontrolle ĂŒber Bildformat, Optimierungsgrad und vor allem die vom Auge wahrgenommene BildqualitĂ€t. (Nicht jedes Bild ist gleich – eine Illustration hat, je nach Detailgrad oft mehr Einsparungspotential als ein Foto)
  • Bestes Endergebnis, bei kleinst-möglicher DateigrĂ¶ĂŸe
  • UnterstĂŒtzt JPG, PNG, GIF & WebP
  • Grafische Vergleichsansicht (Vorher/Nachher)
  • Gratis

Nachteile:

  • Langsam (Jedes Bild wird einzeln optimiert/komprimiert)
  • Setzt ein geschultes Auge voraus

2. Bulk Image Optimisation (Per Web oder Desktop App)

Unsere Empfehlung: ImageOptim (Mac App) & Caesium Image Compressor (Windows App)

Vorteile:

  • Schnell (Mehrere Bilder, unterschiedlicher Formate können auf einmal optimiert werden)
  • UnterstĂŒtzt JPG, PNG & GIF (ImageOptim), JPG & PNG (Caesium Image Compressor)
  • Gratis

Nachteile:

  • Keine grafische Vergleichsansicht (Vorher/Nachher)
  • Optimierungs-Einstellungen werden global fĂŒr das Format (JPG, PNG, GIF) gesetzt (Nicht pro Bild)

3.1 Auto Image Optimisation (Per Plugin)

Unsere Empfehlung: Imagify (WordPress Plugin)

Vorteile:

  • Optimierung wird direkt vom Plugin ĂŒbernommen

Nachteile:

  • Keine grafische Vergleichsansicht (Vorher/Nachher)
  • Optimierungs-Einstellungen werden global gesetzt (Nicht pro Bild)
  • DateigrĂ¶ĂŸe oft grĂ¶ĂŸer als nötig
  • 25MB pro Monat Datenlimit im Free Plan (1GB Plan beginnt bei 4,99 $ pro Monat)

3.2 Auto Image Optimisation (Per CDN)

Unsere Empfehlung: imgIX

Vorteile:

  • Optimierung wird direkt von CDN ĂŒbernommen
  • Bei Bildern, die aus einem Bild-CDN geladen werden, gibt eine Bild-URL nicht nur an, welches Bild geladen werden soll, sondern auch Parameter wie GrĂ¶ĂŸe, Format und QualitĂ€t. Dadurch ist es einfach, Variationen eines Bildes fĂŒr verschiedene AnwendungsfĂ€lle zu erstellen.
  • UnterstĂŒtzt JPG, PNG, GIF & WebP

Nachteile:

  • Kostenpflichtig
  • Installation & Konfiguration benötigt Vorkenntnisse

Welches Tool und Ansatz der richtige fĂŒr dich ist, hĂ€ngt von mehreren Faktoren ab:

  • Wie bildlasting ist deine Seite?
  • Wie wichtig ist es dir, die Kontrolle ĂŒber die QualitĂ€t jedes einzelnen Bildes zu haben?
  • Hast du bereits Know How in diesem Bereich?
  • Wieviel Zeit & Geld kannst/willst du in die Optimierung stecken?

Faustregel:

Hast du nur wenige Fotos auf deiner Webseite, oder die QualitĂ€t bzw. DateigrĂ¶ĂŸe ist dir besonders wichtig, bist du mit einem Single Image Optimisation Tool gut beraten.

Ist deine Webseite sehr bildlastig, wirst du auf Dauer keine Freude damit haben jedes Bild einzeln optimieren/komprimieren zu mĂŒssen. In diesem Fall ist ein Bulk Image Optimisation Tool, oder ein WordPress Plugin das die Optimierung fĂŒr dich ĂŒbernimmt, die richtige Wahl.

Du hast einen Online Shop, wenig Zeit aber Budget? Dann wĂŒrde ich dir dazu raten einen CDN zu verwenden. Du hast schließlich besseres zu tun als Bilder zu optimieren, oder?

Welchen Ansatz, bzw. welches Tool verwendet ihr?

Das Wichtigste fĂŒr uns ist, die bestmögliche BildqualitĂ€t bei kleinstmöglicher DateigrĂ¶ĂŸe zu erreichen. Da unsere Seite nicht sonderlich bildlasting ist, zahlt es sich fĂŒr uns aus, die extra Zeit aufzuwenden jedes Bild einzeln unter die Lupe zu nehmen. Unser Tool der Wahl dafĂŒr ist Squoosh.

Wie man Bilder mit Squoosh optimiert

Squoosh ist eine sogenannte Web App. Du kannst also einfach in deinem Browser optimieren: squoosh.app.

Schritt 1: Beispielbild herunterladen

Als Beispiel verwenden wir das unoptimierte Headerbild unseres Blogartikels. Ein JPG mit Abmessungen von 770*433px und einer DateigrĂ¶ĂŸe von 225KB. Du kannst das Bild hier herunterladen. Link klicken – Rechtsklick aufs Bild – Bild speichern unter – Ziel auswĂ€hlen (Desktop) – Bild speichern.

Schritt 2: Bild per Drag & Drop hochladen.

Im nÀchsten Schritt das Bild vom Desktop ins Browserfenster von Squoosh ziehen. Das sieht zuerst so aus:

Wenn du alles richtig gemacht hast sieht der nÀchste Screen so aus:

Links siehst du das Originalbild, rechts die optimierte Variante. Squoosh wĂ€hlt standardmĂ€ĂŸig ein JPG mit 75% QualitĂ€t. (UnabhĂ€ngig von Ausgangsformat und QualitĂ€t des hochgeladenen Bildes) Zieh den Slider im Bild ruhig hin und her um eine Vorher/Nachher Vorschau zu bekommen.

Bildoptionen

Als nĂ€chstes sehen wir uns die Optionen an (das graue KĂ€stchen, im Bild unten rechts) die uns zu VerfĂŒgung stehen. Die Einstellungen sind ganz grob in 2 Schritte unterteilt.

1. Edit

Resize (verkleinert das Bild)
Reduce palette (verringert die Anzahl der Farben)

2. Compress

Zielbildformate (JPG, PNG, GIF & WebP, etc.)
Quality Slider (die KompressionstÀrke)

1.1 Resize

Obwohl Squoosh die Option hat Bilder zu verkleinern, raten wir dazu das Bild bereits vor der Optimierung in den richtigen Abmessungen hochzuladen. In unserem Fall haben die Headerbilder des Blogs eine MaximalgrĂ¶ĂŸe von 770*433px.

1.2 Reduce palette

Verringert die Anzahl der im Bild vorkommenden Farben. Default: 265. Je einfacher das Bild aufgebaut ist, bzw. je weniger Farben die Illustration hat, desto mehr Spielraum hast du fĂŒr die Verkleinerung der DateigrĂ¶ĂŸe, ohne, dass das Auge einen Unterschied in der wahrgenommenen QualitĂ€t bemerkt.

2.1 Zielbildformate

Hier kannst du das Bildformat auswĂ€hlen in welchem die optimierte Datei abgespeichert werden soll, sowie das Kompressionsverfahren. DafĂŒr solltest du wissen welches Bildformat sich am besten fĂŒr die Art deines Bildes eignet.

2.2 Quality Slider

Ganz einfach: je höher die QualitĂ€t, desto grĂ¶ĂŸer die Datei. Je geringer die QualitĂ€t, desto kleiner. Jedes Bild ist unterschiedlich – Trick dabei ist einen guten Mittelweg zwischen BildqualitĂ€t und DateigrĂ¶ĂŸe zu finden.

Die Optimierung

Nun aber zurĂŒck zu unserem Beispiel Bild, das du heruntergeladen hast. Aber welches Bildformat ist nun das richtige?

Die Faustregel sagt: handelt es sich um ein Foto – oder eine vom Detailgrad einem Foto Ă€hnliche Illustration – ist das Format JPG die richtige Wahl. Verwenden Sie PNG8 fĂŒr einfache Formen mit weniger Farben.

Was bedeutet das nun fĂŒr unser Bild?

  • Bei unserem Beispielbild handelt es sich um eine Illustration – kein Foto.
  • Die Illustration ist nicht ganz flach – im Hintergrund ist ein Farbverlauf zu sehen. Das Icon rechts hat einen Blur Effekt.

In diesem Fall könnten sowohl JPG als auch PNG in Frage kommen. Sehen wir uns beide Formate im Vergleich an.

Bildformat – JPG

Wir starten mit den Standardeinstellungen von Squoosh. Jedoch ziehen wir den Quality Slider von 75% auf 89%. Kompressionsverfahren ist MozJPEG. Damit erreichen wir einen guten Mittelweg aus BildqualitĂ€t und DateigrĂ¶ĂŸe. Die Datei ist nun ca. 20 KB groß. Obwohl, bei ganz genauem Hinsehen bereits leichte Artefakte an den Kanten zu sehen sind – damit können wir gut leben.

JPG – 20 Kilobytes

Bildformat – PNG

Mit dem JPG als Basis versuchen wir uns jetzt an dem PNG. 20 KB DateigrĂ¶ĂŸe ist das Ziel. Kompressionsverfahren ist OxiPNG. Hier wird klar: ohne die Anzahl an Farben deutlich zu verringern, schaffen wir keine 20 KB – 8 Farben it is then.

PNG – 20 Kilobytes

JPG & PNG im Direktvergleich

Hier wird deutlich: auf 20 KB DateigrĂ¶ĂŸe komprimiert ist das PNG in diesem Fall nicht mehr zu verwenden. Vor allem der Farbverlauf im Hintergrund und das Icon rechts machen Probleme.

JPG – 20 Kilobytes
PNG – 20 Kilobytes

Fazit

In diesem Fall ist die Entscheidung eindeutig: das Format unserer Wahl ist JPG – aber nicht immer ist das PNG dem JPG unterlegen. Mehr dazu erfĂ€hrst du in unserem Artikel: „Bildformate des Webs im Detail erklĂ€rt“.

Wie du vielleicht merkst, kann Bildoptimierung schnell zu einer kleinen Wissenschaft werden. Das Wichtigste aber bleibt: egal fĂŒr welches Tool und welchen Ansatz du dich entscheidest – solange du die Bilder nicht in OriginalgrĂ¶ĂŸe hochlĂ€dst hast du schon viel richtig gemacht 🙂

Schreibe einen Kommentar

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