Es gibt eine Reihe von Gründen, Bilder im Fragebogen zu verwenden: Der Stimulus im Befragungsexperiment, das Uni- oder Firmen-Logo auf jeder Seite, ein Logo oder die gescannte Unterschrift für die Begrüßung.
Dieses Kapitel erklärt, wie man Bilder für die Darstellung im Internet optimiert und sie anschließend in den Fragebogen einfügt. Vorweg allerdings eine Warnung.
Sowohl Fotos wie auch Abbildungen (z.B. ein Ausschnitt einer Landkarte) unterliegen in aller Regel dem Urheberrecht. Falls auf einem Bild Personen abgebildet werden, unterliegt das Bild zusätzlich dem Persönlichkeitsrecht.
Wenn Sie ein fremdes Bild (z.B. aus dem Internet) oder das Bild einer Person verwenden, drohen – neben Schadensersatz-Forderungen – horrende Anwaltsrechnungen. Mehr Informationen dazu finden Sie im Internet unter dem Begriff „Abmahnung“.
Deshalb brauchen Sie immer eine schriftliche Genehmigung des Urhebers zur Verwendung des Bildes (Verwertungs- bzw. Nutzungsrecht). Weiterhin benötigen Sie schriftliche Genehmigungen der abgebildeten Personen. Ausnahmen sind freie Bilddatenbanken – allerdings können hier andere Einschränkungen gelten (z.B. dass der Urheber angegeben werden muss).
Bilder lagern im Internet als eigenständige Dateien, die über eine Internet-Adresse (URL) abgerufen werden. Daher erfolgt die Verwendung von Bildern im Fragebogen jeweils in zwei Schritten:
Wenn Sie ein Bild mittels HTML-Code einbinden, können Sie die Platzierung genauer justieren. Folgender HTML-Code zeigt das Bild bild.jpg
mittig an und lässt oben/unten 40 Pixel Abstand zu anderen Inhalten.
<div style="text-align: center; margin: 40px 0"> <img src="bild.jpg" alt="Bild einer Frau"> </div>
Der folgende HTML-Code zeigt ein Bild rechtbündig an und lässt links davon mit 20 Pixel Abstand Text fließen. Dies könnte z.B. im Fragetext zum Einsatz kommen.
<img src="bild.jpg" alt="Bild einer Frau" style="float: right; margin-left: 10px">
Bitte sehen Sie das Bild auf der rechten Seite genau an.
Beurteilen Sie das Bild anschließend anhand der Aussagen, die Sie unten lesen.
Für umfließenden Text können Sie auch auf die vordefinierten CSS-Klassen „left“ und „right“ zurückgreifen.
<img src="bild.jpg" alt="Bild einer Frau" class="right">
Bitte sehen Sie das Bild auf der rechten Seite genau an.
Hinweis: Prinzipiell können Sie mittels HTML-Code auch Bilder im Fragebogen verwenden, die auf einem anderen Webserver lagern. Allerdings bleibt die rechtliche Problematik der Verwendung weiterhin bestehen – und das Bild sollte via verschlüsseltem HTTPS-Protokoll abrufbar sein, wenn der Fragebogen ebenfalls verschlüsselt übermittelt wird, sonst zeigen manche Internet-Browser eine Sicherheitswarnung.
Tipp: Wenn Sie ein Bild als Logo auf jeder Seite des Fragebogens anzeigen möchten, laden Sie es nicht regulär hoch, sondern unter Impressum und Logo im Karteireiter Logo.
Damit ein Bild im Fragebogen korrekt und sauber angezeigt wird, sind einige Vorbereitungen notwendig. Meist muss das Bild auf die richtige Größe skaliert und anschließend in einem Internet-tauglichen Dateiformat (z.B. GIF, PNG oder JPG) gespeichert werden.
Für die Aufbereitung von Bildern für das Internet benötigen Sie eine Software zur Bildbearbeitung. Falls Sie keine derartige Software zur Hand haben, können Sie sich das hervorragende Open Source-Programm GIMP kostenlos herunterladen.
Wie groß ein Bild im Fragebogen dargestellt wird, hängt von der Pixel-Größe ab. Ein Pixel entspricht (meistens) einen Bildpunkt auf dem Bildschirm. Stellen Sie die Vergrößerung/Zoom in Ihrer Bildverarbeitung auf 100%, um die Original-Größe des Bildes zu sehen.
Das Bild skalieren Sie wie folgt:
<img src="..." style="max-width: 100%">
, damit ein eingebundenes Bild automatisch verkleinert wird.Die Farbtiefe beschreibt, wie viele Farben ein Bildpunkt im Bild annehmen kann. Ein gewöhnlicher Bildschirm kann ca. 16 Mio. verschiedene Farben darstellen (24 Bit - jeweils 8 Bit bzw. 256 Abstufungen für die Grundfarben rot, grün und blau). Gerade in Grafiken (z.B. Diagramme, Screenshots einer Website, schematische Darstellungen) braucht man aber nur einen Bruchteil davon: So benötigt ein Schwarz-Weiß-Bild (Strichzeichnung) nur 2 Farben, ein Bild in Graustufen nur 8 Bit (265 Graustufen) oder weniger. Auch ein buntes Diagramm kommt u.U. mit wenigen Farben aus. Fotos benötigen hingegen meist die volle Farbtiefe.
Die Farbtiefe hängt wesentlich mit dem verwendeten Dateiformat zusammen:
Beispiele für Bilder und Grafiken (je 100 × 100 Pixel)
Foto (JPG) 85% Qualität | Foto (JPG) 15% Qualität | Auf 8 Farben reduziert (PNG) | Grafik (PNG) 8 Farben | Grafik (PNG) 8 Farben |
Der weit verbreitete PlugIn „uBlock Origin“ identifiziert bestimmte Dateinamen als Werbeanzeigen (Advertising). Vermeiden Sie Dateinamen, die mit einem „AD“ beginnen (z.B. „AD1_new.jpeg“). Testen Sie Ihren Fragebogen in unterschiedlichen Browsern und mit aktiven Werbe-Blockern.
Über den Menüpunkt Bilder und Mediendateien können Sie ein Bild in Ihr Projektverzeichnis hochladen. Wählen Sie dafür den Karteireiter Bilder hochladen.
pro://
vorangestellt werden muss.Für das Einbinden gibt es mehrere Möglichkeiten:
Um ein Bild via HTML einzubinden, benötigen Sie lediglich das HTML-Tag <img>
. Als Attribut muss man die Adresse des Bildes als Quelle (Source, src
) angeben. Außerdem sollte man einen alternativen Text (alt
) angeben, der angezeigt wird, falls das Bild aus irgend einem Grund nicht angezeigt werden kann. Um den Fragebogen barrierefrei zu gestalten, kann mittels title
noch eine Beschreibung des Bildinhaltes ergänzt werden.
Hat man ein Bild in das Projektverzeichnis hochgeladen, ist die Adresse (src
) einfach der Dateiname des Bildes. Die Absatz-Tags <p> im folgenden Beispiel sorgen dafür, dass das Bild in einem eigenen Absatz erscheint und nicht mitten im Text.
<p>Text über dem Bild.</p> <p><img src="bild.gif" alt="Rosa Elefant"></p> <p>Text unter dem Bild</p>
In SoSci Survey sind zwei CSS-Klassen (class
) definiert, mit denen Sie ein Bild so platzieren können, dass der Text außen herum läuft: left
und right
. Wenn ein Bild also rechts vom Text erscheinen soll, so wird dem <img>-Tag die Klasse right
als Attribut hinzugefügt:
<h1>Willkommen</h1> <p><img src="https://www.soscisurvey.de/homepage/sosci.logo.png" alt="SoSci Survey" class="right"> Dies ist ein Beispieltext, der demonstriert, wie ein Bild rechts vom Text platziert werden kann.</p>
HTML erlaubt eine Vielzahl an Optionen beim Einbinden von Bildern – mehr dazu bei SelfHTML: Grafiken und SelfHTML: CSS-Eigenschaften.
Man kann Bilder auch direkt in Fragen und Items einfügen. Auch dafür verwendet man das HTML-Tag <img>
.
So kann man die verbale Verankerung in einer Skala mit Zwischenwerten grafisch gestalten oder in einer Horizontalen Auswahl zwischen Bildern auswählen lassen.
Tipp: Sie müssen das <img>
-Tag nicht selbst schreiben. Öffnen Sie Bilder und Mediendateien und klicken Sie auf das gewünschte Bild. Sogleich erscheint der HTML-Code.
Hinweis: Die folgenden Beispiele verwenden als Bild-Adresse eine spezielle Notation: ofb://bildname
. Damit lassen sich einige Bilder einbinden, die in SoSci Survey standardmäßig enthalten sind (z.B. eine Kunin- und eine Daumen-Skala). Wenn Sie die Bilder selbst hochladen, verwenden Sie den Dateinamen des Bildes.
Hinweis: Im Internet gilt die Groß- und Kleinschreibung. Bild.gif
ist nicht dasselbe wie bild.gif
. Falls ein Bild nicht angezeigt wird, sollten Sie als erstes die Schreibung und die Endung überprüfen. Vermeiden Sie Leerzeichen in Dateinamen.