Wissen / Bilder

Website-Bilder auswählen und optimieren: Ein praktischer Ablauf

Kurz gesagt: Gute Website-Bilder erfüllen eine konkrete Aufgabe, zeigen das Wesentliche auch auf kleinen Bildschirmen und werden passend zur Darstellung ausgeliefert. Klären Sie zuerst Motiv und Nutzung, dann Ausschnitte, Textalternativen und Dateivarianten. Eine Bildliste verbindet diese Entscheidungen mit der Zielseite und den Freigaben. Prüfen Sie das Ergebnis im echten Seitenkontext statt nur die einzelne Datei.

Veröffentlicht am / Aktualisiert am / Redaktion: Ruhrstack / 10 Minuten Lesezeit

01 / BILDZWECK

Wählen Sie ein Motiv für eine konkrete Aussage.

Ein freier Platz im Layout ist noch kein ausreichender Grund für ein Bild.

Ein Foto kann zeigen, wie eine Leistung aussieht, wo Ihr Unternehmen arbeitet oder wer eine Anfrage beantwortet. Ein Diagramm kann einen Zusammenhang erklären. Ein abstraktes Motiv kann die Gestaltung unterstützen. Diese Aufgaben unterscheiden sich. Bevor Sie ein Bild auswählen, formulieren Sie deshalb einen Satz: Was soll jemand durch dieses Motiv besser verstehen?

Für eine Leistungsseite kann eine erkennbare Arbeitssituation hilfreicher sein als ein beliebiges Bürobild. Auf einer Unternehmensseite kann ein aktuelles Teamfoto sinnvoll sein, wenn die abgebildeten Personen tatsächlich zum beschriebenen Team gehören. Ein gekaufter oder generierter Eindruck darf nicht als eigener Betrieb oder reales Kundenprojekt dargestellt werden.

Prüfen Sie, ob das Bild die Aussage trägt oder nur eine Behauptung wiederholt. Ein unspezifischer Handschlag erklärt weder den Arbeitsablauf noch das Ergebnis einer Leistung. Eine konkrete Detailaufnahme kann dagegen eine Eigenschaft sichtbar machen, die im Text beschrieben wird. Der Zusammenhang sollte auf der Seite erkennbar sein.

Entscheiden Sie auch, wann kein Bild nötig ist. Eine kurze Auskunft kann ohne zusätzliche Illustration gut verständlich sein. Weniger Motive erleichtern eine gezielte Auswahl und Prüfung. Es geht darum, passende Information und Gestaltung zu verbinden, nicht jede Fläche mit Medien zu füllen.

02 / BILDLISTE

Eine Bildliste verbindet Motiv, Zielseite und offene Fragen.

Damit wird aus einem Dateisammelordner ein verwendbarer Arbeitsstand.

Ordnen Sie jede geplante Abbildung einem konkreten Platz auf der Website zu. Halten Sie die gewünschte Aussage und das vorhandene Ausgangsmaterial fest. Die folgende Tabelle ist eine eigene Arbeitsvorlage für einen ausdrücklich fiktiven Möbelbaubetrieb. Sie enthält keine realen Projektdaten und keine allgemeingültigen Formatvorgaben.

Eine Bildliste mit fachlichen und gestalterischen Entscheidungen
Platz und AufgabeGewünschtes MotivVor Verwendung klären
Leistungsseite: Einbauschränke erklärenGeöffneter Schrank mit erkennbarer AufteilungMobile Ansicht zeigt die Aufteilung; Projektfreigabe liegt vor
Projektseite: Anschluss an eine Dachschräge zeigenDetail des passenden AbschlussesAusschnitt und Bildunterschrift stimmen mit dem Projekt überein
Unternehmen: Arbeitsumgebung zeigenAktuelle WerkstattaufnahmeKeine vertraulichen Unterlagen oder fremden Aufträge erkennbar
Kontakt: Ansprechpartner vorstellenAktuelles Porträt der zuständigen PersonName, Zuständigkeit und Freigabe für die Veröffentlichung bestätigt

Ergänzen Sie in Ihrer Liste Dateiname, Herkunft, Bearbeitungsstand, Verantwortliche und Freigabestatus. Ein bereits ausgewähltes Motiv kann noch ungeklärt sein. Kennzeichnen Sie deshalb Auswahlideen und Platzhalter ausdrücklich. So wird ein Entwurf nicht versehentlich mit einem ungeprüften Bild veröffentlicht.

Bewahren Sie das geeignete Original getrennt von den Webvarianten auf. Eine kleine Vorschau aus einer Präsentation ist keine verlässliche Ausgangsdatei für eine große Darstellung. Wenn das Original fehlt, braucht diese Lücke eine Entscheidung: neue Aufnahme, anderes Motiv oder eine kleinere Verwendung.

