Fotos auf der Firmenwebsite: WebP, AVIF, Dateigröße und Alt-Texte

Ein Foto direkt vom Handy hat oft mehrere Megabyte. Unverändert auf die Website hochgeladen, kann es dazu führen, dass der Browser dieses eine Bild länger lädt als den Rest der Seite. Wer am Handy schlechten Empfang hat, wartet nicht und verlässt die Seite.

In diesem Ratgeber zeige ich, wie Sie Fotos für die Firmenwebsite vorbereiten: in welchem Format, in welcher Größe, mit welchem Alt-Text und Dateinamen. Alles lässt sich kostenlos erledigen, in wenigen Minuten pro Foto.

Warum gerade Fotos eine Website am häufigsten verlangsamen

Auf den meisten Websites kleiner Firmen sind gerade die Bilder das schwerste Element. Text und Code wiegen jeweils einige Dutzend Kilobyte, ein einziges Referenzfoto dagegen kann mehrere Megabyte wiegen. Deshalb beginne ich mit den Fotos, wenn mich jemand bittet, eine Website schneller zu machen.

Ein Beispiel aus meiner Arbeit habe ich in der Fallstudie zur schnellen Website auf dem Handy beschrieben: Eines der Ergebnisse war eine Seitengröße, die von 3 MB auf 0,5 MB sank. Ein großer Teil dieses Unterschieds geht gerade auf die verbesserten Bilder zurück.

Schritt 1: Wählen Sie das Format (JPEG, WebP oder AVIF)

Die drei Formate, denen Sie am häufigsten begegnen:

Mein Rat für eine gewöhnliche Website: Speichern Sie Fotos als WebP. Wenn ein Dienstleister die Website baut, kann AVIF als erste Version und WebP als Ausweichversion hinzugefügt werden. Beide Formate unterstützt heute die Mehrheit der aktuellen Browser, es lohnt sich aber, das nach dem Livegang auf der eigenen Website zu prüfen.

Logo und einfache Icons speichern Sie am besten als SVG (Vektorgrafik) oder als PNG, wenn Sie einen transparenten Hintergrund brauchen. Für Fotos eignet sich PNG nicht, weil die Dateien sehr groß werden.

Schritt 2: Verkleinern Sie die Abmessungen in Pixeln

Das ist der häufigste Fehler: Das Foto ist 4000 Pixel breit, wird auf der Seite aber in einer 600 Pixel breiten Spalte angezeigt. Der Browser lädt die ganze Datei herunter und verkleinert sie erst dann.

Die Regel ist einfach: Die Datei muss nicht breiter sein als der Platz, an dem Sie sie zeigen, mit etwas Reserve für Bildschirme mit hoher Pixeldichte. Praxiswerte, die ich verwende:

• Foto über die ganze Seitenbreite (z. B. ganz oben): ca. 1600–2000 px Breite,
• Foto in einer Galerie oder in einer Textspalte: ca. 800–1200 px,
• Vorschaubild in einer Liste: ca. 400–600 px.

Das sind meine Arbeitswerte, keine Google-Norm. Passen Sie sie an Ihr Design an: Wenn Ihre Website ein Foto in einer 500-px-Spalte zeigt, laden Sie keine 2000 px hoch.

Schritt 3: Legen Sie eine Zielgröße für die Datei fest

Google legt keine verbindliche Kilobyte-Zahl für ein Foto fest. Sie brauchen also ein eigenes Ziel. Ich gehe von diesem aus:

• Foto über die ganze Breite: bis ca. 150–250 KB,
• Foto in der Galerie: bis ca. 100–150 KB,
• Vorschaubild: bis ca. 50–100 KB.

Das sind praktische Ziele, keine Vorgabe. Ein Foto mit vielen Details (z. B. Stein, Stoff) darf etwas mehr wiegen, ein schlichter, einfarbiger Hintergrund weniger. Entscheidend ist, dass die ganze Seite auf dem Handy schnell lädt, und davon überzeugt Sie ein Test (ich beschreibe ihn weiter unten).

