Bilder auf der Website austauschen: Worauf achten?

Was muss beim Austausch von Website-Bildern beachtet werden?

Wenn Sie Bilder auf der Website austauschen, sollte das neue Bild nicht einfach nur an die Stelle der bisherigen Datei gesetzt werden. Es muss zum Inhalt, zum vorgesehenen Bildbereich und zur technischen Umsetzung der Website passen. Andernfalls können unscharfe Darstellungen, ungünstige Ausschnitte, längere Ladezeiten oder Lücken im Layout entstehen.

Vor dem Austausch sollten insbesondere folgende Punkte geklärt werden:

• Das neue Motiv passt inhaltlich zur jeweiligen Seite und zum umgebenden Text.
• Abmessungen und Seitenverhältnis entsprechen dem vorgesehenen Bildbereich.
• Dateiformat und Komprimierung ermöglichen eine angemessene Bildqualität bei möglichst geringer Dateigröße.
• Der relevante Bildausschnitt bleibt auch auf kleineren Bildschirmen erkennbar.
• Dateiname und Alternativtext werden passend zum tatsächlichen Verwendungszweck festgelegt.
• Die Darstellung wird nach dem Austausch auf der veröffentlichten Website geprüft.

Bilder gehören ebenso wie Texte, Kontaktdaten und Downloads zu den Inhalten, die im laufenden Betrieb kontrolliert werden sollten. Einen Überblick dazu gibt der Ratgeber Welche Inhalte sollten regelmäßig aktualisiert werden?.

Welche Bildgröße und welches Seitenverhältnis passen zum Layout?

Entscheidend ist zunächst, wo das Bild verwendet wird. Ein großflächiges Headerbild benötigt andere Abmessungen als ein Teamfoto, ein kleines Vorschaubild oder eine Grafik innerhalb eines Textabschnitts. Prüfen Sie deshalb die vorhandene Bildfläche und nicht nur die Abmessungen der bisherigen Datei. Manche Systeme schneiden Bilder automatisch zu oder erzeugen mehrere Varianten.

Das neue Bild sollte mindestens die für die größte vorgesehene Darstellung benötigte Auflösung besitzen. Eine wesentlich größere Originaldatei verbessert die sichtbare Qualität jedoch nicht automatisch. Wird ein mehrere Tausend Pixel breites Bild nur in einer schmalen Spalte angezeigt, werden unnötig viele Daten übertragen. Responsive Bildtechniken ermöglichen es dem Browser, eine zur Darstellung passende Variante auszuwählen. Die Hinweise zu korrekt dimensionierten Bildern erläutern diesen Zusammenhang.

Auch das Seitenverhältnis muss stimmen. Wird ein querformatiges Motiv in einem nahezu quadratischen Bereich eingesetzt, kann ein wichtiger Teil des Bildes abgeschnitten werden. Gesichter, Produkte, Gebäude oder beschriftete Grafiken sollten deshalb mit ausreichend Abstand zum Rand angeordnet sein.

Welches Dateiformat und welche Dateigröße sind sinnvoll?

Das geeignete Dateiformat richtet sich nach dem Bildinhalt und den technischen Möglichkeiten der Website. Für Fotografien eignen sich komprimierbare Formate wie WebP oder JPEG. PNG ist vor allem bei benötigter Transparenz oder bestimmten Grafiken sinnvoll, führt bei Fotografien aber häufig zu unnötig großen Dateien. Moderne Formate sollten nur eingesetzt werden, wenn das verwendete System sie zuverlässig verarbeitet.

Die Dateigröße sollte so klein wie möglich sein, ohne dass im vorgesehenen Einsatz störende Qualitätsverluste sichtbar werden. Eine starke Komprimierung kann an Schrift, feinen Linien, Farbverläufen und Gesichtern deutliche Artefakte erzeugen. Umgekehrt belastet eine kaum komprimierte Datei die Ladezeit, obwohl sie auf der Website nur verkleinert dargestellt wird.

