1. Warum ist es wichtig, Bilder zu optimieren?
Es gibt mehrere Gründe, warum du Bilder nicht unbearbeitet und in voller Größe auf deine Website laden solltest.
Denn große Bilder beeinträchtigen die Ladezeit deiner Website und können dadurch zu einem schlechten Ranking bei Suchmaschinen führen. Außerdem nehmen sie viel Speicherplatz auf deinem Server ein, was zu höheren Kosten führen kann.
Um die passende Bildgröße für ein Bild zu bestimmen, ist es relevant, wie du das Bild auf deiner Seite verwenden willst. Denn logischerweise wird ein Hintergrundbild breiter dargestellt, als ein kleines Bild zwischen Textblöcken.
Es gilt aber immer: So groß wie nötig, so klein wie möglich.
Aus folgenden Gründen ist es wichtig, Bilder fürs Web zu optimieren:
Performance (Ladezeit, Schnelligkeit)
Versuche, die Ladezeit so kurz wie möglich zu halten. Denn so optimierst gleichzeitig die Benutzer*innenerfahrung und vermeidest du Frustration bei deinen Besucher*innen. Was ist nerviger, als wenn man ewig lang auf das Laden eines (unwichtigen) Bildes auf einer Website warten muss?
Je größer die Bilder sind, desto länger ist die Ladezeit.
Speicher auf deinem Server
Deine Bilder sollten auch so klein wie möglich sein, um wenig Speicherplatz zu verbrauchen.
Lade aus diesem Grund nur Bilder hoch, die du auch verwenden willst. Oder lösch sie zumindest wieder, wenn du sie doch nicht (mehr) benötigst.
Suchmaschinenoptimierung
Aus SEO-Gründen ist nicht nur die Größe der Bilder entscheidend, sondern auch die Benennung und die barrierefreie Einbindung.
Wenn du deine Bilder nicht gut betitelst, verschenkst du wertvolle Möglichkeiten, über die Bildersuche gefunden zu werden.
Zugänglichkeit für Menschen mit Beeinträchtigung
Bilder liefern oft einen relevanten Mehrwert. Mach diese Informationen auch für Menschen zugänglich, die deine Bilder nicht sehen können. Die Zuweisung eines alt Attributs ist eine sinnvolle Optimierung, die deine Website barrierefreier macht. Denn dieser alternative Text kann beispielsweise von Screenreader vorgelesen werden.
2. Welche Formate gibt es und welches Dateiformat soll ich verwenden?
Bildformate gibt es einige. Aber welches ist das Richtige?
Folgende Formate solltest du für deine Website verwenden:
- Verwende SVGs für Logos und Icons
- Nutze WebP oder AVIF für Fotos mit oder ohne Transparenzen, Abbildungen und Animationen
- JPGs können für fotorealistische Motive verwendet werden, falls WebP oder Avif nicht verwendet werden soll
- PNGs nur wenn Transparenz benötigt wird und WebP oder Avif nicht zur Verfügung stehen
- GIFs oder Lottiefiles für Animationen, wenn WebP oder Avif nicht verwendet werden soll
Verwende für Logos und Icons das Format SVG. Es ist beliebig groß skalierbar, ohne an Qualität zu verlieren und die Dateigröße ist dabei sehr klein.
JPG ist ein verlustbehaftetes Kompressionsformat. PNG stattdessen ein verlustfreies. Aus diesem Grund sind JPG Dateien meistens kleiner als PNGs und darum diesen für deine Website vorzuziehen.
Es sein denn, Transparenzen müssen dargestellt werden. In diesem Fall musst du auf PNGs zurückgreifen, denn JPGs unterstützen dies nicht.
Vorzuziehen sind diesen beiden Formaten allerdings die moderneren Formate WebP („Weppy“ ausgesprochen) oder AVIF, mit denen sich auch Transparenzen und Animationen darstellen lassen. Bei sehr hoher Komprimierung wird eine bessere Bildqualität pro Datenmenge als JPGs, PNGs und GIFs erreicht. Wenn du nur ein JPG oder PNG zur Verfügung hast, kannst du es mit einem Online Converter oder einem Plugin in WebP oder AVIF umwandeln.
AVIF bietet im Unterschied zu WebP eine bessere Kompression und höhere Bildqualität, wird jedoch (noch) nicht von allen Browsern unterstützt.
Tipp: Falls du einen einfarbigen Hintergrund oder einen Farbverlauf verwenden möchtest, nutze CSS und kein Bild. Das ist viel performanter und bietet mehr Flexibilität bei Farben und Ausrichtung.
Die Wahl des Formats und somit der Dateigröße beeinflusst die Ladezeit enorm.
Hier eine kleine Auflistung der Formate und ihrer Vor- und Nachteile:
JPG / jpeg (Joint Photographic Experts Group) – Für fotorealistische Bilder mit vielen Details und Farben
Vorteil: kleiner als PNG
Nachteil: keine Transparenzen
PNG (portable networks graphics) – Für fotorealistische Bilder mit vielen Details und Farben und mit Transparenzen
Vorteil: Transparenz möglich, verlustfreie Kompression
Nachteil: größer als JPEG
SVG (Scalable vector graphics) – Für Logos und Icons
SVGs können nicht „verpixeln“, da sie nicht aus Pixeln sondern aus Pfaden bestehen.
Vorteil: verlustfreie Skalierung möglich
Nachteil: nicht für fotorealistische Bilder verwendbar
GIF (Graphics Interchange Format) – Für kurze Animationen
wepP – Für fotorealistische Bilder mit vielen Details und Farben und mit Transparenzen und für Animationen
wepP ist ein Bildformat extra fürs Web,
Vorteil: geringe Datenmenge und dadurch kurze Ladezeiten, bessere Kompressionsrate als JPG und PNG
Transparenzen mit einer besseren Qualität im Vergleich zu PNG
Animierte Bilder mit besserer Kompressionsrate als GIF
Nachteil: Manche Browser unterstützen es nicht
Tipp zum Umwandeln der Formate:
jpeg oder png in WebP umwandeln:
- Photoshop: Dialog „Speichern unter“ (nicht unter „Für Web speichern“)
- Online: https://convertio.co/ oder https://cloudconvert.com/
- Programm: WebPConverter
3. In welchem Farbraum müssen Bilder fürs Web abgespeichert werden?
Im Gegensatz zum Druck arbeitet man im Web mit Bildern im Farbraum sRGB und nicht in CMYK.
4. Was ist die perfekte Bild- und Dateigröße?
Es ist zu unterscheiden zwischen Bildgröße und Dateigröße eines Bildes.
Bildgröße
Mit der Bildgröße ist die Breite und Höhe eines Bildes in Pixel gemeint.
Das Bildmaß ist die Abmessung in Pixel, das Pixelmaß des Bildes sozusagen.
Die richtige Bildgröße ergibt sich aus der gewünschten Darstellungsgröße.
Dateigröße
Wenn wir von Dateigröße sprechen, geht es um das Gewicht in Kilobyte (KB), Megabyte (MB) oder Gigabyte (GB) eines Bildes.
Die Dateigröße hängt von der Auflösung des Bildes ab (Breite mal Höhe in Pixel mal Pixeldichte = Anzahl der Pixel), von der Komprimierung bzw. dem Bildformat (JPG, PNG, SVG, WebP…) und dem Bildinhalt. (Ein schlichtes, weißes Bild ist kleiner als ein Bild mit vielen Details.)
Als Orientierung:
Niemals sollte ein Bild Gigabytes wiegen.
Versuche unter einem Megabyte zu bleiben oder wenn möglich sogar unter 200 KB.
Aber wie kriegst du deine großen Bilder so klein, ohne dass sie total pixelig werden?
5. Wie verkleinere und komprimiere ich Bilder?
Wichtiger Tipp bevor du deine Bilder bearbeitest:
Speichere dir dein Originalbild irgendwo sicher ab und verkleinere und komprimiere nur Kopien.
Verkleinerte Bilder kann man im Nachhinein nicht mehr so einfach vergrößern!
So bereitest du deine Bilder vor:
1. Schritt: Bild auf das richtige Pixelmaß / die passende Bildgröße bringen
Erstmal bringst du deine Bilder auf das richtige Pixelmaß, also die Bildgröße.
Dafür entscheidest du, was die maximale Größe ist, wie das Bild auf deiner Website dargestellt werden soll.
Zum Verständnis: Ein vollformatiges Hintergrundbild muss natürlich breiter sein als ein kleines Bild in einer zweispaltigen Zeile neben einem Text.
Da Websites immer responsiv gedacht werden sollten, nimm die größtmögliche Darstellung als Richtlinie.
Zur Orientierung:
Hintergrundbild: Breite ca. 2000px
Bilddarstellung über gesamte Inhaltsbreite: Breite ca. 1200px-1500px
Bilddarstellung über die halbe Inhaltsbreite (zweispaltige Layout): Breite ca. 600px
Bild in einem dreispaltigen Layout: Breite ca. 400px
Kleinere Bilddarstellungen: Breite ca. 300px
Galeriebild in Großansicht: Breite ca. 1000 px
Vorgehensweise mit Vorschau:
Menü – Werkzeuge – Größenkorrektur:
Breite oder Höhe in Pixel bestimmen
Bildauflösung: zb. 72 dpi (ist nur für den Druck wichtig, im Web ist es irrelevant)
Beim Speicherprozess über Datei – Export setze die Qualität auf 80% und wähle das Format JPG.
Qualität überprüfen in 100% Ansicht
2. Schritt: Dateigröße komprimieren
Das Gewicht deines Bildes, die Angabe in KB / MB / GB sollte möglichst klein sein.
Dies kannst du erreichen, indem du deine Bilder mit Tools wie TinyPNG, Compressor, Optimizilla, ImageOptim etc. komprimierst. (unbezahlte Werbung)
Vorgehensweise mit einem Internettool wie tinypng.com:
Öffne die Seite https://tinypng.com/ in deinem Browser und lege per Drag and Drop dein Bild ins markierte Fenster. Nun kannst du die gewünschten Einstellungen vornehmen und das Bild downloaden.
Hinweis: TinyPNG gibt es auch als Plugin für WordPress.
Vorgehensweise mit dem Programm ImageOptim:
Wenn du viele oder immer mal wieder Bilder hast, die verkleinert werden sollen, macht es Sinn, sich ein Programm wie ImageOptim zu installieren. https://imageoptim.com/
Der Download ist gratis.
Doch Achtung, wenn du hier ein Bild ins Programm ziehst, wird es direkt verkleinert. Also unbedingt vorher eine Kopie erstellen!
Bilder beim Upload optimieren:
WordPress:
Du kannst auch Voreinstellungen in WordPress vornehmen, sodass die Bilder beim Upload optimiert werden.
Dazu navigiere im WordPress Dashword zu Einstellungen – Medien.
Dort kannst du bestimmen, ob Thumbnails (Vorschaubilder) angelegt werden sollen oder in welcher Größe die Bilder hochgeladen werden sollen.
Mit Plugins:
zb. EWWW Image Optimizer, Imagify, WP Optimizer (unbezahlte Werbung)
Dies sollte aber immer nur zusätzlich gemacht werden und ersetzt nicht die Komprimierung vor dem Upload!
Die Optimierung von Bildern liegt nicht nur an der Verkleinerung und Kompression.
Auch ein passender Titel und ein guter Alt Text gehört zu einer guten Bildoptimierung.
6. Wie kann ich Bilder Seo-optimieren?
Bildgröße
Auch aus Seo-Gründen ist die Verkleinerung und Komprimierung von Bildern wichtig. Denn wenn ein Bild groß ist, dauert die Ladezeit länger und das beeinträchtigt die Benutzer*innenerfahrung.
Titel sinnvoll wählen
Suchmaschinen wie Google sind textbasiert. Vor allem, wenn man hauptsächlich Bilder auf der Website zeigen will und nicht viel Text zum optimieren hat, ist es umso wichtiger, die Bilder zu optimieren.
Dabei kommt es zum Beispiel darauf an, dass die Titel sinnvoll gewählt sind.
Übernimm nicht einfach den Namen, der aus der Kamera kommt, wie zb. IMG_12345.jpg
Stattdessen, wähle einen sinnvollen, erklärenden Titel.
Tipp:
Der Dateiname sollte nur aus Kleinbuchstaben bestehen und keine Sonderzeichen und Umlaute enthalten.
Bitte statt Leerzeichen Bindestriche verwenden.
Alternative Texte / Alt Attribut
Vergib sinnvolle, alternative Texte (Alt-Attribute) für Bilder, deren Inhalt relevant für die Aussage ist. Für Hintergrundbilder und dekorative Bilder ist es dagegen nachteilig, Bilder mit alternativen Texten zu versehen, denn sie werden von Screenreadern vorgelesen, liefern aber keinen Mehrwert.
Der Alternative Text sollte möglichst kurz und auf den Punkt die relevanten Infos des Bildes zusammenfassen.
Überlege dir, wie du das Bild jemandem beschreiben würdest, der es nicht sehen kann.
Wenn möglich verwende die Keywords der jeweiligen Seite.
7. Was muss ich zu den Rechten von Bildern auf meiner Website beachten?
Bei dem Einbinden von Bildern auf deiner Seite ist es wichtig, dass Urheber*innenrechte und Lizenzen beachtet und Credits korrekt und an richtiger Stelle angegeben werden.
Wenn möglich, sollte dies auch in der Bilddatei direkt hinterlegt sein (Photoshop Dateiinformation) und ggf. im Titel.
Handelt es sich um deine eigenen Bilder, kannst du es so handhaben wie du möchtest, aber sobald die Bilder von einer anderen Person sind oder du sie aus dem Internet geladen hast, musst du erfragen und beachten, wie und welche Rechte und Pflichten du hast, das Bild auf deiner Seite zu verwenden.
Das wichtigste zusammengefasst:
Die Optimierung von Bildern ist vor allem wichtig für die Performance, um eine Belastung des Speicherplatzes zu vermeiden, aus Seo-Gründen und für eine barrierefreie Zugänglichkeit.
Verwende möglichst alle Bilder als WebP oder Avif
JPGs sind PNGs vorzuziehen
Verwende PNGs nur, wenn Transparenz benötigt wird
Lade Logos als SVGs hoch
Optimiere die Bilder in der maximal benötigten Größe
So klein wie möglich, so groß wie nötig
Die richtigen Bildmaße ergeben sich aus der gewünschten Darstellungsgröße
Verwende Bilder im Farbraum sRGB
Komprimiere die Bilder vor dem Upload
Verwende sinnvolle Titel, keine Leerzeichen, Umlaute und Sonderzeichen
Vergib kurze und aussagekräftige alternative Texte
Beachte Bildrechte und gib Credits korrekt und an richtiger Stelle an