Bilder für Websites richtig optimieren

Ein passendes Bild auswählen

Ein gutes Websitebild unterstützt den Inhalt und passt zum Einsatzort. Klären Sie zuerst, was Besucherinnen und Besucher erkennen sollen: ein Produktdetail, eine Person, eine Situation oder eine Stimmung. Vermeiden Sie austauschbare Motive ohne Bezug zur Aussage. Bei informativen Grafiken muss die zentrale Information zusätzlich verständlich vermittelt werden.

Klären Sie vor dem Upload die Nutzungsrechte. Ein im Internet auffindbares Foto ist nicht automatisch für Ihre Website freigegeben. Prüfen Sie Lizenz, erlaubte Nutzung, Namensnennung und Einschränkungen und halten Sie die Herkunft intern fest. Bei Bildern von Personen sollten erforderliche Freigaben geklärt werden.

Wählen Sie ein Motiv im Kontext: Ein breites Titelbild braucht einen anderen Ausschnitt als ein quadratisches Produktfoto. Google empfiehlt, Bilder in einen aussagekräftigen Seitenkontext einzubetten. Google Search Central dokumentiert Bild SEO Grundlagen, aber keine Garantie für eine bestimmte Platzierung.

Wählen Sie ein Bild nicht allein nach seiner Ästhetik aus. Es sollte die Aussage des Abschnitts unterstützen und zum Umfeld passen. Prüfen Sie, ob wichtige Details auch in einem kleinen Vorschaubereich erkennbar bleiben. Bei Team oder Produktbildern ist zudem wichtig, dass die Darstellung aktuell ist und keine unbeabsichtigten Elemente im Hintergrund ablenken.

Dokumentieren Sie bei Bedarf die Bildquelle und die Bedingungen der Nutzung an einem für Ihr Team geeigneten Ort. Das erleichtert spätere Rückfragen, wenn ein Bild ersetzt oder erneut verwendet wird. Ein Bild, das für einen bestimmten Zweck bereitgestellt wurde, darf nicht automatisch für jeden weiteren Kanal oder jede Bearbeitung genutzt werden. Klären Sie offene Nutzungsfragen vor dem Upload.

Abmessungen, Dateigrösse und Ausschnitt

Die Pixelabmessungen sollten zum dargestellten Bereich passen. Ein sehr grosses Originalbild in einem kleinen Kartenfeld überträgt oft mehr Daten als nötig. Ein zu kleines Bild kann dagegen auf grossen Bildschirmen unscharf wirken. Fragen Sie nach vorgesehenen Bildgrössen Ihrer Websiteplattform oder prüfen Sie die tatsächliche Darstellung.

Dateigrösse beeinflusst die zu übertragende Datenmenge. Verkleinern Sie das Bild auf sinnvolle Abmessungen und komprimieren Sie es so, dass die sichtbare Qualität für den Einsatzzweck ausreicht. Prüfen Sie feine Details, Text in Grafiken und Farbverläufe. Zu starke Komprimierung kann sichtbare Artefakte verursachen.

Das Seitenverhältnis beschreibt das Verhältnis von Breite und Höhe. Wird ein Bild in einen anderen Rahmen gezwängt, kann es gestaucht oder unpassend zugeschnitten wirken. Erstellen Sie wenn möglich einen geeigneten Ausschnitt. Prüfen Sie bei Hero Bildern, ob das Hauptmotiv auch auf Mobilgeräten sichtbar bleibt.

Bearbeiten Sie stets eine Arbeitskopie, wenn das Original erhalten bleiben soll. Ändern Sie zuerst die Abmessungen passend zum vorgesehenen Einsatz und kontrollieren Sie danach die Komprimierung. Eine stärkere Komprimierung kann bei feinen Linien, Verläufen oder Schrift sichtbare Artefakte erzeugen. Vergleichen Sie die Ausgabe in der tatsächlichen Seitendarstellung, nicht nur im kleinen Dateivorschaubild.

