Fotos in Artikeln mit Text und Bild richtig dimensionieren und platzieren
Damit ein Artikel gut lesbar bleibt, dimensionieren Sie jedes Foto passend zu seiner Funktion: Geben Sie einem Bild, das wichtige Belege oder Kontext liefert, ausreichend Raum, um erkennbar zu sein, und halten Sie ein unterstützendes Bild kleiner, wenn der umgebende Text den Sachverhalt bereits erklärt. Platzieren Sie es neben der Passage, die es verdeutlicht, wahren Sie eine klare Lesereihenfolge und prüfen Sie das Layout bei schmalen Bildschirmbreiten. Dieser Leitfaden konzentriert sich auf die Anordnung von Fotos in einem digitalen Artikel; dieselben zweckorientierten Entscheidungen können auch ein Print-Layout leiten, doch das Verhalten auf Bildschirmen erfordert eine eigene Überprüfung.
Beginnen Sie mit der Funktion des Fotos
Bevor Sie ein Foto verschieben oder in der Größe anpassen, entscheiden Sie, was die Leserschaft daraus mitnehmen soll. Handelt es sich um einen Beleg, der genau betrachtet werden muss, um ein Beispiel, das eine Passage anschaulicher macht, oder um reine Dekoration? Diese Unterscheidung ist nützlicher, als von einer voreingestellten Bildbreite auszugehen.
Wenn das Foto Informationen transportiert, die im Text fehlen, geben Sie ihm genügend Raum, damit die relevanten Details lesbar sind. Ein kleines Bild eines Dokuments, Objekts oder Prozesses verfehlt möglicherweise seine Hauptaufgabe, wenn die Leser es nicht genau untersuchen können. Illustriert das Foto lediglich einen bereits im Text erläuterten Punkt, reicht oft eine kleinere Abbildung – oder das Bild ist gar nicht nötig. Dies ist eine praktische Gestaltungsregel, die sich aus dem Zweck des Fotos ableitet, kein universeller Größenstandard. Die Bildrichtlinien des GOV.UK Design Systems besagen ähnlich, dass Bilder einem echten Nutzerbedürfnis entsprechen und als visuelle Hilfen dienen sollten, während erforderliche Informationen in Textform verfügbar bleiben müssen. Diese Empfehlungen wurden für Online-Dienste von Behörden verfasst; betrachten Sie sie daher eher als nützliche Referenz denn als starres Regelwerk für jede Art von Artikel.
Eine hilfreiche Entscheidungshilfe besteht darin, jedem Foto eine von drei Rollen zuzuweisen: Prüfen, Illustrieren oder Dekorieren. „Prüfen“ erfordert in der Regel eine größere Darstellung und eine Erklärung oder Bildunterschrift, die den Blick auf das relevante Detail lenkt. „Illustrieren“ kann oft in moderater Größe nahe dem Absatz stehen, den es unterstützt. „Dekorieren“ hat keine informative Funktion; erwägen Sie, es wegzulassen oder visuell dezent zu halten. Diese Kategorien sind ein praktisches redaktionelles Werkzeug, keine von den Quellen vorgegebene Terminologie.
Wählen Sie die Größe nach Bedeutung und verfügbarem Platz
Nutzen Sie die Textspalte des Artikels als Ausgangsgrenze. Ein Foto, das sich über die gesamte Spaltenbreite erstreckt, fällt sofort ins Auge und gibt detaillierten Inhalten mehr Raum; reservieren Sie diese Darstellung für Bilder, deren Bedeutung die visuelle Pause rechtfertigt. Ein kleineres, an der Spalte ausgerichtetes Foto kann einen nahegelegenen Punkt unterstützen, ohne mit der Überschrift oder dem Text zu konkurrieren. Vermeiden Sie es, eine Größe nur deshalb zu wählen, weil die Originaldatei groß ist: Die Anzeigemaße sollten zum Layout und zu den Informationen passen, die die Leserschaft sehen muss.
Hier ist ein anschauliches Beispiel, keine getestete Vorlage: Angenommen, eine 700 Pixel breite Inhaltsspalte enthält ein Foto, das ein zweiteiliges Objekt zeigt, dessen Unterschied für die Textpassage zentral ist. Eine Darstellung nahe der vollen Spaltenbreite kann den Vergleich erleichtern. Dient dasselbe Foto nur dazu, eine allgemeine Stimmung zu vermitteln, und der Absatz enthält die eigentliche Erklärung, kann eine schmalere Darstellung die Betonung auf dem Text belassen. Die Zahl von 700 Pixeln ist lediglich ein Beispiel für eine Spaltenbreite, kein empfohlener Standard.
Wenn ein Foto auf einem breiten Bildschirm neben dem Text erscheint, betrachten Sie beides als zusammengehörige Einheit. Geben Sie dem Bild genügend Breite, um sein Motiv zu zeigen, und dem Text genügend Raum, um angenehm lesbar zu bleiben. Wenn eines von beiden eingeengt wirkt, stapeln Sie die Elemente untereinander, anstatt das Foto zu verkleinern und den Text in einen schmalen Streifen zu quetschen. Auf kleineren Bildschirmen ist eine einspaltige Abfolge oft die klarste Lösung: Text, dann das zugehörige Foto, dann der nächste Abschnitt. Die Erläuterung des W3C zu WCAG 2.2 Reflow beschreibt, wie sich viele Artikelseiten an eine einzelne Spalte anpassen können, und erklärt das Ziel, zweidimensionales Scrollen bei regulären Leseinhalten zu vermeiden. Sie nennt auch Ausnahmen für Inhalte, deren Bedeutung oder Nutzung ein zweidimensionales Layout erfordert. Entscheidend für das Artikellayout ist sicherzustellen, dass eine Bild-Text-Kombination die Leser nicht dazu zwingt, seitlich zu scrollen, um dem Text zu folgen.
Platzieren Sie jedes Foto dort, wo der Zusammenhang klar ist
Platzieren Sie das Foto in der Nähe des Satzes oder Absatzes, der erklärt, warum es dort zu sehen ist. Wenn Leser an mehreren nicht zusammenhängenden Absätzen vorbeiscrollen müssen, um das Bild zu finden, wird die Verbindung unklar. Ebenso kann ein großes Foto mitten in der Argumentation eines Satzes den logischen Fluss unterbrechen. Eine saubere Platzierung ist meist nach der ersten Passage, die das Thema einführt, oder direkt vor einem Handlungsschritt, an dem das Bild gebraucht wird.
Verwenden Sie eine Bildunterschrift, wenn sie etwas Konkretes ergänzt: Benennen Sie das Motiv, heben Sie ein Detail hervor oder erklären Sie, warum das Bild relevant ist. Verwenden Sie die Bildunterschrift nicht, um den umgebenden Satz wortwörtlich zu wiederholen. Erfordert das Foto eine genaue Betrachtung, erwähnen Sie sowohl im angrenzenden Text als auch in der Bildunterschrift, worauf zu achten ist; Leser sollten den Sinn nicht allein aus der Platzierung ableiten müssen.
Die Beziehung zwischen einem Foto und seinem Text ist auch für das nicht-visuelle Lesen von Bedeutung. Das Images Tutorial des W3C besagt, dass informative Bilder Textalternativen benötigen, die ihre wesentlichen Informationen vermitteln, während rein dekorative Bilder eine leere Textalternative erhalten können, damit assistive Technologien sie überspringen. Der W3C-Leitfaden für informative Bilder betont, dass die Alternative die Bedeutung des Bildes im jeweiligen Kontext wiedergeben sollte, anstatt lediglich sichtbare Objekte aufzulisten. Stellen Sie sich als praktischen Test die Frage: Welche Information würde jemandem fehlen, der dieses Foto nicht sehen kann? Fügen Sie wesentliche Informationen in den Artikeltext ein und versehen Sie das Bild mit einer passenden Textalternative. Bringt das Bild über den angrenzenden Text hinaus keinen Mehrwert, ist eine Wiederholung der Beschreibung eventuell unnötig.
Erhalten Sie die nützlichen Proportionen des Fotos
Das Seitenverhältnis eines Fotos – die Beziehung zwischen Breite und Höhe – bestimmt den benötigten Platz und was sichtbar bleibt. Passen Sie zunächst das gesamte Foto in den vorgesehenen Bereich ein. Schneiden Sie es nur zu, wenn das Hauptmotiv klar erkennbar bleibt und durch den Beschnitt keine Details verloren gehen, die für das Verständnis erforderlich sind. Ein Querformat eignet sich oft als breites Aufmacherbild; ein Hochformat wirkt innerhalb der Spalte meist bei geringerer Breite besser. Dies sind gestalterische Entscheidungen, keine festen Vorgaben.
Wenn ein Bildausschnitt den Kontext entfernt, die scheinbare Bedeutung verändert oder ein im Artikel besprochenes Detail abschneidet, wählen Sie einen anderen Zuschnitt oder belassen Sie das Bild in seinen ursprünglichen Proportionen. Überprüfen Sie bei Diagrammen, Beschriftungen oder Dokumenten die endgültige Anzeigegröße: Im Bild eingebetteter Text kann sonst zu klein zum Lesen werden. Die GOV.UK-Bildrichtlinien raten generell davon ab, Text in Bilder einzubinden, da dieser schwer lesbar, kopierbar, skalierbar oder für Screenreader unzugänglich sein kann; ist Text im Bild unverzichtbar, sollte die Bedeutung auch im umgebenden Fließtext erklärt werden.
Prüfen Sie das Layout in den Formaten Ihrer Leser
Sehen Sie sich den Artikel vorab sowohl in einer breiten Desktop-Ansicht als auch in einer schmalen mobilen Ansicht an. Stellen Sie sicher, dass das Foto nicht über die Textspalte hinausragt, Inhalte verdeckt oder den danebenliegenden Text unleserlich zusammenquetscht. Verfolgen Sie den Lesefluss von der Überschrift über den Absatz bis zum Foto: Auch wenn das Layout responsiv umbricht und die Elemente untereinander anordnet, sollte das Bild nah an der erklärten Passage bleiben. Kontrollieren Sie zudem Bildunterschriften und alle wichtigen Details im Bild in der tatsächlichen Anzeigegröße.
Auf Webseiten sind Anzeigegröße und Dateigröße zwei getrennte Faktoren. Für eine großflächige Darstellung ist unter Umständen eine hochauflösende Quelldatei nötig, doch das Laden unnötig großer Bilddateien auf kleineren Bildschirmen verbraucht unnötig Datenvolumen. Der Leitfaden von Google web.dev zu responsiven Bildern beschreibt, wie Browser abhängig von den Darstellungsbedingungen passende Bildgrößen auswählen können, und betont, dass es keine pauschal richtige Anzahl an Bildvarianten gibt. Dies sind technische Empfehlungen für die Veröffentlichung im Web; sie bestimmen nicht, an welche Stelle im Artikel ein Bild gehört.
Ein schneller Ablauf zur Entscheidungsfindung
Benennen Sie die Aufgabe. Soll das Foto im Detail betrachtet werden, den Text illustrieren oder lediglich die Seite dekorieren?
Finden Sie den passenden Bezugspunkt. Bestimmen Sie den Textabschnitt, der das Bild einführt oder darauf angewiesen ist, und platzieren Sie das Foto direkt daneben.
Legen Sie die Anzeigebreite fest. Geben Sie zentralen Belegen genügend Raum; lassen Sie rein unterstützende Fotos weniger Platz einnehmen, wenn Details nicht essenziell sind.
Prüfen Sie den Bildausschnitt. Achten Sie darauf, dass das Hauptmotiv und jeglicher relevante Kontext sichtbar bleiben.
Lesen Sie das Layout schrittweise durch. Überprüfen Sie auf einem schmalen Bildschirm, ob Text und Foto noch in einer sinnvollen Reihenfolge erscheinen und der Text angenehm lesbar bleibt.
Beschreiben Sie den Bildinhalt. Fügen Sie eine Bildunterschrift hinzu, wenn sie dem Verständnis hilft, und hinterlegen Sie eine Textalternative, die der Rolle des Bildes entspricht.
Die Grundregel ist einfach: Bestimmen Sie die visuelle Präsenz nach der Bedeutung, wählen Sie die Platzierung passend zum zugehörigen Text und prüfen Sie in der Mobilansicht, ob die Anordnung funktioniert. Ist das Foto in der gewählten Größe schwer verständlich, vergrößern Sie es, vereinfachen Sie den Bildausschnitt oder erklären Sie das relevante Detail im Text.