Bilder für Webseite optimieren: 4 Tipps zu Format, Auflösung und Komprimierung

Kategorie: Allgemein | Lesezeit: 22 Minuten

Schärfere Bilder
Entlastung für den Webentwickler
Schnelle Ladezeiten durch geringer Dateigröße

Übersicht

1. Dateiformat: Grafiken und Transparentes als PNG. Fotos als JPEG
Ihr Bild hat transparente Bereiche? Dann verwenden Sie PNG 24
Ihr Bild hat keine transparenten Bereiche und keine Farbverläufe? Dann verwenden Sie PNG 8
In allen Anderen Fällen: Verwenden Sie JPG
Im web gängige Komprimierungen und ihre Eigenschaften
2. Auflösung: 1000 Pixel für die kürzere Seite
3. Bildformate/Seitenverhältnis: Passen Sie diese an
3.1 Warum hat mein Bild ein ungewolltes Format oder ist beschnitten?
Beschnitt bei unpassendem Seitenverhältnis
Passendes Seitenverhältnis
Alternative: Bildbearbeitung bei gleichmäßigen Hintergründen
4. Komprimierungsqualität: 80% für Qualität. 60% für Performance. (In Photoshop)
Schnell ladende Datei, bei möglichst wenig Komprimierungsartefakten
Weitere Beiträge zum Thema Webseite optimieren
Diesen Beitrag weiterempfehlen

1. Dateiformat: Grafiken und Transparentes als PNG. Fotos als JPEG

Ihr Bild hat transparente Bereiche? Dann verwenden Sie PNG 24.

PNG8 und JPEG unterstützen keine transparenten Bereiche.

Ihr Bild hat keine transparenten Bereiche und keine Farbverläufe? Dann verwenden Sie PNG 8.

PNG-Komprimierung stellt für diese Bilder den besten Kompromiss aus Bildqualität und Dateigröße dar.

In allen Anderen Fällen: Verwenden Sie JPG.

JPEG-Komprimierung ist für diese Bilder der beste Kompromiss aus Bildqualität und Dateigröße.

Im web gängige Komprimierungen und ihre Eigenschaften:

JPEG (24bit,Verlustbehaftet):
Führt zu geringer Dateigröße, Seite wird schneller geladen, optimal für Bilder mit Farbverläufen und unterstützt keine transparenten Hintergründe.

PNG (24bit,verlustfrei):
Führt zu schärferen Bildern mit besserer Bildqualität, optimal für Bilder mit transparenten Hintergründen und größerer Dateigröße

2. Auflösung: 1000 Pixel für die kürzere Seite.

Das von uns empfohlene Pixelmaß für die Übergabe von Bildern beträgt für die kürzere Seite 1000 Pixel. Die Auflösung reicht meistens für einen nachträglichen Beschnitt. Zudem vermeidet es eine unscharfe Darstellung und lange Ladezeiten. Beispielsweise können zu niedrig aufgelöste Bilder unscharf werden, falls sie vergrößert werden müssen. Gleichermaßen sorgen zu hoch aufgelöste Bilder durch ihre Dateigröße, dass die Webseite langsamer wird. Je nach Serverkonfiguration können zu große Bilder in manchen CMS Systemen nicht hochgeladen werden usw.

Schon gewusst? WordPress generiert aus Ihren Fotos automatisch die benötigen Bildgrößen. Das Ausgangsmaterial soll sich dennoch an den 1000 Pixeln orientieren.

3. Bildformate/Seitenverhältnis: Passen Sie diese an.

Ist das Bild im richtigen Seitenverhältnis, wird es nicht oder nur leicht beschnitten. Bei der Verwendung von Slidern werden Bilder skaliert. Bei unpassendem Seitenverhältnis beschnitten. Besonders bei hochformatigen Bildern führt das zu unerwünschten Darstellungen. Mit dem “Crop-Tool” gängiger Bildbearbeitungssoftware können Bilder an das vorausgesetzte Seitenverhältnis des Sliders angepasst werden.

3.1 Warum hat mein Bild ein ungewolltes Format oder ist beschnitten?

Wenn das Ausgangsbild ein anderes Bildformat als das Ergebnisbild hat, kann das über 2 Methoden angepasst werden: Skalierung und/oder Beschnitt. Bei der Skalierung wird das Bild solange verkleinert, bis es in das Bildformat passt. Es entsteht ein leerer Hintergrund rund um das Bild. Beim Beschnitt werden Teile des Bildes entfernt, so dass es dem gewünschten Bildformat entspricht.

Je stärker sich Ausgangs- und Endformat unterscheiden, desto größer werden Leerraum und Beschnitt

Beschnitt bei unpassendem Seitenverhältnis

Falsches Seitenverhältnis: Bild wird auf Slidervorgabe skaliert und beschnitten

Stimmt das Seitenverhältnis des Originalbildes nicht mit dem des Sliders überein, kommt es zu Informationsverlust durch Beschnitt oder Skalierung.

Finale Darstellung im web (nach Beschnitt)

Passendes Seitenverhältnis

Anpassung an die Höhe des Sliders und leichter Beschnitt in der Breite

Stimmt das Seitenverhältnis Ihres Originalbildes mit dem des Sliders überein, wird der Content nicht bzw. nur geringfügig verändert. Somit kommt es nicht zu Informations- oder Qualitätsverlust durch Beschnitt oder Skalierung.

Alternative: Bildbearbeitung bei gleichmäßigen Hintergründen

Unpassendes Bildformat: Hochformat in Querformat Slider

Die Alternative zu Beschnitt und Skalierung stellt eine Bildbearbeitung dar. Der Bildbearbeiter kann den Hintergrund Ihres Fotos vergrößern. Dadurch entsteht ein neues Seitenverhältnis. Es ist einfacher, wenn der Hintergrund gleichmäßig ist (z.B. bei Studiohintergründen).

Anpassung durch Skalierung und Erweiterung des Hintergrundes

4. Komprimierungsqualität: 80% für Qualität. 60% für Performance. (In Photoshop)

Schnell ladende Datei, bei möglichst wenig Komprimierungsartefakten.

Bei der Komprimierung wird die Bilddatei kleiner und die Ladezeit sinkt. Leider verringert sich die Bildqualität. Es entstehen zum Beispiel Artefakte und die Anzahl an Abstufungen zwischen Farben und Schwarzwerten nimmt ab.

So bestimmen Sie die richtige Komprimierungsqualität:

Für eine hohe Bildqualität wählen Sie eine hohe Komprimierungsqualität.
Für eine hohe Performance wählen Sie eine kleine Komprimierungsqualität.

Beispiel Photoshop:
Wir empfehlen bei großen, hochauflösenden Fotografien eine höhere Komprimierungsqualität (ca. 80%) zu wählen.
Für eine schnelle Webseite mit kurzen Ladezeiten empfehlen wir 60% Komprimierungsqualität. Sie erhalten eine noch immer hohe Bildqualität bei kleinerer Dateigröße.

Autor: Daniele Scarpa