Der Bildausschnitt ist Teil der Gestaltung. Legen Sie fest, welches Motiv im Mittelpunkt steht, und prüfen Sie, ob ein automatischer Zuschnitt dieses Motiv verschieben könnte. Bei wiederkehrenden Karten oder Produktbildern hilft ein einheitlicher Ausschnitt, doch wichtige Inhalte dürfen dadurch nicht abgeschnitten werden. Prüfen Sie die Darstellung in den vorgesehenen Layouts und bei schmaler Breite.

JPG, PNG, WebP und AVIF einordnen

JPG eignet sich häufig für Fotografien mit vielen Farbabstufungen. PNG kann bei Transparenz oder klaren Kanten sinnvoll sein. WebP unterstützt verschiedene Komprimierungsarten und kann in vielen Fällen eine gute Weboption sein. AVIF bietet moderne Kompressionsmöglichkeiten; die konkrete Eignung hängt jedoch vom System und der Bildauslieferung ab.

Es gibt kein Format, das für jedes Bild und jede Plattform ideal ist. Berücksichtigen Sie, ob Ihr Redaktionssystem das Format akzeptiert, ob ältere Umgebungen zu berücksichtigen sind und ob eine alternative Ausgabe vorhanden ist. Prüfen Sie die Datei nach dem Upload. Ein modernes Format allein garantiert keine schnellere Seite.

Die Hinweise von web.dev zur Bildleistung behandeln passende Bilddimensionen und die übertragene Datenmenge. Entscheidend bleibt die praktische Kontrolle des konkreten Motivs und der eingesetzten Website.

Beim Formatentscheid zählen Dateigrösse und Kompatibilität mit dem Redaktionssystem. Ein modernes Format ist nicht automatisch passend, wenn der Upload es nicht unterstützt. Fragen Sie bei Unsicherheit nach, welche Formate die Website verarbeitet. Bewahren Sie eine hochwertige Ausgangsdatei auf, damit spätere Zuschnitte nicht aus einer komprimierten Kopie entstehen.

Responsive Bilder und mobile Prüfung

Responsive Bilder berücksichtigen, dass ein Motiv auf verschiedenen Bildschirmgrössen und in unterschiedlichen Layouts erscheint. Eine Websiteplattform kann passende Varianten automatisch ausliefern. Fragen Sie nach, bevor Sie technische Einstellungen verändern. Das Ziel ist, unnötig grosse Dateien für kleine Flächen zu vermeiden und ausreichende Qualität zu erhalten.

Prüfen Sie auf einem Mobiltelefon Ausschnitt, Schärfe und Ladeverhalten. Ein Bild kann am Desktop ausgewogen wirken, aber auf einem schmalen Bildschirm das Hauptmotiv verlieren. Bei einem Titelbild muss der wesentliche Inhalt schnell erkennbar bleiben und darf wichtige Bedienelemente nicht verdrängen.

Inhaltlich wichtige Bilder benötigen einen passenden Alternativtext. Die MDN Dokumentation zum img Element erklärt die Einbindung und Attribute. Beschreiben Sie den Zweck im Kontext, statt jedes Detail aufzuzählen. Dekorative Bilder sollten nicht mit unnötigem Text überladen werden.

Dateiname, Alternativtext und Ladeverhalten

Ein klarer Dateiname hilft, Medien später wiederzufinden. Verwenden Sie kurze beschreibende Wörter statt automatischer Zahlenfolgen, wenn das praktikabel ist. Der Dateiname ersetzt keinen Alternativtext und garantiert keine bessere Suchposition.

Der Alternativtext ist für Menschen gedacht, die das Bild nicht sehen oder dessen Anzeige deaktiviert ist. Beschreiben Sie knapp, welche Information das Bild im Abschnitt vermittelt. Bei einem verlinkten Bild kann der Linkzweck wichtiger als eine reine Motivbeschreibung sein. Wiederholen Sie keine Bildunterschrift ohne zusätzlichen Nutzen.

