Bilder und Videos optimieren

Bilder und Videos sind auf dem Telefon der größte Posten bei der Ladezeit und gleichzeitig das, was am meisten wirkt. Beides zusammen heißt: sorgfältig auswählen, und dann richtig vorbereiten.

Bilder

Format

PNG ist für Fotos die falsche Wahl. Es speichert verlustfrei, und ein Foto braucht das nicht: dieselbe Aufnahme ist als PNG leicht fünfmal so groß wie als WebP, ohne dass man einen Unterschied sieht.

Größe

Ein Foto direkt aus der Kamera hat 4000 Pixel Breite und mehrere Megabyte. Im Funnel wird es auf höchstens rund 900 Pixel angezeigt.

Richtwerte:

• Bild über die volle Breite: 1600 Pixel breit
• Bild in einer Spalte oder Karte: 900 Pixel
• Logo in der Kopfzeile: 400 Pixel
• Foto einer Person: 600 Pixel

Als Dateigröße sind unter 200 kB je Bild ein guter Wert, unter 500 kB akzeptabel. Darüber merkt man es auf dem Telefon.

Verkleinern kannst du mit dem Vorschau-Programm deines Rechners, mit Squoosh (squoosh.app, läuft im Browser und lädt nichts hoch) oder jedem Bildbearbeitungsprogramm.

Ein Format am Block einstellen

In den Block-Eigenschaften eines Bildes gibt es das Feld Format (4:3, 16:9, 1:1). Setz es, wenn du kannst.

Ohne Angabe kennt der Browser die Höhe des Bildes erst, wenn es geladen ist. Bis dahin steht dort nichts, und sobald es ankommt, springt der Text darunter nach unten weg. Mitten im Lesen, und bei mehreren Bildern mehrfach.

Mit gesetztem Format ist der Platz von Anfang an reserviert.

Welcher Ausschnitt bleibt stehen

Sobald ein Format gesetzt ist, wird zugeschnitten. Womit, entscheidest du mit Senkrecht (Oben, Mittig, Unten) direkt darunter.

Bei einem Porträt willst du fast immer Oben: mittig schneidet den Kopf ab. Bei einer Landschaft ist mittig meist richtig. Waagerecht wird immer aus der Mitte geschnitten.

Dieselbe Einstellung wirkt noch an einer zweiten Stelle: hat der Block mehr Höhe als das Bild, etwa in einer Spalte neben längerem Text, entscheidet sie, ob das Bild oben hängt, in der Mitte steht oder unten bündig abschließt.

Videos

Format und Größe

MP4 mit H.264. Das läuft überall, auch auf älteren Telefonen. WebM ist kleiner, wird aber nicht von jedem Gerät abgespielt.

Als Auflösung reichen 1080p fast immer, für ein Gesicht vor einer neutralen Wand auch 720p. 4K bringt auf einem Telefon sichtbar nichts und kostet ein Vielfaches an Ladezeit.

Die Obergrenze beim Hochladen hängt an deinem Tarif: 50 MB im Starter, 150 MB im Pro, 300 MB in der Agentur. Für ein Verkaufsvideo von drei Minuten ist das knapp, wenn du unbearbeitet exportierst, und reichlich, wenn du auf 1080p und eine mittlere Bitrate gehst: bei 5 Mbit/s sind drei Minuten rund 110 MB.

Welche Einstellungen du beim Export nimmst, steht Schritt für Schritt unter Video fürs Web vorbereiten.

Der wichtigste Handgriff: faststart

Ein MP4 speichert seinen Index normalerweise am Dateiende. Der Browser muss dann die ganze Datei geladen haben, bevor das erste Bild erscheint.

Mit der Option faststart wandert der Index an den Anfang, und das Video startet sofort. Es ist derselbe Inhalt, nur anders sortiert.

In den meisten Programmen heißt die Einstellung „Für Web optimieren" oder „Fast Start". Mit ffmpeg auf der Kommandozeile:

ffmpeg -i eingang.mp4 -c copy -movflags +faststart ausgang.mp4

-c copy heißt: nichts wird neu berechnet, es wird nur umsortiert. Das dauert Sekunden und kostet keine Qualität.

Vorschaubild

Setz eines. Ohne Poster ist die Fläche vor dem Klick schwarz oder leer, und niemand weiß, was ihn erwartet.

Beim Hochladen erzeugt der Funnel automatisch eines aus dem Video. Du kannst es austauschen; ein Bild, auf dem ein Gesicht in die Kamera schaut, wirkt besser als ein zufällig getroffener Zwischenzustand.

Bei YouTube und Vimeo lohnt es sich besonders: dort lädt vor dem Klick gar nichts, und ohne Poster steht dem Besucher eine graue Fläche im Weg.

Hochformat oder Querformat

Querformat (16:9) für alles, was wie ein Interview aussieht. So werden Kundenstimmen aufgenommen: die Kamera steht quer, die Person sitzt.

Hochformat (9:16) nur für Aufnahmen, die wirklich hochkant entstanden sind, also Selbstaufnahmen mit dem Telefon. Ein Querformat-Video im Hochkant-Rahmen wird beschnitten, nicht verkleinert, und dann fehlt der halbe Kopf.

Beim Testimonial- und beim Case-Study-Block stellst du das ein.

Wenn es trotzdem langsam ist

Prüf in dieser Reihenfolge:

1. Wie viele Bilder liegen über der Falz? Alles, was der Besucher ohne Scrollen sieht, wird sofort geladen. Ein einzelnes großes Bild oben ist besser als drei kleine.
2. Ist ein Video auf Autoplay? Dann lädt es beim Seitenaufbau mit. Für ein Verkaufsvideo ist das gewollt, für ein Testimonial weiter unten nicht.
3. Wie groß ist die größte Datei? Meist ist es eine einzelne, und die zu verkleinern bringt mehr als zehn kleine Optimierungen.