Website-Bilder richtig für den Start vorbereiten

Ein Ordner mit „finalen Bildern“ reicht für ein Websiteprojekt selten aus. Dasselbe Foto kann als breite Titelgrafik, kleine Karte oder Teamfoto völlig anders funktionieren. Dazu kommen Fragen nach Originaldatei, Zuschnitt, Bildaussage und Alternativtext. Wenn diese Informationen vor dem Projektstart geordnet sind, kann die Gestaltung gezielter arbeiten und unnötige Rückfragen werden sichtbar.

Die wichtigste Vorbereitung ist deshalb keine pauschale Umwandlung aller Dateien. Erstellen Sie eine Bildliste pro Einsatzort und bewahren Sie die besten verfügbaren Originale separat auf.

Mit einer Bildinventur beginnen

Sammeln Sie Bilder zunächst ohne sie zu überschreiben. Legen Sie für jedes Motiv einen eindeutigen Dateinamen und eine Zeile in einer Tabelle an. Eine einfache Struktur genügt:

Feld	Beispielhafte Angabe	Warum es hilft
Motiv	Werkstatt mit zwei Mitarbeitenden	Inhalt lässt sich ohne Öffnen der Datei erkennen
geplanter Einsatz	Startseite, Abschnitt Leistungen	Gestaltung kennt den Kontext
Originaldatei	Kameraoriginal vorhanden	spätere Zuschnitte bleiben möglich
wichtige Bildzone	Personen links, Produkt mittig	Motiv bleibt bei engem Ausschnitt verständlich
Verwendungsstatus	intern zu prüfen / freigegeben	offene Fragen werden nicht übersehen
Bildfunktion	informativ / dekorativ / verlinkt	Grundlage für den Alttext
gewünschte Aussage	persönliche Beratung vor Ort	Text und Bild können zusammenpassen

Der Verwendungsstatus ist eine organisatorische Angabe, keine rechtliche Bewertung. Halten Sie fest, wer klärt, ob ein Bild im vorgesehenen Kontext verwendet werden kann. Fehlt diese Klärung, markieren Sie das Motiv als offen, statt aus einem vorhandenen Dateinamen eine Freigabe abzuleiten.

Originale und Webvarianten auseinanderhalten

Behalten Sie unveränderte Originale in einem eigenen Ordner. Webvarianten dürfen kleiner, anders zugeschnitten oder stärker komprimiert sein. Wenn nur eine bereits verkleinerte Datei vorliegt, kann ein späterer großer Einsatz unnötig eingeschränkt sein.

Die endgültigen Abmessungen hängen vom Layout ab. Ein pauschaler Wert für alle Website-Bilder wäre deshalb wenig hilfreich. Moderne Websites können mehrere Bildvarianten anbieten. Über die in der MDN-Dokumentation erklärten HTML-Attribute srcset und sizes kann der Browser anhand von Bildangebot und vorgesehenem Darstellungsplatz eine passende Ressource auswählen. Das funktioniert nur, wenn die Umsetzung entsprechende Varianten erzeugt oder bereitstellt.

Für Ihre Vorbereitung genügt meist:

• bestmögliches Original unverändert erhalten,
• geplanten Einsatz und ungefähre Form notieren,
• wichtige Motivbereiche kennzeichnen,
• vorhandene Dateiformate und Abmessungen dokumentieren,
• keine kleine Webkopie als neues „Original“ speichern.

Welche Webformate und Qualitätsstufen eingesetzt werden, sollte anschließend zur technischen Plattform und zum Motiv passen. Ein Logo, eine Illustration und ein Foto haben unterschiedliche Anforderungen.

Zuschnitte nach Einsatz planen

Ein breites Titelbild und ein quadratisches Vorschaubild brauchen nicht nur andere Maße. Sie können auch eine andere Bildkomposition verlangen. Liegt das Gesicht einer Person ganz am Rand, verschwindet es womöglich im schmalen mobilen Ausschnitt. Steht Text bereits im Bild, kann er in kleinen Darstellungen unlesbar werden oder mit Überschriften der Website konkurrieren.

Prüfen Sie für wichtige Motive mindestens drei Situationen:

1. breite Darstellung auf einem großen Bildschirm,
2. schmaler Ausschnitt auf einem Smartphone,
3. kleine Vorschau in einer Karten- oder Listenansicht.

Markieren Sie einen Fokusbereich, der erhalten bleiben soll. Manchmal genügt ein flexibler Zuschnitt desselben Fotos. Manchmal ist für eine andere Darstellung ein alternatives Motiv nötig. Das HTML-Element picture kann bei der späteren Umsetzung unterschiedliche Bildquellen für verschiedene Bedingungen bereitstellen; MDN bezeichnet dieses Vorgehen als Art Direction. Die redaktionelle Vorarbeit besteht darin, die benötigten Varianten und ihren Inhalt zu benennen.