Bilder unterhalb des sichtbaren Bereichs können je nach Website verzögert geladen werden. Lazy Loading kann unnötig frühe Abrufe vermeiden. Ein wichtiges Hero Bild hat eine andere Rolle und sollte nicht pauschal verzögert werden. Die konkrete Einstellung sollte im Kontext der eingesetzten Plattform geprüft werden.

Lazy Loading bedeutet, dass geeignete Bilder erst geladen werden, wenn sie im Verlauf der Seite benötigt werden. Das kann bei weiter unten platzierten Motiven sinnvoll sein. Ein prägendes Hero Bild am Anfang der Seite sollte dagegen nicht unüberlegt verzögert werden, denn es gehört zum ersten sichtbaren Inhalt. Überlassen Sie technische Attribute wenn möglich der Plattform oder lassen Sie deren Verhalten prüfen, statt Werte ohne Kenntnis der Umsetzung zu ändern.

Beurteilen Sie Qualität und Ladeverhalten gemeinsam: Ein kleineres Bild ist kein Gewinn, wenn Details unleserlich werden, und ein sehr grosses Original ist nicht automatisch besser. Prüfen Sie auf einem Mobilgerät, ob das Motiv schnell erkennbar ist, der Ausschnitt stimmt und kein unnötiger Leerraum dominiert. Alternativtexte ergänzen die inhaltliche Funktion; sie sollten keine Dateinamen oder Stichwortreihen sein.

Qualität, Ladezeit und Optimierung

Die Gesamtwirkung hängt von Motiv, Abmessungen, Komprimierung, Auslieferung und Layout ab. Ein einzelnes Bild ist nicht immer die Ursache einer langsamen Seite. Vergleichen Sie Änderungen unter ähnlichen Bedingungen und betrachten Sie mehrere Seitenbereiche. Die Empfehlungen von web.dev erläutern, wie passend dimensionierte Bilder die übertragene Datenmenge beeinflussen.

Eine wiederverwendbare Vorher und Nachher Grafik mit neutralem Beispielbild kann den Unterschied zwischen einer übergrossen und einer passend vorbereiteten Datei zeigen. Verwenden Sie denselben Bildausschnitt, damit Dateigrösse nicht mit einer veränderten Komposition verwechselt wird. Kundendateien sind dafür nicht erforderlich.

Holen Sie fachliche Unterstützung, wenn Bilder unscharf bleiben, unpassend zugeschnitten werden oder die Plattform keine geeignete Ausgabe liefert. Eine Website Analyse kann Bildqualität und Ladeverhalten im Zusammenhang betrachten. Ergebnisse hängen von der gesamten Seite und den technischen Bedingungen ab. Website Analyse. Achten Sie auch darauf, dass Bildrechte und Zuständigkeiten für künftige Aktualisierungen dokumentiert sind. Eine wiederholbare Auswahl und Prüfung ist im Alltag oft hilfreicher als eine einmalige Optimierung ohne klare Zuständigkeit. Prüfen Sie bei wichtigen Motiven zudem, ob sie auf kleinen Bildschirmen den passenden Fokus behalten und ob der umgebende Text das Motiv verständlich einordnet.

Zusammenfassung

• Planen Sie Änderungen passend zum Einsatzzweck.
• Prüfen Sie Inhalte, Darstellung und Links vor der Veröffentlichung.
• Berücksichtigen Sie mobile Geräte und Zugänglichkeit.
• Klären Sie Rechte, Zuständigkeiten und technische Grenzen.

Häufige Fragen

Quellen

1. Image performance | web.devGoogle · geprüft am 05.11.2026
2. <img> HTML image embed element - HTML | MDNMDN · geprüft am 05.11.2026
3. Image SEO Best Practices | Google Search Central | Documentation | Google for DevelopersGoogle Search Central · geprüft am 05.11.2026

Verwandte Artikel

• Website Inhalte selbst pflegen: Darauf sollten Sie achten
• Website veröffentlichen: Die vollständige Checkliste
• Welche Inhalte braucht eine gute Unternehmenswebsite?