03 / AUSSCHNITTE

Prüfen Sie Aussage und Ausschnitt auf schmalen Bildschirmen.

Verkleinern und anders zuschneiden lösen unterschiedliche Probleme.

Ein breites Foto kann auf einem großen Bildschirm funktionieren und im schmalen Ausschnitt seine wichtigste Information verlieren. Im fiktiven Möbelbeispiel soll die Innenaufteilung eines Schranks erkennbar bleiben. Zeigt die mobile Ansicht nur die Türfront, passt das Bild nicht mehr zur Aufgabe, selbst wenn es technisch scharf dargestellt wird.

MDN unterscheidet bei responsiven Bildern zwischen verschiedenen Auflösungen desselben Motivs und anderen Ausschnitten für unterschiedliche Layouts. Mehr Pixel reparieren keinen unpassenden Ausschnitt. Die Gestaltung muss wissen, welcher Bereich erhalten bleiben soll; die Entwicklung muss geeignete Varianten ausliefern können.

Markieren Sie deshalb den wichtigsten Bildbereich. Prüfen Sie bei einem Porträt die Person, bei einem Produkt die relevante Eigenschaft und bei einem Projektfoto den erklärten Zusammenhang. Lassen Sie sich den Ausschnitt mit dem realen Text auf einer schmalen und einer breiten Seite zeigen. Ein Bild in einem isolierten Auswahlfenster reicht dafür nicht.

Wenn ein Text über einem Foto liegt, braucht er eine lesbare Fläche. Eine dunklere Überlagerung kann die Darstellung unterstützen, löst aber nicht jeden Konflikt mit dem Motiv. Wichtige Angaben sollten als echter Seiteninhalt erreichbar bleiben. Verstecken Sie beispielsweise Voraussetzungen oder Kontaktinformationen nicht ausschließlich im Bild.

04 / TEXTALTERNATIVEN

Der Alt-Text beschreibt die Bedeutung des Bildes an dieser Stelle.

Dasselbe Motiv kann je nach Verwendung eine andere Textalternative brauchen.

Das W3C-Bilder-Tutorial unterscheidet unter anderem informative, dekorative und funktionale Bilder. Informative Abbildungen brauchen eine passende Alternative für ihre wesentliche Information. Bei rein dekorativen Bildern ist ein leeres alt="" vorgesehen. Ein Bild, das allein eine Aktion bezeichnet, muss diese Funktion verständlich machen.

Nutzen Sie den W3C-Entscheidungsbaum zu Alt-Texten als Hilfe für die Einordnung im konkreten Kontext. Kopieren Sie nicht automatisch den Dateinamen in das Textfeld. Fragen Sie stattdessen: Welche Information würde fehlen, wenn jemand das Bild nicht sehen kann? Und steht diese Information bereits gleichwertig daneben?

Eigene Beispiele: Die Verwendung entscheidet über die Alternative
VerwendungMögliche TextalternativeBegründung
Foto erklärt die Schrankaufteilung„Geöffneter Einbauschrank mit langen Fächern links und Schubladen rechts“Die gezeigte Aufteilung ergänzt die Leistungsbeschreibung
Dekorative HolzstrukturLeeres alt-AttributDas Muster trägt keine zusätzliche Sachinformation
Logo ist alleiniger Startseitenlink„Fachbetrieb Startseite“Der zugängliche Name erklärt das Ziel des Links
Diagramm zeigt mehrere WerteKurze Einordnung plus vollständige Textdarstellung der DatenDie Werte brauchen eine verständliche Alternative außerhalb eines langen Alt-Texts

Diese Formulierungen sind Beispiele, keine Standardtexte für beliebige Bilder. Bei komplexen Abbildungen kann eine zugängliche Tabelle oder Erklärung im Seiteninhalt nötig sein. Eine Bildunterschrift ergänzt den Kontext für alle Leser. Stimmen Bild, Unterschrift und umgebender Text nicht überein, sollte zuerst die inhaltliche Zuordnung korrigiert werden.

Ein professioneller Vorteil liegt in der gemeinsamen Einordnung von Inhalt und Umsetzung. Die ausführlichen Grundlagen zu Zugänglichkeit behandelt der Beitrag über Barrierefreiheit, WCAG und BFSG.

05 / DATEIVARIANTEN

Optimieren Sie die Webdatei für ihre tatsächliche Darstellung.

Eine kleine Dateigröße allein ist kein ausreichendes Qualitätsziel.

Vereinbaren Sie, wo ein Bild wie groß dargestellt wird und welche Details dabei erkennbar bleiben müssen. Daraus lassen sich geeignete Auflösungen und Dateivarianten ableiten. Ein Foto, eine transparente Grafik und ein einfaches Zeichen brauchen nicht zwingend dasselbe Format. Lassen Sie die Auswahl anhand des Motivs und der tatsächlichen Ausgabe begründen.