Bewahren Sie die hochwertige Ausgangsdatei getrennt von der für die Website optimierten Version auf. Dadurch kann das Motiv später für andere Formate erneut zugeschnitten werden, ohne eine bereits verkleinerte oder stark komprimierte Datei vergrößern zu müssen.

Was gilt für Dateiname, Alt-Text und Bildrechte?

Ein verständlicher Dateiname erleichtert die Zuordnung in der Mediathek. Statt einer Kamerabezeichnung oder einer zufälligen Zeichenfolge sollte er das Motiv knapp beschreiben. Der Dateiname wird am besten vor dem Hochladen festgelegt, weil eine nachträgliche Änderung je nach Content-Management-System zusätzlichen Aufwand verursachen oder bestehende Verknüpfungen beeinflussen kann.

Der Alternativtext richtet sich nicht nur nach dem sichtbaren Motiv, sondern nach dessen Bedeutung im jeweiligen Seitenkontext. Ein informatives Bild benötigt eine kurze Beschreibung seiner wesentlichen Aussage. Ist das Bild Bestandteil eines Links oder einer Schaltfläche, muss die Funktion verständlich werden. Rein dekorative Bilder erhalten normalerweise einen leeren Alternativtext, damit sie von assistiven Technologien übersprungen werden. Eine praktische Einordnung bietet der W3C-Entscheidungsbaum für Alternativtexte.

Der Alt-Text ist kein Platz für eine Aufzählung von Keywords. Er sollte knapp, sachlich und für die konkrete Verwendung hilfreich sein. Wird dasselbe Bild in einem anderen Zusammenhang eingesetzt, kann deshalb ein anderer Alternativtext oder eine dekorative Behandlung erforderlich sein.

Vor der Veröffentlichung muss außerdem geklärt sein, ob das Bild für die vorgesehene Nutzung verwendet werden darf. Dazu können Nutzungsrechte, erforderliche Urheberangaben und bei erkennbaren Personen entsprechende Einwilligungen gehören. Die technische Einpflege ersetzt keine rechtliche Prüfung der bereitgestellten Bilddatei.

Wie bleibt der Bildausschnitt auf mobilen Geräten passend?

Ein Bild kann auf dem Desktop vollständig sichtbar sein und auf dem Smartphone deutlich enger zugeschnitten werden. Ursache sind unterschiedliche Seitenverhältnisse, responsive Bildmodule oder festgelegte Höhen des jeweiligen Layoutbereichs. Deshalb sollte der Austausch nicht nur anhand der Desktop-Vorschau beurteilt werden.

Prüfen Sie, ob der wichtigste Motivbereich bei typischen Desktop-, Tablet- und Smartphone-Breiten erkennbar bleibt. Bei Personen sollten Köpfe und Gesichter nicht abgeschnitten werden. Bei Produkten, Gebäuden oder technischen Darstellungen muss das inhaltlich entscheidende Element erhalten bleiben. Gegebenenfalls sind getrennte Bildvarianten für Desktop und Mobil sinnvoll.

Lesbarer Text sollte möglichst nicht fest in ein Bild eingebaut werden. Er kann bei einer Verkleinerung unleserlich werden, lässt sich von Hilfsmitteln nicht wie normaler Seitentext erfassen und ist bei späteren Änderungen nur über eine neue Bilddatei anpassbar.

Wie lässt sich ein Bild sicher auf der Website ersetzen?

Vor dem Austausch sollte bekannt sein, ob die bisherige Datei nur einmal oder an mehreren Stellen verwendet wird. Ein Bild in der Mediathek kann gleichzeitig auf unterschiedlichen Seiten, in Beiträgen, Galerien oder globalen Vorlagen eingebunden sein. Wird die Datei unmittelbar gelöscht oder überschrieben, können deshalb unbeabsichtigte Änderungen entstehen.

