Bilder sind bei den meisten Websites für den größten Teil der Ladezeit verantwortlich, und fast immer, weil sie so hochgeladen wurden, wie sie aus der Kamera kamen. Ein einzelnes Foto mit vier Megabyte macht jede Optimierung an anderer Stelle zunichte.
Die Vorbereitung dauert pro Bild etwa eine Minute, wenn man weiß, worauf es ankommt.
Das Wichtigste in Kürze
Auf die tatsächlich benötigte Breite verkleinern, meist 1600 oder 800 Pixel.
In WebP speichern, das spart gegenüber JPEG deutlich.
Zielgewicht: unter 300 Kilobyte für große Motive, unter 100 für kleine.
Alt-Texte beschreiben, was zu sehen ist, nicht Suchbegriffe aneinanderreihen.
Dateinamen sprechend vergeben, bevor hochgeladen wird.
Welche Größe wirklich gebraucht wird
Ein Bild, das auf der Seite 800 Pixel breit angezeigt wird, braucht keine 6000 Pixel. Als Faustwerte haben sich bewährt:
Moderne Systeme liefern automatisch passende Größen aus, wenn das Bild als Bildelement eingebunden ist. Wer es als CSS-Hintergrund einbindet, umgeht diesen Mechanismus.
Einsatz | Breite | Zielgewicht |
Ganzflächiges Hintergrundbild | 1600 bis 2000 px | unter 300 KB |
Bild im Textbereich | 800 bis 1200 px | unter 200 KB |
Vorschaubild in einer Liste | 400 bis 600 px | unter 80 KB |
Logo | als SVG, sonst 400 px | unter 30 KB |
Das richtige Format
WebP ist heute der Standard und wird von allen aktuellen Browsern unterstützt. Gegenüber JPEG spart es bei gleicher Qualität regelmäßig ein Drittel bis die Hälfte.
Für Grafiken mit klaren Kanten, also Logos und Symbole, ist SVG die bessere Wahl: beliebig skalierbar und meist nur wenige Kilobyte.
Praxistipp: Speichern Sie JPEG-Fotos mit einer Qualitätsstufe um 80 Prozent. Der Unterschied zu 100 Prozent ist am Bildschirm nicht sichtbar, die Datei aber deutlich kleiner.
Alt-Texte richtig schreiben
Der Alt-Text beschreibt, was auf dem Bild zu sehen ist. Er dient Menschen, die einen Screenreader nutzen, und er hilft Suchmaschinen beim Einordnen.
Was funktioniert und was nicht:
Rein dekorative Bilder ohne Informationswert bekommen ein leeres Alt-Attribut. Das ist kein Versäumnis, sondern korrekt.
Schlecht | Gut |
bild1.jpg | Fertig saniertes Badezimmer mit bodengleicher Dusche |
Badsanierung Monheim Bad Sanitär | Monteur setzt eine Duschwanne in einem Neubau |
Team von Rheinmarketing vor dem Büro an der Rheinpromenade |
Dateinamen vor dem Hochladen
Ein Dateiname wie IMG_20260822_113455.jpg sagt niemandem etwas. Benennen Sie Bilder vor dem Hochladen: badsanierung-monheim-nachher.webp.
Das ist ein kleiner Faktor, kostet aber nichts und hilft bei der eigenen Ordnung ebenso wie bei der Bildersuche.
Was Sie zusätzlich beachten sollten
Drei Punkte, die häufig übersehen werden:
Feste Maße angeben, damit das Layout beim Laden nicht springt. Das ist einer der drei Werte, die Google zur Nutzererfahrung misst.
Verzögertes Laden für Bilder weiter unten auf der Seite, damit sie nicht sofort mitgeladen werden.
Bildrechte klären. Auch bei kostenlosen Bilddatenbanken gibt es Bedingungen, und bei Personen braucht es eine Einwilligung.
Eigene Bilder schlagen gekaufte
Unabhängig von der Technik: Ein durchschnittliches eigenes Foto wirkt fast immer besser als ein perfektes gekauftes. Besucher erkennen Bilddatenbanken, und sie erkennen, wenn ein Betrieb sich nicht zeigt.
Ein aktuelles Telefon reicht dafür. Wichtiger als die Kamera ist Tageslicht und ein aufgeräumter Hintergrund.
Wichtige Erkenntnisse
Punkt | Was zu tun ist |
Größe | Auf die Anzeigebreite verkleinern, nicht mehr |
Format | WebP für Fotos, SVG für Logos und Symbole |
Gewicht | Unter 300 Kilobyte für große Bilder |
Alt-Text | Beschreiben, was zu sehen ist |
Herkunft | Eigene Fotos schlagen Bilddatenbanken |
Was das in der Praxis heißt
Legen Sie sich einen festen Ablauf zurecht: verkleinern, in WebP speichern, benennen, hochladen, Alt-Text schreiben. Das dauert pro Bild eine Minute und verhindert, dass sich die Seite über die Jahre zusetzt.
Wenn Sie eine Bestandsseite haben, lohnt eine einmalige Durchsicht der zehn größten Bilder. Meist erklärt das den größten Teil der Ladezeit.
Wie wir das machen
Bei uns werden Bilder vor dem Einbau vorbereitet, und in der laufenden Betreuung prüfen wir, was sich angesammelt hat.
Mehr zum Thema Geschwindigkeit steht in Ladezeit verbessern.
Nützliche Quellen
Häufige Fragen
Welches Werkzeug soll ich nehmen?
Für einzelne Bilder reicht jedes Bildprogramm. Für viele Bilder auf einmal gibt es kostenlose Stapelverarbeitung.
Sind kostenlose Bilddatenbanken sicher?
Meist ja, aber die Lizenzbedingungen unterscheiden sich. Prüfen Sie besonders die Nutzung mit erkennbaren Personen.
Wie viele Bilder braucht eine Seite?
So viele, wie etwas zeigen. Bilder ohne Aussage kosten Ladezeit ohne Gegenwert.
Was ist mit Bildern in der Google-Bildersuche?
Dateiname, Alt-Text und der umgebende Text entscheiden. Für lokale Betriebe ist das ein kleiner, aber kostenloser Zusatzkanal.
Passend dazu
Passend dazu: Ladezeit verbessern und Mobile First.