Schritt 4: Konvertieren Sie die Fotos in Squoosh

Squoosh ist ein kostenloses Tool im Browser, das kein Konto erfordert. So funktioniert es:

1. Öffnen Sie die Squoosh-Website und ziehen Sie das Foto hinein.
2. Wählen Sie rechts das Format (WebP oder AVIF).
3. Geben Sie in den Optionen zur Größenänderung die Zielbreite in Pixeln ein.
4. Verschieben Sie den Qualitätsregler, zum Beispiel auf etwa 75–80, und vergleichen Sie die Vorschau links und rechts.
5. Wenn das Ergebnis gut aussieht und die Datei eine vernünftige Größe hat, laden Sie sie herunter.

Die Namen der Optionen können sich mit der Zeit ändern, das Prinzip bleibt aber gleich. Wählen Sie die Qualität nach Augenmaß: Beginnen Sie niedriger und erhöhen Sie sie, bis keine Verschlechterung mehr zu sehen ist.

Wenn Sie viele Fotos haben, bitten Sie Ihren Dienstleister um eine automatische Konvertierung. So läuft es bei den Websites, die ich erstelle: Die Fotos werden beim Aufbau der Website vorbereitet und nicht von Hand, eines nach dem anderen.

Schritt 5: Verkleinern Sie Fotos schon auf dem Handy

Warten Sie nicht, bis das Foto auf der Website landet. Beim Senden vom Handy haben Sie zwei einfache Wege:

• Verkleinern Sie das Foto beim Senden. In vielen Apps (E-Mail, Messenger) erscheint beim Anhängen eines Fotos eine Größenauswahl. Wählen Sie „mittel“ statt des Originals.
• Stellen Sie eine niedrigere Kameraauflösung ein für Fotos, die nicht für den Druck gedacht sind, sofern Ihr Handy das erlaubt.

Denken Sie auch daran, dass das iPhone standardmäßig im Format HEIC speichert, das Browser meist nicht anzeigen. Wählen Sie beim Senden an Ihren Dienstleister die Option, die die Fotos in JPEG umwandelt.

Schritt 6: Fügen Sie width und height sowie Lazy Loading hinzu

Das betrifft schon den Code. Wenn sich ein Dienstleister um Ihre Website kümmert, schicken Sie ihm diesen Abschnitt. Zwei Attribute machen einen großen Unterschied.

Die Attribute width und height teilen dem Browser mit, wie viel Platz er für das Foto reservieren soll, bevor es geladen ist. Ohne sie „springt“ die Seite, wenn die Bilder erscheinen, und man trifft Schaltflächen nur schwer.

Lazy Loading (loading="lazy") weist den Browser an, Fotos erst dann zu laden, wenn man sich ihnen beim Scrollen nähert. Das spart auf einer langen Seite Datenvolumen.

<img
  src="taras-drewno-gizycko.webp"
  alt="Taras z desek kompozytowych przy domu jednorodzinnym w Giżycku"
  width="1200"
  height="800"
  loading="lazy"
/>

Es gibt eine wichtige Ausnahme: Das Hauptfoto, das direkt nach dem Aufrufen der Seite sichtbar ist, sollte kein Lazy Loading haben. Es soll so schnell wie möglich laden, lassen Sie es daher ohne loading="lazy". Ihr Dienstleister kann es zusätzlich als vorrangig kennzeichnen (fetchpriority="high").

Wenn Sie zwei Formate anbieten möchten, sieht der Code so aus:

<picture>
  <source srcset="taras.avif" type="image/avif">
  <source srcset="taras.webp" type="image/webp">
  <img src="taras.jpg" alt="Taras z desek kompozytowych" width="1200" height="800" loading="lazy">
</picture>

Der Browser wählt das erste Format, das er lesen kann.

Schritt 7: Schreiben Sie den Alt-Text