1. Die betroffene Seite und die genaue Position des bisherigen Bildes werden eindeutig festgehalten.
2. Das neue Bild wird auf Motiv, Rechte, Abmessungen, Seitenverhältnis und Dateiformat geprüft.
3. Die Datei wird passend zugeschnitten, komprimiert und verständlich benannt.
4. Das Bild wird im verwendeten System hochgeladen und dem richtigen Inhaltselement zugewiesen.
5. Alternativtext und gegebenenfalls Bildunterschrift werden für den konkreten Kontext eingetragen.
6. Die geänderte Seite wird vor und nach der Veröffentlichung vollständig kontrolliert.

Wird eine Datei unter demselben Namen oder derselben Adresse ersetzt, können Browser-, Website- oder CDN-Caches vorübergehend weiterhin das alte Bild anzeigen. In diesem Fall müssen die betreffenden Caches kontrolliert geleert oder die Bildadresse eindeutig geändert werden. Die bisherige Datei sollte erst entfernt werden, wenn ihre Verwendung geprüft und der Austausch bestätigt wurde.

Was sollte nach dem Bildaustausch geprüft werden?

Rufen Sie die veröffentlichte Seite außerhalb des Bearbeitungsmodus auf und kontrollieren Sie das Bild in seiner tatsächlichen Umgebung. Dabei sollte geprüft werden, ob die richtige Datei geladen wird, der Ausschnitt stimmt und das Bild weder verzerrt noch sichtbar unscharf erscheint. Ein privates Browserfenster kann helfen, Auswirkungen einer Anmeldung oder lokaler Browserdaten auszuschließen.

Die Kontrolle sollte außerdem typische Desktop-, Tablet- und Smartphone-Breiten umfassen. Achten Sie auf Abstände, überlagerte Inhalte, verschobene Buttons und unerwartete Höhenänderungen. Bei Galerien, Slidern oder verlinkten Bildern müssen auch Vergrößerung, Navigation und Linkziel praktisch getestet werden.

Bleibt das alte Bild sichtbar, liegt nicht zwangsläufig eine fehlerhafte Einpflege vor. Häufig wird noch eine zwischengespeicherte Variante ausgeliefert. Kontrollieren Sie deshalb Website-, Server- und CDN-Caches. Prüfen Sie abschließend auch Ladezeit, Alt-Text und gegebenenfalls die Darstellung des Bildes in Vorschaukacheln oder geteilten Beiträgen.

Wann können Sie Bilder selbst austauschen und wann ist Unterstützung sinnvoll?

Ein einzelnes Bild können Sie selbst austauschen, wenn Sie die Bearbeitungsstelle kennen, das neue Bild bereits passend vorbereitet wurde und der vorhandene Bildbereich keine besonderen Zuschnitte oder Gerätevarianten verwendet. Auch dann sollte die öffentliche Darstellung anschließend sorgfältig geprüft werden.

Unterstützung ist sinnvoll, wenn Bilder in globalen Vorlagen, mehreren Seiten, Galerien oder unterschiedlichen Desktop- und Mobilversionen eingebunden sind. Gleiches gilt, wenn Abmessungen und Zuschnitt unklar sind, die Website sehr große Dateien lädt oder trotz des Austauschs weiterhin alte Bildvarianten erscheinen.

Eine professionelle Website-Inhaltspflege kann Bildauswahl, Zuschnitt, Optimierung, Einpflege und Darstellungskontrolle miteinander verbinden. Wenn Sie einzelne oder mehrere Bilder auf Ihrer Website austauschen lassen möchten, können Sie über die Anfrage zur Website-Inhaltspflege die betroffenen Seiten und vorhandenen Bilddateien übermitteln.

Weitere Ratgeber

Passende Beiträge zum Thema

Weitere Ratgeber, die zu diesem Thema passen und bei Wartung, Sicherheit, Updates oder Backups weiterhelfen.