Bilder auf der Website optimieren: Der größte Hebel für Ladezeit

Optimieren Sie jedes Bild in dieser Reihenfolge: erst die sichtbaren Pixel, dann das passende Format, danach die Kompression und zuletzt das Ladeverhalten. Ein kleineres Bild mit vernünftiger Qualität ist fast immer sinnvoller als ein riesiges Original, das der Browser nur per CSS verkleinert. Als erste Orientierung können normale Inhaltsbilder unter etwa 300 KB liegen. Ein großes Hero-Motiv darf je nach Ausschnitt etwas mehr benötigen, sollte aber ebenfalls auf dem Smartphone geprüft werden.

1. Dimension: Exportieren Sie nur so breit, wie das Layout das Motiv wirklich zeigt.
2. Format: Nutzen Sie WebP oder AVIF für Fotos, JPEG als Fallback und PNG nur bei Transparenz oder scharfen Grafiken.
3. Kompression: Starten Sie bei Fotos mit etwa 70 bis 85 Prozent Qualität und vergleichen Sie sichtbar.
4. Laden: Das Hero-Bild priorisieren, Bilder unterhalb des ersten Bildschirms verzögert laden und Breite sowie Höhe festlegen.

Wenn Sie zuerst die Ursache Ihrer langsamen Seite einordnen möchten, lesen Sie den Beitrag warum eine langsame Website Kunden kosten kann. Bilder sind häufig ein großer Hebel, aber nicht die einzige mögliche Ursache.

Die wichtigste Bildgröße ist nicht die Dateigröße, sondern die tatsächlich benötigte Pixelbreite. Ein Foto, das auf dem Desktop maximal 1.200 Pixel breit erscheint, muss nicht mit 4.000 Pixeln Originalbreite ausgeliefert werden. Legen Sie pro Motiv mindestens drei Zielbreiten fest, zum Beispiel 480 Pixel für kleine Smartphones, 768 Pixel für Tablets und 1.200 Pixel für große Inhaltsflächen. Die genaue Auswahl hängt vom Layout und vom verwendeten Bildsystem ab.

Das Browserfenster kann sich ändern. Deshalb sollte die Website responsive Varianten ausliefern, statt immer dieselbe Datei zu senden. web.dev erklärt responsive Bilder mit Quellen wie srcset und sizes. Damit kann der Browser die passende Version auswählen. Eine automatische CSS-Verkleinerung spart keine Übertragung, wenn die große Datei bereits vollständig heruntergeladen wurde.

Prüfen Sie jedes Motiv außerdem auf den richtigen Ausschnitt. Ein Gruppenfoto braucht vielleicht die volle Breite, ein Detailbild kann deutlich kleiner sein. Exportieren Sie nicht pauschal alle Dateien mit derselben Maximalgröße. Drei bewusst gewählte Zielbreiten sind ein besserer Arbeitsstandard als ein Ordner voller Originale.

Das Dateiformat bestimmt, wie effizient ein Motiv gespeichert werden kann. Für typische Fotos lokaler Unternehmen ist WebP in vielen Projekten ein guter Standard. AVIF kann noch kleinere Dateien ermöglichen, muss aber in den vorhandenen Workflow und das Fallback-Konzept passen. JPEG bleibt als robuste Option sinnvoll. PNG ist vor allem dann angebracht, wenn Transparenz oder sehr scharfe, grafische Kanten benötigt werden.

Ein modernes Format löst aber nicht jedes Problem. Ein 4.000 Pixel breites Foto bleibt auch als WebP unnötig groß, wenn es nur in einer 600 Pixel breiten Karte erscheint. Entscheiden Sie deshalb immer in der Reihenfolge Dimension, Format und Qualität. So können Sie die mobile Optimierung Ihrer Website auf eine nachvollziehbare Grundlage stellen.

Kompression ist ein sichtbarer Zielkonflikt: Zu wenig Kompression erzeugt unnötig große Dateien, zu viel Kompression macht Kanten, Texturen und Gesichter sichtbar weich. Starten Sie bei normalen Fotos mit einer Qualitätsstufe zwischen 70 und 85 Prozent. Vergleichen Sie danach Original und Webversion bei 100 Prozent Ansicht sowie im echten Seitenlayout. Ein Bild muss nicht im Bildbearbeitungsprogramm perfekt aussehen, wenn es auf dem Smartphone als kleine Karte erscheint. Es darf aber keine störenden Artefakte zeigen.