Der Alt-Text erfüllt zwei Aufgaben. Ein Screenreader liest ihn blinden oder sehbehinderten Menschen vor. Eine Suchmaschine nutzt ihn, um zu verstehen, was das Foto zeigt. Schreiben Sie ihn deshalb vor allem für Menschen.

Die Regeln, an die ich mich halte:

• beschreiben Sie, was zu sehen ist, kurz und konkret (meist in einem Satz),
• ergänzen Sie Kontext, der wichtig ist: welches Projekt, wo, aus welchem Material,
• beginnen Sie nicht mit „Foto“ oder „Bild“, denn der Screenreader sagt selbst, dass es eine Grafik ist,
• stopfen Sie keine Suchbegriffe hinein wie „Terrasse Giżycko günstig beste Terrasse“,
• dekorative Bilder lassen Sie mit leerem alt="".

Zwei Beispiele:

In Audits zur Barrierefreiheit gehören fehlende Alt-Texte zu den häufigsten Fehlern, es lohnt sich also, sie beim Aufräumen gleich mit zu verbessern. Mehr zur Barrierefreiheit schreibe ich im Ratgeber zur Barrierefreiheit von Websites seit dem 28. Juni 2025.

Schritt 8: Geben Sie Dateien verständliche Namen

Der Dateiname ist eine Kleinigkeit, hilft aber auch der Suchmaschine und bringt Ordnung in Ihre Materialien. Statt IMG_4521.jpg oder foto-final-neu2.webp verwenden Sie einen beschreibenden Namen:

• Kleinbuchstaben, ohne Umlaute und polnische Sonderzeichen,
• Wörter durch Bindestriche getrennt,
• kurz, 3–5 Wörter, z. B. terrasse-wpc-gelaender-masuren.webp.

Der Name ersetzt den Alt-Text nicht, er ergänzt ihn. Ändern Sie ihn vor dem Hochladen auf die Website, denn später entsteht leicht ein Durcheinander.

Was Sie lassen sollten

• Laden Sie keine Originale vom Handy hoch und verlassen Sie sich nicht darauf, dass die Website sie selbst verkleinert. Manche Systeme tun das, aber nicht alle.
• Komprimieren Sie nicht zu stark. Ein unscharfes Referenzfoto schreckt mehr ab als 50 KB mehr.
• Setzen Sie keinen Text ins Foto (Preisliste, Telefonnummer als Bild). Der Screenreader liest ihn nicht vor, und Google versteht ihn schwerer.
• Verwenden Sie nicht ein Foto in drei Größen, das nur über CSS-Stile verkleinert wird. Bereiten Sie separate Dateien vor.
• Lassen Sie Alt-Texte nicht leer bei Fotos, die Inhalt transportieren.

So prüfen Sie das Ergebnis

Starten Sie nach den Änderungen den kostenlosen Website-Test. In etwa 30 Sekunden prüft er die Website in mehreren Bereichen: Geschwindigkeit (Google-PageSpeed-Messung auf dem Handy), SEO, Sicherheit und Barrierefreiheit. Sie sehen, ob Bilder weiterhin als Problem angezeigt werden, und bei fehlenden Alt-Texten erhalten Sie einen Hinweis, was zu verbessern ist.

Vergleichen Sie das Ergebnis vorher und nachher. Wenn die Geschwindigkeitsbewertung deutlich gestiegen ist und die Seite beim Laden nicht springt, sind die Fotos gut vorbereitet.

Zusammenfassung

Fotos vorzubereiten bedeutet vier Dinge: das Format WebP (oder AVIF), an den Platz angepasste Abmessungen, eine vernünftige Dateigröße und einen sinnvollen Alt-Text mit einem verständlichen Dateinamen. Der Rest, also width, height und Lazy Loading, ist eine Frage weniger Zeilen Code.

Wenn Ihre Website wegen schwerer Bilder langsam lädt, schreiben Sie mir. Im Rahmen einer Website-Modernisierung überarbeite ich Grafiken, Code und Alt-Texte, und die technische Betreuung hilft, das nach dem Start im Blick zu behalten. Ich antworte innerhalb von 24 Stunden.