Bildauswahl für Webseiten

Du bist Redakteur:in einer Webseite? Oder wurdest schon mit der Bildauswahl für einen Beitrag beauftragt? Dann sind dir die Herausforderungen bei Bildern bestimmt schon einmal untergekommen. Mal sind sie zu pixelig, mal stimmt der Ausschnitt nicht und das richtige Bild zu finden ist ohnehin schon schwierig genug.

Bevor wir darüber sprechen, wie du Bilder richtig einsetzt, sollten wir uns über den richtigen Zeitpunkt der Bildauswahl unterhalten. Wann ist es an der Zeit, sich Gedanken über die Bilder zu machen, die du auf deiner Webseite nutzen möchtest? Im besten Fall sprichst du schon bei der Entwicklung der Webseite darüber, welche Art von Bildern du für deine Webseite nutzen möchtest und welche Datenbanken dir dabei zur Verfügung stehen. Es ist ein Riesen-Unterschied ob du deine Bilder selbst produzieren kannst, öffentliche Datenbanken nutzen möchtest oder überhaupt die Bilder deiner alten Webseite verwenden willst.

Aber egal ob du deine Webseite neu gestaltest oder dir berechtigte Gedanken über deine Bildsprache machst, in diesem Blogbeitrag erklären wir dir:

• Was du bei der Auswahl der Bilder beachten musst,
• welche technischen Anforderungen dein Bild erfüllen muss
• und welche Gratis-Tools man verwenden kann, um das eine ganz ganz ganz tolle Bild vielleicht doch noch ins richtige Format zu bekommen.

Der Weg zum richtigen Bild

Zuallererst ist immer wichtig herauszufinden wofür du dein Bild einsetzen möchtest. Die Aufmerksamkeitsspanne im Internet ist kurz. Wenn Besucher:innen mit zu viel Informationen erschlagen werden, finden sie in den meisten Fällen ganz leicht andere Webseiten auf denen die Information mehr nach ihrem Geschmack aufbereitet ist. Die wichtigste Frage ist also: Welchen Zweck erfüllt mein Bild und wo lade ich es hoch? Um diesen Schritt des Prozesses zu erleichtern kannst du die Methode der Personas nutzen.

Titelbilder

Titelbilder sind im Optimalfall dekorativ und illustrieren ein Thema, anstatt konkrete Informationen zu übermitteln. Sie sind oft das erste was man sieht, wenn man auf eine Webseite kommt. Denk an dein eigenes Surf-Verhalten. Oft sucht man nach spezifischen Inhalten und klopft eine Suchanfrage in Google ein. Nicht immer kommt man als Ergebnis auf die Startseite, meistens landet man schon direkt an der Stelle, wo man hin möchte.

Inhaltsseiten bieten sich also gut an, um mit Titelbildern Besucher:innen auf den Flair der Seite einzustimmen. Dabei muss keine Information übermittelt werden, diese findet sich im Text und in anderen Elementen wieder.

Achte also bei der Bildauswahl darauf, dass deine Titelbilder

• keine oder wenig tatsächliche Informationen beinhalten,
• die Besucher:innen auf das Thema einstimmen und die gewünschten Emotionen wecken
• und den gegebenen Platz ordentlich nutzen.

Vorschaubilder

Webseiten bieten meist die Möglichkeit, dass Titelbilder von Seiten oder Beiträgen in anderen Ansichten (z.B. Listenansichten) mit einem kleineren Vorschaubild dargestellt werden. Wir Techniker:innen sagen auch Teaserbild dazu. Und oft ist das Format dieses Bildes ein anderes als beim Titelbild. Je nachdem wie es bei deiner Webseite ist, musst du das bei deiner Auswahl mitbedenken. Was jedoch immer gilt, ist dass die Vorschaubilder in Listenansichten oder anderen Darstellungen mit anderen Bildern zu sehen sind. Konzentriere dich deshalb darauf, Bilder zu wählen die dekorativ sind und die Information unterstreichen, die durch Titel und Vorschautext gegeben sind.

Wenn du deine Vorschaubilder extra hochladen kannst, achte bei der Bildauswahl darauf, dass

• es nicht zu detailreich ist und auch in kleinerer Darstellung gut wirkt. Auf kleinen Bildern sind viele Details nicht mehr erkennbar.
• dieses Bild meist mit vielen anderen Bildern konkurriert (damit hier kein Chaos entsteht, kann eine festgelegte Bildsprache helfen).
• das Bild inhaltlich zum Titelbild passt und die gleiche Botschaft sendet, wenn sich die beiden unterschieden.

Bilder im Text

Den Wechsel von dekorativ zu informativ solltest du bei Bildern im Text machen. Auch wenn in diesem Kontext Bilder oft zur Auflockerung eingesetzt werden, sollten sie sich wenn möglich auf den Inhalt beziehen und ihn komplementieren. Aber nichts einfacher als das, denn Bilder sagen mehr als 1000 Worte. Zeig worüber du schreibst. Visualisiere Daten, indem du Grafiken nutzt. Bezieh dich in der Bildbeschreibung auf den Inhalt und erkläre warum du jetzt gerade dieses Bild einsetzt.

Ein besonderer Punkt aus Sicht der Barrierefreiheit sind die Alternativtexte. Diese sind vor allem bei Bildern im Text wichtig, da diese ja informativ sein sollen. Beschreibe in deinen Alternativtexten die Information, die durch das Bild geliefert wird. Wenn du zum Beispiel eine Gruppe Personen zeigst, beschreibe wer zu sehen ist, statt zu erkären welche Farbe die Kleidung der Personen hat. Mehr zum Thema Alternativtexte findest du in unserem Blogartikel zur Barrierefreiheit.