Für ein lokales Unternehmen lohnt eine kleine Prüfserie mit drei Motiven: ein Gesicht oder Teamfoto, eine feine Oberfläche wie Holz oder Stoff und ein Motiv mit Text oder Architektur. Wenn alle drei bei 70 Prozent sauber aussehen, können Sie die Dateigröße prüfen. Bei Hauttönen, Produktdetails oder starkem Kontrast kann 80 oder 85 Prozent die bessere Entscheidung sein.

Ein sinnvoller Vergleich dokumentiert Dateigröße, Pixelbreite, Format und Qualitätsstufe. So bleibt nachvollziehbar, warum ein Bild geändert wurde. Das ist besonders hilfreich, wenn später neue Fotos aus einem Smartphone oder von einem Fotografen hinzukommen.

Nicht jedes Bild muss beim ersten Seitenaufruf geladen werden. Das Hero-Bild und ein eventuell sichtbares Hauptmotiv sollten priorisiert werden. Bilder unterhalb des ersten Bildschirms können in der Regel verzögert nachgeladen werden. Für diese Bilder ist loading='lazy' üblich. Das wichtigste Motiv darf dagegen nicht versehentlich lazy geladen werden, sonst wartet der sichtbare Inhalt unnötig.

Legen Sie bei jedem Bild Breite und Höhe fest. Der Browser reserviert dann Platz, bevor die Datei eintrifft. Das reduziert unerwartete Verschiebungen im Layout. web.dev beschreibt das Verhältnis von Lazy Loading und Largest Contentful Paint. Der Grundsatz ist einfach: Sichtbares zuerst, weiter unten liegende Bilder später, aber ohne den Seitenaufbau durch fehlende Abmessungen springen zu lassen.

Testen Sie mindestens drei Situationen: den ersten Seitenaufruf auf dem Smartphone, das Scrollen bis zum ersten Detailbild und die Rückkehr zur Seite über den Browser-Zurück-Button. Wenn Bilder erst sehr spät auftauchen oder beim Scrollen ruckeln, ist das Ladeverhalten zu aggressiv oder technisch nicht sauber eingebunden.

Ein optimiertes Bild braucht auch eine verständliche Beschreibung. Der Dateiname hilft bei der Verwaltung, der Alt-Text unterstützt Menschen, die das Bild nicht sehen können. Benennen Sie eine Datei zum Beispiel team-elektrobetrieb-leipzig.webp statt IMG_4832.webp. Der Alt-Text beschreibt anschließend knapp, was auf dem Bild zu sehen und für die Seite relevant ist. Er muss nicht das Hauptkeyword wiederholen.

Beschreiben Sie bei einem Teamfoto die Personen oder die Situation, sofern diese Information für den Inhalt wichtig ist. Bei einem rein dekorativen Hintergrund ist ein leerer Alt-Text sinnvoller als ein erfundener Satz. Text, der bereits direkt neben dem Bild steht, muss nicht noch einmal wortgleich in der Bildbeschreibung auftauchen. Die Regeln für zugängliche Inhalte und suchmaschinenfreundliche Bildsignale gehören zusammen, ersetzen aber keine gute Seitenstruktur.

Prüfen Sie zwei Fragen pro Bild: Würde eine Person ohne Sicht das Wesentliche aus dem Alt-Text verstehen? Und würde der Dateiname Ihnen sechs Monate später noch sagen, welches Motiv gemeint ist? Ergänzen Sie bei Bedarf eine Bildunterschrift, wenn Herkunft, Kontext oder eine praktische Erklärung wichtig sind.

Öffnen Sie die wichtigsten Seiten in Chrome DevTools oder mit PageSpeed Insights und führen Sie einen mobilen Test durch. Die Lighthouse-Dokumentation von Chrome zeigt, wie Sie einen Lauf starten und die Diagnosen lesen. Testen Sie mindestens Startseite, Leistungsseite und einen Ratgeberartikel. Ein einzelner Score ist nur ein Hinweis, weil Gerät, Netzwerk und Auslastung das Ergebnis beeinflussen.