Alttexte aus der Funktion ableiten

Ein Alttext ist kein zweiter Bildtitel und kein Platz für eine Liste von Suchbegriffen. Laut dem Entscheidungsbaum der Web Accessibility Initiative hängt die Behandlung davon ab, welche Funktion das Bild im konkreten Kontext erfüllt.

Bildfunktion	Praktische Richtung für den Alttext
Das Bild vermittelt eine einfache Information	Bedeutung knapp und konkret beschreiben
Das Bild ist ein Link oder eine Schaltfläche	Ziel oder Aktion benennen
Das Bild enthält relevante Schrift	die für das Verständnis nötigen Wörter wiedergeben
Das Bild zeigt komplexe Daten	Inhalt zusätzlich im umgebenden Text erklären
Das Bild ist rein dekorativ oder wiederholt Nachbartext	leerer Altwert statt redundanter Beschreibung

Der Kontext entscheidet. Ein Foto eines Gebäudes kann auf einer Kontaktseite den Standort zeigen und damit informativ sein. Dasselbe Foto kann hinter einer bereits eindeutigen Überschrift nur Atmosphäre schaffen. Deshalb sollte der Alttext nicht endgültig in einem isolierten Bilderordner festgelegt werden. Notieren Sie zunächst Motiv, Funktion und Aussage; formulieren Sie den endgültigen Text dort, wo der Seitenkontext bekannt ist.

Bei Bildern mit wichtiger Schrift nennt die W3C-Technik H37 als Ziel, diese Wörter im Alttext wiederzugeben. Vermeiden Sie nach Möglichkeit, längere Texte ausschließlich als Bild zu liefern. Ein lesbarer HTML-Text lässt sich besser an Bildschirmgröße und unterstützende Technik anpassen.

Dateinamen als Arbeitsmittel nutzen

Ein klarer Dateiname hilft dem Projektteam, Varianten zuzuordnen. Verwenden Sie eine verständliche, stabile Benennung wie team-werkstatt-original.jpg, team-werkstatt-startseite-breit.jpg und team-werkstatt-karte-quadrat.jpg. Verlassen Sie sich aber nicht darauf, dass ein Dateiname die Bildbedeutung, Freigabe oder den Alttext ersetzt.

Vermeiden Sie Versionsketten wie final_neu_2_wirklichfinal.jpg. Wenn mehrere Bearbeitungsstände nötig sind, ergänzen Sie Datum oder Einsatzort und führen Sie den aktuellen Stand in der Bildliste. Personenbezogene oder vertrauliche Angaben gehören nicht unnötig in öffentlich ausgelieferte Dateinamen.

Ein typischer Fehlerfall

Für die Startseite wird nur ein kleines querformatiges Foto geliefert. Auf dem Desktop wirkt es unscharf, im mobilen Hochformat wird die zentrale Person abgeschnitten. Der Alttext lautet lediglich „webdesign agentur nrw website“, obwohl das Bild dekorativ ist. Das Problem ist nicht durch ein einzelnes neues Format gelöst: Original, Fokus, Einsatz und Funktion wurden nie gemeinsam festgelegt.

Eine bessere Übergabe enthält das verfügbare Original, eine Markierung der wichtigen Bildzone, den geplanten Einsatz und die Entscheidung, ob das Motiv Information trägt. Die technische Umsetzung kann daraus passende Varianten erstellen und den Alttext im Seitenkontext bestimmen.

Checkliste für Ihre Bildübergabe

• Für jedes Motiv gibt es eine eindeutige Bezeichnung.
• Das beste verfügbare Original bleibt unverändert erhalten.
• Geplanter Einsatz und wichtige Motivbereiche sind notiert.
• Offene Fragen zur Verwendung sind klar markiert.
• Breite, schmale und kleine Darstellungen wurden bedacht.
• Bildfunktion und gewünschte Aussage sind dokumentiert.
• Alttexte werden aus Funktion und Seitenkontext abgeleitet.
• Webvarianten lassen sich vom Original unterscheiden.

Wenn Sie die Bilder zusammen mit Texten und Seitenzielen vorbereiten, lässt sich die Umsetzung früher konkretisieren. Unter Websites für kleine Unternehmen finden Sie den passenden Leistungsbereich. Der Beitrag Website modernisieren hilft bei der Einordnung vorhandener Seiten und Materialien. Ihre Bildliste und die geplanten Einsatzorte können Sie schriftlich als Teil Ihrer Anfrage übermitteln.