Wenn du deinen Text also mit Bildern auflockern möchtest denk bei der Bildauswahl daran, dass

• sie den Inhalt ergänzen sollten
• die Platzierung im Text sinnvoll ist
• die Bildbeschreibungen ihrer klar definierten Aufgabe nachkommen sollten. Oder nutze sie für Ergänzungen, wie zum Beispiel Foto-Credits.
• der Alternativtext den Inhalt des Bildes sinnvoll beschreibt, sodass Besucher:innen die sich die Seite vorlesen lassen einen Mehrwert davon haben.

Galerie

Manchmal reicht ein Bild allein nicht aus, um die gewünschten Eindrücke zu vermitteln. Hier helfen Galerien. Denk dabei aber daran, wie wird das später angeschaut? Die Galerie ist ein Element durch das man sich navigieren muss. Das heißt, jedes Bild das über die erste Ansicht hinausgeht bedeutet einen Klick mehr für die Besucher:innen.

• nicht zu viele Bilder (wir empfehlen bis zu 10 pro Galerie)
• ähnliche Bildformate zu verwenden hilft dabei, ein einheitliches Gesamtbild zu schaffen

Album

Brauchst du regelmäßig die Möglichkeit, eine große Anzahl an Bildern darzustellen? Hier kann eine Art Album Abhilfe schaffen. Der Unterschied zur Galerie liegt im Einsatz und in der Nutzungsform. Dieses Element solltest du möglichst alleinstehend nutzen. Bei einer hohen Anzahl an Bildern reicht ein kurzer Einleitungsabsatz aus, um den Kontext herzustellen. Die vielen Eindrücke sind für eine Seite genug Information. Wichtig ist hier, dass die Bilder schon groß genug dargestellt sind, damit Besucher:innen sich allein durch Scrollen schon einen guten Überblick verschaffen können.

Lightbox

Bei Galerien und Alben gibt es zusätzlich zur Möglichkeit, mehrere Bilder zu gruppieren auch meist die Option diese anzuklicken und vergrößert anzuzeigen. In manchen Fällen geht das auch bei Bildern im Text. Diese vergrößerte Darstellung nennt man "Lightbox". Achte darauf, dass du die Bilder dafür in ausreichender Größe hochlädst. Wenn du also eine Galerie erstellst denk daran, dass die Bilder dort verkleinert dargestellt werden, Besucher:innen sie aber später vergrößern können. Neben den Punkten die wir bei "Galerie" und "Album" erwähnt haben solltest du dich bei der Bildgröße an der vergrößerten Darstellung orientieren.

Welche technischen Anforderungen muss ich bei der Bildauswahl beachten?

Oft ist es so, dass wir uns über die Auswahl von Bildern erst wieder richtig Gedanken machen, wenn die Webseite neu gestaltet wird. Welche neuen Arten von Bildern kann ich nutzen? Kann ich die Bilder von der alten Webseite verwenden? Das sind gute Fragen, bei deiner Bildauswahl solltest du folgende Punkte unbedingt beachten:

• Verwende Bilder in ihrem Originalzustand. Wenn du Bilder von bestehenden Webseiten verwendest, sind diese oft schon komprimiert und verlieren dadurch an Qualität. Das kann zu eigenartigen Darstellungen oder unscharfen Bildern führen.
• Verwende Bilder in hoher Qualität. Nutze für deine Bildsuche Datenbanken, die Bilder in guter Qualität und hoher Auflösung zur Verfügung stellen. Wenn du die Fotos selbst machst, wende dich an deine Entwickler und versuche, deine Bilder in der nötigen Qualität und Größe zu liefern. Auch wenn es zu langen Ladezeiten kommt sprich mit deinen Entwickler:innen und versuch gemeinsam herauszufinden woran das liegt.
• Beachte das Zielformat. Für alle Einsatzgebiete von Bildern auf deiner Webseite gibt es Formatvorgaben. Manche sind im Querformat, manche quadratisch und vielleicht gibt es auch welche, die ein Hochformat verlangen. Wenn du dein Bild schon vorher zuschneidest, hast du mehr Kontrolle darüber welcher Ausschnitt später gezeigt wird. Im Zweifelsfall ist es aber am Besten du sprichst mit den Entwickler:innen deiner Webseite.

Wie kann ich mein Bild anpassen?

Wenn du ein Bild hast, das du unbedingt verwenden möchtest, der Bildausschnitt aber immer wieder verrutscht oder nicht genau dort ist wo du es dir vorstellst gibt es ein paar Workarounds:

• Canva ist ein Tool mit dem du ganz einfach Bilder zurechtschneiden kannst. Es ist zwar eigentlich für Social Media gedacht, eignet sich aber auch wunderbar für andere Anwendungsfälle bei denen es fixe Formate braucht. Leg in der Gratis-Version einfach eine Vorlage an, die benötigten Maße hat, füge dein Bild dort ein und exportiere es nachdem du deinen gewünschten Ausschnitt gewählt hast.
• Manche CMS (Contentmanagement Systeme) bieten eigene Tools an um den richtigen Bildausschnitt zu wählen. Sprich mit deinen Entwicklern ob dein CMS diese Funktion anbietet.
• Der Klassiker für Bildbearbeitung sind Adobe Programme wie Photoshop oder Lightroom. Diese Tools mögen überwältigend sein, weil sie so viel können, aber lass dich davon nicht abschrecken. Dein Bild kannst du zum Beispiel in Photoshop ganz einfach mit Hilfe dieser Anleitung zuschneiden.

Hast du noch Fragen zur Bildauswahl oder brauchst Hilfe bei der Erstellung einer Bildsprache für deine Webseite? Schreib einfach unseren Expert:innen unter office@datenwerk.at.