Notieren Sie pro Lauf drei Punkte: die größte sichtbare Inhaltsdatei, Hinweise zu Bilddimensionen und mögliche Layoutverschiebungen. Ein Performance-Ziel von 95 oder mehr kann für eine gut vorbereitete Seite sinnvoll sein, ist aber keine Garantie und nicht in jedem Umfeld identisch erreichbar. Entscheidend ist, ob die Seite im echten Alltag schneller verständlich und bedienbar wird.

Wenn Sie den Unterschied zwischen Messwert und Alltag besser einordnen möchten, hilft der Ratgeber zum Lighthouse Performance Score. Der Score ist ein Diagnosewerkzeug, kein alleiniger Qualitätsbeweis.

Nur das Format ändern: Ein riesiges Original wird durch WebP nicht automatisch passend. Prüfen Sie zuerst die Pixelbreite.

Das Hero-Bild lazy laden: Der sichtbare Einstieg darf nicht unnötig warten. Priorisieren Sie das wichtigste Bild und testen Sie den LCP.

Alle Bilder gleich stark komprimieren: Ein Logo, ein Porträt und eine Produktaufnahme brauchen nicht dieselbe Qualitätsstufe. Vergleichen Sie mindestens drei unterschiedliche Motive.

Originale direkt aus dem Smartphone hochladen: Legen Sie einen Export-Schritt fest, bevor Bilder im CMS landen. So bleibt die Website auch nach mehreren Aktualisierungen leicht.

Nur den Score ansehen: Eine gute Zahl hilft nicht, wenn die Öffnungszeiten, Kontaktaktion oder Produktdarstellung schlecht auffindbar sind. Geschwindigkeit und Verständlichkeit gehören zusammen.

Gehen Sie die folgenden sechs Fragen durch, bevor ein Bild veröffentlicht wird:

1. Wie breit wird das Motiv im größten relevanten Layout tatsächlich angezeigt?
2. Liegt eine Version in WebP oder AVIF vor, und ist ein Fallback geregelt?
3. Ist die Qualitätsstufe zwischen 70 und 85 Prozent sichtbar sauber?
4. Wird das Bild sofort benötigt oder liegt es unterhalb des ersten Bildschirms?
5. Sind Breite und Höhe im Markup oder im Bildsystem festgelegt?
6. Sind Dateiname, Alt-Text, Lizenz und Bildunterschrift nachvollziehbar?

Wenn Sie Frage 1 oder 4 nicht beantworten können, ist die Bildplatzierung noch nicht klar genug. Wenn Frage 2 oder 3 offen ist, fehlt der Exporttest. Bei Frage 6 sollte die zuständige Person im Betrieb wissen, woher das Motiv stammt und welche Aussage es unterstützt. Diese kleine Routine verhindert mehr Fehler als ein einmaliger Großputz des Medienordners.

Bei einer bestehenden Website können Sie die Arbeit in zwei Etappen teilen: zuerst die größten drei Dateien optimieren, danach die restlichen Vorlagen. Für ein neues Projekt gehört die Entscheidung bereits in den Aufbau. Auf der Leistungsseite lässt sich besprechen, welche Bildpflege zu Ihrem Unternehmen und Ihrem laufenden Aufwand passt.

Wenn Sie Bilder auf der Website optimieren, beginnen Sie mit der tatsächlichen Anzeigebreite. Danach folgen Format und Kompression. Erst dann entscheiden Sie, ob das Bild sofort oder verzögert geladen wird. Ein sauberer Alt-Text, feste Abmessungen und dokumentierte Bildrechte machen aus einem schnellen Export eine verlässliche Website-Routine.

Für kleine Unternehmen in Leipzig reicht oft ein überschaubarer Prozess: drei Zielbreiten definieren, WebP oder ein passendes Fallback exportieren und die wichtigsten Seiten mobil testen. Die Optimierung ist damit keine einmalige Technikaufgabe, sondern eine kurze Qualitätskontrolle vor jedem neuen Upload.

Wenn Sie nicht sicher sind, ob die Ursache in den Bildern, im Layout oder in der gesamten Website steckt, können Sie ein kostenloses Erstgespräch anfragen. Gemeinsam lässt sich anhand weniger Beispielseiten entscheiden, welche drei Verbesserungen zuerst den größten praktischen Nutzen bringen.