Fotos und Videos im Web: scharf, aber leicht

Gute Fotos und Videos leisten für eine Website mehr als fast alles andere: Sie zeigen Produkt, Menschen und Stimmung in einer Sekunde. Sie sind aber meist auch der schwerste Teil einer Seite. Ein einzelnes Foto direkt aus der Kamera kann mehr wiegen als der ganze Rest der Website.

Das Ziel ist, die Qualität zu halten, die Menschen sehen, und nur zu schicken, was ihr Bildschirm braucht.

1. Formate: modern und kompakt

Bildformate haben sich weiterentwickelt:

AVIF und WebP komprimieren Fotos deutlich besser als JPEG bei ähnlicher Bildqualität, und alle aktuellen Browser unterstützen sie.
JPEG bleibt als Rückfall für den seltenen alten Browser.
PNG passt zu Grafiken mit scharfen Kanten oder Transparenz, weniger zu Fotos.
SVG ist ideal für Logos, Icons und Illustrationen: Vektorgrafiken, die in jeder Größe scharf bleiben und oft winzig sind.

Eine moderne Website liefert Fotos als AVIF oder WebP aus und lässt den Browser das beste Format wählen, das er versteht.

2. Größen: das richtige Bild für jeden Bildschirm

Ein Handy braucht kein Bild in der Größe für einen 4K-Monitor. Responsive Bilder bieten mehrere Größen desselben Motivs, und der Browser nimmt die, die zu Bildschirm und Pixeldichte passt. Auf dem Handy kann das einen Bruchteil der Daten bedeuten, bei einem Bild, das genauso scharf aussieht.

Manchmal hilft auch ein anderer Ausschnitt: ein breites Landschaftsbild auf dem Desktop, ein engerer Ausschnitt mit Fokus aufs Motiv auf dem Handy. Das heißt Art Direction und gehört zur selben Technik.

3. Laden: das Wichtigste zuerst

Bilder weiter unten laden erst bei Bedarf (Lazy Loading), kurz bevor sie ins Bild scrollen.
Das Hauptbild oben lädt mit Vorrang, weil Besucher es meist zuerst sehen und es entscheidet, wie schnell sich die Seite anfühlt.
Breite und Höhe sind immer angegeben, damit der Browser den Platz reserviert und nichts springt, wenn das Bild ankommt.

4. Video: Einstellungen, die zählen

Video bringt Bewegung und Emotion und braucht etwas mehr Sorgfalt:

Ein Vorschaubild erscheint sofort, bevor das Video lädt.
Hintergrundvideos laufen stumm, in Schleife, ganz ohne Tonspur und bleiben kurz. Sie können ein animiertes GIF ersetzen, bei einem Bruchteil der Größe.
Vorladen bleibt aus bei Videos, die erst auf Wunsch abspielen.
Formate: MP4 mit H.264 läuft überall; neuere Codecs wie AV1 sparen Daten, wo sie unterstützt werden.
Weniger Bewegung: Wer reduzierte Bewegung eingestellt hat, bekommt das Vorschaubild statt eines automatisch startenden Videos.
Untertitel machen gesprochene Inhalte barrierefrei und helfen auch allen, die ohne Ton schauen.

Bei längeren Videos übernimmt eine Videoplattform oder ein eigener Videodienst das Streaming in der passenden Qualität für jede Verbindung.

5. Aufnahme: Qualität beginnt an der Kamera

Optimierung wirkt am besten mit gutem Material. Fotos, die mit Blick auf das Web-Layout entstehen (genug Raum ums Motiv für verschiedene Ausschnitte, einheitliches Licht und ein einheitlicher Stil über eine Serie), lassen die Website ruhig und professionell wirken. Ein einheitlicher Look über alle Bilder ist Teil der Marke.

6. Alternativtext: Bilder für alle

Jedes Bild mit Information bekommt eine kurze Beschreibung im Alternativtext, damit Menschen mit Screenreader dieselbe Information bekommen und Suchmaschinen das Bild verstehen. Reine Schmuckbilder bekommen einen leeren Alternativtext, damit sie übersprungen werden.

Die Kurzfassung

Formate: AVIF und WebP für Fotos, SVG für Logos und Icons.
Responsive Größen und Ausschnitte, vom Browser je Bildschirm gewählt.
Laden: Lazy Below the Fold, Vorrang fürs Hauptbild, Maße immer angegeben.
Video: Vorschaubild, stumme kurze Schleifen, kein Vorladen, Untertitel, ein Standbild bei reduzierter Bewegung.
Gutes Material und ein einheitlicher Stil beginnen an der Kamera.
Alternativtext für jedes Bild mit Information.

Wenn die Bilder und Videos deiner Website großartig aussehen und schnell laden sollen, melde dich.