Komprimierung muss am Ergebnis geprüft werden. Werden feine Kanten, Materialdetails oder Schrift im Bild unleserlich, ist die Datei für ihren Zweck zu stark reduziert. Wird dagegen eine große Originaldatei für eine kleine Vorschau ausgeliefert, kann unnötiger Ladebedarf entstehen. Es gibt keine universelle Pixelbreite oder Kilobytegrenze für jedes Website-Bild.

Die web.dev-Hinweise zum Laden von Bildern empfehlen unter anderem angegebene Bildmaße, damit der Browser Platz reservieren kann. Bilder außerhalb der ersten Ansicht können bei passender Umsetzung verzögert geladen werden. Ein wichtiges Bild in der ersten Ansicht sollte dadurch nicht erst spät angefordert werden.

Für Auftraggeber genügt zunächst eine prüfbare Frage: Wird bei einer schmalen Darstellung eine passende Datei geladen, bleibt die Seite während des Ladens ruhig und ist das Motiv rechtzeitig sichtbar? Die technischen Messgrößen erläutert unser Artikel über Website-Performance und Core Web Vitals. Hier steht die Auswahl und Vorbereitung des einzelnen Bildes im Vordergrund.

06 / SUCHKONTEXT

Ordnen Sie Bilder verständlich in den Seiteninhalt ein.

Dateiname und Beschreibung sollen das echte Motiv treffen.

Google erklärt in seinen Hinweisen zu Google Bilder, dass Seitenkontext, Beschriftungen, Dateinamen und Alt-Texte Hinweise zum Bild liefern. Der Leitfaden empfiehlt beschreibende Angaben und warnt vor überladenen Alt-Texten. Ein kurzer Motivname ist deshalb sinnvoller als eine Ansammlung von Leistungen und Ortsnamen.

Für das fiktive Schrankfoto wäre etwa „einbauschrank-innenaufteilung“ eine nachvollziehbare Benennung. Ob das Projekt tatsächlich in Dortmund entstand, muss bekannt sein, bevor diese Angabe als Beschreibung verwendet wird. Ergänzen Sie keine regionalen oder fachlichen Behauptungen, die das Motiv nicht trägt.

Ein erklärendes Projektfoto gehört nahe an die entsprechende Erklärung. Google kann Bilder über das src-Attribut eines HTML-Bildelements finden und indexiert keine CSS-Hintergrundbilder. Die technische Einbindung sollte daher zum Verwendungszweck passen. Dekorative Hintergründe und informative Abbildungen brauchen eine bewusste Unterscheidung.

Diese Maßnahmen helfen, Bilder verständlich und technisch zugänglich anzubieten. Sie garantieren weder eine bestimmte Vorschau noch ein Ranking. Eine zusätzliche Bildsitemap kann die technische Auffindbarkeit unterstützen, ersetzt aber keine passende Seite, keine korrekte Beschreibung und keine Freigabe für die Nutzung.

07 / FREIGABEN

Klären Sie Herkunft und erlaubte Nutzung vor der Veröffentlichung.

Eine vorhandene Datei beantwortet diese Fragen noch nicht.

Bei fremden Fotos oder Grafiken müssen die vereinbarten Nutzungsrechte zur geplanten Verwendung passen. § 31 UrhG sieht unter anderem räumlich, zeitlich oder inhaltlich beschränkte Nutzungsrechte vor. Aus dem bloßen Besitz einer Datei folgt daher keine geklärte Erlaubnis für jede Veröffentlichung oder Bearbeitung.

Halten Sie die Herkunft und die maßgebliche Vereinbarung bei der Bildliste fest. Prüfen Sie beispielsweise, ob Website-Nutzung, vorgesehene Bearbeitung und erforderliche Urheberangaben geklärt sind. Eine Freigabe sollte dem richtigen Motiv und dem richtigen Stand zugeordnet werden können. Bei Unsicherheit braucht die konkrete Vereinbarung eine fachliche Prüfung.

Bei Personen, Kundenprojekten und erkennbaren Unterlagen können weitere Fragen hinzukommen. Benennen Sie solche offenen Punkte vor der Freigabe. Die Bildliste bestätigt keine rechtliche Zulässigkeit, dokumentiert aber, welche Klärung noch fehlt. Ein Bild kann gestalterisch fertig und trotzdem noch nicht veröffentlichungsreif sein.

Ein Webteam kann Motiv, Varianten, Dateizuordnung und technische Verwendung abstimmen. Wer Rechte und besondere Freigaben prüft, sollte im Auftrag ausdrücklich geklärt sein. Die allgemeine Website-Übergabe mit Dokumentation umfasst weitere Unterlagen; hier geht es gezielt um den nachvollziehbaren Status Ihrer Medien.

