Bilder machen bei einer Firmenwebsite den größten Teil des übertragenen Datenvolumens aus. Drei Handgriffe halbieren ihn regelmäßig, und keiner davon verändert das Aussehen.
Die Größe
Ein Bild wird in der Größe geladen, in der es hochgeladen wurde, nicht in der es angezeigt wird. Ein Foto mit 4.000 Pixel Breite in einem Bereich von 800 Pixeln überträgt ein Vielfaches der nötigen Daten.
Begrenzen Sie die Breite beim Hochladen. Für eine Firmenwebsite genügen 1.920 Pixel für große Flächen und 1.200 Pixel für Inhaltsbilder.
Das ist der wirksamste Einzelschritt. Bei einer gewachsenen Website mit 200 Bildern verringert allein diese Begrenzung das Datenvolumen häufig um mehr als die Hälfte.
Das Format
Moderne Formate liefern bei gleicher sichtbarer Qualität deutlich kleinere Dateien als die klassischen. Für Fotos ist der Unterschied am größten, für Grafiken mit wenigen Farben geringer.
Liefern Sie eine Rückfallebene mit. Ältere Programme, die das moderne Format nicht verstehen, bekommen die klassische Datei, und der Rest bekommt die kleinere.
Rechnen Sie mit einer Ersparnis von 25 bis 50 Prozent gegenüber der klassischen Datei bei gleicher Auflösung. Zusammen mit der Größenbegrenzung ergibt das die eigentliche Wirkung.
| Punkt | Wert oder Regel |
|---|---|
| Grundproblem | Bilder werden in Uploadgröße geladen |
| Beispiel | 4.000 Pixel in einem Bereich von 800 |
| Empfohlene Breite groß | 1.920 Pixel |
| Empfohlene Breite Inhalt | 1.200 Pixel |
| Wirkung | häufig mehr als die Hälfte des Datenvolumens |
| Modernes Format | kleinere Dateien bei gleicher Qualität |
| Größter Vorteil | bei Fotos |
| Erforderlich | Rückfallebene für ältere Programme |
| Ersparnis durch Format | 25 bis 50 Prozent |
| Größenangaben | reservieren den Platz vor dem Laden |
| Verzögertes Laden | für Bilder unterhalb des sichtbaren Bereichs |
| Beispiel | 3 statt 18 Bilder beim ersten Aufruf |
| Mehrere Größen | wegen 60 bis 70 Prozent mobiler Aufrufe |
| Umwandlung im Bestand | 2 bis 4 Stunden bei 200 Bildern |
| Prüfung danach | 10 Seiten von Hand |
Die Auslieferung
Größenangaben im Bildverweis, damit der Platz reserviert wird, bevor das Bild geladen ist. Ohne sie springt das Layout, und das ist einer der Messwerte für die Seitenqualität.
Verzögertes Laden für Bilder unterhalb des sichtbaren Bereichs. Bei einer Seite mit 18 Bildern werden dann zunächst 3 geladen statt 18.
Und mehrere Größen je Bild, damit ein Telefon nicht die Fassung für den großen Bildschirm lädt. Bei 60 bis 70 Prozent mobilen Aufrufen ist das die Mehrheit der Besucher.
Die Umsetzung im Bestand
Bestandsbilder lassen sich nachträglich umwandeln, ohne die Verweise zu ändern. Legen Sie vorher eine Sicherung an; eine fehlerhafte Massenumwandlung ist sonst endgültig.
Rechnen Sie 2 bis 4 Stunden für eine Website mit 200 Bildern einschließlich Prüfung. Prüfen Sie danach 10 Seiten von Hand, nicht nur die Startseite.
Und messen Sie vorher und nachher dieselbe Seite unter denselben Bedingungen. Zwei Messungen, 10 Minuten, und sie belegen den Nutzen in Zahlen statt in Behauptungen.
Quellen
Häufige Fragen
Welche Breite genügt?
1.920 Pixel für große Flächen und 1.200 Pixel für Inhaltsbilder.
Wie viel spart ein modernes Format?
25 bis 50 Prozent gegenüber der klassischen Datei bei gleicher Auflösung.
Warum Größenangaben im Verweis?
Damit der Platz reserviert wird und das Layout beim Laden nicht springt.
Wie aufwendig ist die Umstellung im Bestand?
Zwei bis vier Stunden bei 200 Bildern, mit vorheriger Sicherung.