Bilder optimal für deine Website vorbereiten

Übersicht:

1. Warum ist es wichtig, Bilder zu optimieren? 
2. Welche Formate gibt es und welches Dateiformat soll ich verwenden? 
3. In welchem Farbraum müssen Bilder fürs Web abgespeichert werden? 
4. Was ist die perfekte Bild- und Dateigröße? 
5. Wie verkleinere und komprimiere ich Bilder? 
6. Wie kann ich Bilder Seo-optimieren? 
7. Was muss ich zu den Rechten von Bildern auf meiner Website beachten? 
8. Zusammenfassung 

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 in erster Linie für Bilder JPGs
• Wenn ein transparenter Hintergrund benötigt wird, verwende das Bild als PNG
• Logos und Icons solltest du als SVGs nutzen
• Für kleine Animationen kannst du GIFs oder Lottiefiles verwenden

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.

Eine Alternative kann das relativ neue Format WebP („Weppy“ ausgesprochen) bieten, denn es wird mittlerweile von vielen gängigen Browsern unterstützt, kann Transparenzen darstellen und ist kleiner als das PNG-Format. Ich habe jedoch die Erfahrung gemacht, dass Bilder auf manchen mobilen Devices nicht angezeigt werden können und nutze das Format aus diesem Grund nur zusätzlich zu einem PNG.

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 – Alternative 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 RGB 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:

1500 px Breite reicht in den meisten Fällen für Hintergrundbilder
Für ein Bild in einer Spalte in voller Breite: 1280 px
zweispaltiges Layout: ca. 600 px breit
dreispaltiges Layout: ca. 400 px breit
Galeriebild in Großansicht: Breite ca. 1000 px

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.

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 JPGs
Verwende PNGs nur, wenn Transparenz benötigt wird
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 RGB
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