08 / BILDPRÜFUNG

Prüfen Sie jedes wichtige Bild auf der fertigen Zielseite.

Die Freigabe braucht Motiv, Text und Darstellung in einem gemeinsamen Stand.

Beginnen Sie mit den Bildern, die eine wichtige Aussage tragen oder in der ersten Ansicht viel Raum einnehmen. Ein kleines wiederkehrendes Symbol braucht eine andere Prüfung als eine projektbezogene Abbildung. Die folgenden Punkte sind eine eigene Arbeitshilfe für die redaktionelle und technische Abstimmung.

  1. Aussage: Passt das Motiv zur beschriebenen Leistung und sind alle sichtbaren Behauptungen bestätigt?
  2. Ausschnitt: Bleibt das Entscheidende auf einer schmalen und einer breiten Ansicht erkennbar?
  3. Alternative: Sind Bildbedeutung oder Funktion zugänglich beschrieben beziehungsweise ist Dekoration korrekt gekennzeichnet?
  4. Datei: Stimmen Variante, Qualität, Ladeverhalten und reservierter Platz mit der Verwendung überein?
  5. Kontext: Passen Bildunterschrift, nahe Erklärung und gegebenenfalls das Linkziel zusammen?
  6. Freigabe: Sind Herkunft, erlaubte Verwendung und offene Prüfungen dokumentiert?

Halten Sie eine Korrektur konkret fest: „Auf der mobilen Leistungsseite ist die Innenaufteilung nicht mehr sichtbar; passenden Ausschnitt zeigen und erneut prüfen.“ Das gibt dem Webteam eine lösbare Aufgabe. „Das Foto wirkt nicht“ beschreibt dagegen noch nicht, welcher Teil der Aussage oder Darstellung problematisch ist.

Prüfen Sie diese Zuordnung erneut, wenn später ein Motiv ersetzt oder sein Verwendungszweck verändert wird. Ein bisher rein dekoratives Bild kann an einer anderen Stelle Information tragen. Der vorhandene Alt-Text und die Dateivariante müssen deshalb nicht automatisch weiterpassen.

09 / RUHRSTACK

Mit Ruhrstack Bildzweck, Gestaltung und Umsetzung verbinden.

Eine kurze Liste der geplanten Motive erleichtert die Einordnung.

Ruhrstack bietet Designleistungen sowie die Planung und Umsetzung von Unternehmenswebsites an. Benennen Sie für Ihr Vorhaben die Zielseiten, vorhandene Bilder und gewünschten Aussagen. Welche Auswahl, Bearbeitung und technische Einbindung enthalten sind, wird für den jeweiligen Auftrag geklärt.

Für das erste Gespräch helfen eine Website-URL und die Beschreibung eines typischen Bildplatzes. Teilen Sie auch mit, welche Ausgangsdateien und bestätigten Freigaben bereits vorliegen. So lässt sich besprechen, ob vorhandenes Material geeignet ist oder welches Motiv noch fehlt.

10 / QUELLEN

Quellen und redaktioneller Stand.

Die Quellen wurden am 7. Oktober 2026 geprüft. Bildliste, Textalternativen und das Beispielszenario sind eigene redaktionelle Arbeitshilfen. Hinweise zu Nutzungsrechten ersetzen keine Prüfung der konkreten Vereinbarungen.

  1. W3C Web Accessibility Initiative: Images Tutorial, abgerufen am 7. Oktober 2026.
  2. W3C Web Accessibility Initiative: An alt Decision Tree, abgerufen am 7. Oktober 2026.
  3. MDN Web Docs: Using responsive images in HTML, abgerufen am 7. Oktober 2026.
  4. Google Search Central: Best Practices für Google Bilder, abgerufen am 7. Oktober 2026.
  5. web.dev: Browser-level image lazy loading for the web, abgerufen am 7. Oktober 2026.
  6. Gesetze im Internet: § 31 UrhG: Einräumung von Nutzungsrechten, abgerufen am 7. Oktober 2026.

Redaktioneller Hinweis: Dieser Beitrag dient der allgemeinen Information und ersetzt keine Einzelfallprüfung. Trotz sorgfältiger Recherche wird keine Gewähr für Vollständigkeit und fortdauernde Aktualität übernommen. Eine Haftung nach zwingenden gesetzlichen Vorschriften bleibt unberührt. Redaktionelle Einordnung.

Welche Bilder braucht Ihre Website wirklich?

Schicken Sie uns Ihre Website-URL und eine kurze Beschreibung des gewünschten Bildzwecks. Wir besprechen, wie Motive, Seiteninhalt und technische Darstellung zusammenpassen.

Website-Bilder besprechen