Gestalten mit Bildern

Verwenden Sie Bilder um Inhalte und Zusammenhänge zu veranschaulichen und textlastige Seiten aufzulockern.


Dateiformate

Im Web ist die Darstellung von Bildern auf wenige Dateiformate beschränkt (die meisten davon sind komprimiert). Wir konzentrieren uns auf die drei gängigsten.

DateiformatGut geeignet fürKompressionFarbenTransparenz
gif Logos, Zeichnungen, Grafiken mit großen einfärbigen Flächen, Text als Grafik verlustfrei 256 ja, eine Farbe
jpg Fotos, detailreiche Grafiken mit vielen Farben mit Qualitätsverlust 16,7 Mio. nein
png Für praktisch jede Anwendung, besonders aber die Kombination aus Bild und Text verlustfrei (Dateigröße in der Regel größer als bei jpg und gif) 16,7 Mio. ja, mehrstufig


Diese Formate können Sie mit jedem gängigen Grafikprogramm erstellen, z. B. mit dem auf jedem PC der Universität installierten IrfanView (das Programm ist übrigens freeware, also kostenlos, wenn Sie es auch zuhause verwenden möchten).

Das ideale Format für Ihre Zwecke erzielt einen guten Kompromiss aus Qualität und Dateigröße – in obiger Tabelle haben wir für Sie ein paar typische Anwendungsfälle skizziert, die Sie bei der Wahl des richtigen Formats unterstützen sollen.


Abmessungen und Dateigröße

Ihre Bilder sollten eine Breite von 695 Pixeln nicht überschreiten (das gilt im Übrigen für alle grafischen Elemente), da sonst das Layout von www.uibk.ac.at „zerrissen“ wird.

Bilder auf Webseiten sollten aber auch von der Dateigröße her möglichst klein sein. Jedes Bild, das sich ein Besucher ansieht, muss dazu heruntergeladen werden; das belastet die Interverbindung des Besuchers sowie die Server der Universität Innsbruck und verzögert die Darstellung der Seite beim Besucher.

Ein Bild direkt von einer Digitalkamera ist in doppelter Hinsicht zu groß für unsere Zwecke: einerseits in den Abmessungen (Breite und Höhe in Pixeln; bei modernen Kameras mehrere 1.000), andererseits in der Datenmenge (bei modernen Kameras einige MB). Verkleinern Sie daher Ihre Bilder vor dem Upload immer mit einem Grafikprogramm (wie z. B. dem oben erwähnten IrfanView) – sowohl, was die Abmessungen (also Pixel) betrifft, als auch die Dateigröße (durch die Wahl eines komprimierten Formats).

Richtwerte: nicht mehr als 25 KB für eine kleine Grafik wie z. B. ein Logo, nicht mehr als 100 KB für ein Foto, das die gesamte Seitenbreite einnimmt.


Ein Bild einfügen

Bevor Sie ein Bild auf einer Webseite einfügen können, müssen Sie es auf den Server hochladen. Wir empfehlen einen eigenen Order für Ihre Bilder zu erstellen (und diesen gegebenenfalls über Unterordner zu strukturieren).

Klicken Sie an die Stelle im Dokument, an der Sie das Bild einfügen möchten, und anschließend auf das Symbol Bild einfügen/verändern.

Bild einfügen/verändern

Geben Sie im Feld Adresse den Pfad zu Ihrer Bilddatei an. Um Tippfehler zu vermeiden, benutzen Sie am besten das Symbol Durchsuchen Durchsuchen.

Navigieren Sie wie gewohnt zur gewünschten Datei, „Klicken Sie hier zum zu speichern“ und anschließend auf den Button Übernehmen.

Suche Bild

Beschreibung ist der Text, der erscheint, wenn das Bild nicht angezeigt bzw. der Benutzer es (aufgrund seiner Browsereinstellungen oder einer Sehbehinderung) nicht sehen kann. Damit Ihre Seite barrierefrei ist, geben Sie bitte immer eine Beschreibung an: der Text sollte das Bild gleichwertig ersetzen, d. h. den gleichen Zweck erfüllen bzw. die gleiche Information vermitteln. Bei komplexeren Informationen wie z. B. einem Diagramm, das die Bevölkerungsentwicklung Österreichs in den letzten 50 Jahren darstellt, ist es empfehlenswert neben einem kurzen Beschreibungstext eine ausführliche Erläuterung auf einer gesonderten Seite oder direkt unter dem Bild hinzuzufügen. Wenn Sie das Argument der Barrierefreiheit nicht überzeugt (das sollte es aber): auch Google verhält sich wie ein blinder Besucher Ihrer Website und bestraft fehlende Beschreibungstexte mit einer schlechteren Positionierung in den Suchergebnissen.

Der Titel ist Text, der erscheint, wenn ein Besucher den Mauszeiger auf dem Bild positioniert. Damit können Sie kurze Zusatzinformationen geben.

Klicken Sie auf OK, um das Bild auf Ihrer Seite einzufügen, oder wechseln Sie auf die Registerkarte Aussehen, um weitere Einstellungen vorzunehmen.


Weitere Einstellungen

Bild einfügen/verändern: Aussehen

Ausrichtung

Die vertikalen Ausrichtungsoptionen oben/mittig/unten dienen der Ausrichtung des Bilds relativ zu einer Zeile.

z. B. für die Ausrichtung einer einzeiligen Beschriftung (Option mittig)

Beispielbild SchmetterlingLorem ipsum dolor sit amet.

z. B. für die Ausrichtung einer kleinen Grafik innerhalb einer Zeile; die Größe der Grafik sollte dabei aus optischen Gründen die Höhe der Zeile nicht überschreiten (Option mittig)

Lorem ipsum dolor sit amet, Beispielbild consetetur sadipscing elitr.

Die horizontalen Ausrichtungsoptionen links/rechts dienen der Ausrichtung des Bildes im Textfluss von Textblöcken.

Beispiel: Ein rechts ausgerichtetes Bild, das vom Text links umflossen wird.

Beispielbild PfauLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Ausmaße

Die Größe, in der das Bild dargestellt wird. In der Regel sollte diese Angabe der Originalgröße des Bildes entsprechen. Unsere Empfehlungen:

  • Brigen Sie Ihre Bilder vor dem Hochladen mit XIMS mit einem Grafikprogramm wie z. B. IrfanView in die richtige Größe.
  • Geben Sie niemals eine Größe an, die die Originalgröße überschreitet – dies führt zu einer künstlichen Vergrößerung des Bilds mit starkem Qualitätsverlust („Verpixelung“).
  • Geben Sie nur in Ausnahmefällen (wenn Sie z. B. dasselbe Bild in verschiedenen Größen verwenden möchten) eine kleinere Größe an, da der Browser zur Darstellung immer das Originalbild herunterlädt; auch dies führt übrigens zu einem gewissen Qualitätsverlust.
  • Die Option Seitenverhältnis beibehalten sollte immer aktiviert bleiben. So wird die Grafik bei einer Größenänderung proportional verkleinert und Quetsch- und Zerreffekte vermieden.
  • Wenn Sie die Größe ändern, genügt die Angabe der Höhe oder der Breite, die jeweils andere wird von XIMS automatisch berechnet.

Vertikaler und horizontaler Abstand

Der Abstand zwischen Grafik und Text in Pixeln. Nützlich, wenn die Grafik vertikal oder horizontal ausgerichtet wird. In obigem Beispiel mit dem Bild des Pfaus z. B. wurden folgenden Einstellungen vorgenommen:

Vertikaler und horizontaler Abstand

Rahmen

Zeichnet einen schwarzen Rahmen in der Dicke der angegebenen Pixel um das Bild.

Format

Die Angaben zu Abstand und Rahmen, übersetzt in die Formatierungssprache CSS (so schreibt XIMS die Werte ins HTML). Wenn Sie mit CSS vertraut, können Sie hier weitere Angaben anfügen. Anderenfalls können Sie dieses Feld getrost ignorieren.


Ein zweispaltiges Layout mit Textumflüssen

Verwenden Sie niemals Tabellen, um Ihre Seiten zu layouten. Tabellen sollen ausschließlich für tabellarische Daten verwendet werden, weil Sie für sehbehinderte Besucher ein nicht zu unterschätzendes Hindernis darstellen. Sprachbrowser, wie Sie blinde Benutzer einsetzen, lesen Tabellen zeilenweise vor – das macht gerade für das Layout zweckentfremdete Tabellen für diese Benutzer unverständlich.

Mehrspaltige Layouts können Sie auch mit barrierefreien Techniken erstellen; die Vorgangsweise möchten wir im Folgenden anhand eines zweispaltigen Layouts für eine Teamseite illustrieren.

Zweispaltiges Layout

Schritt 1: Schreiben Sie wie gewohnt den gewünschten Text. In diesem Beispiel haben wir Strukturelemente folgendermaßen eingesetzt: Überschrift 1 für „Mitarbeiterinnen und Mitarbeiter“, Überschrift 2 für die Namen der Mitarbeiter. Die nähere Bezeichnung des Mitarbeiters ist Teil der Überschrift 2 (Zeilenumbruch mit SHIFT + ENTER), die kleinere Schrift wurde mit der Formatvorlage „kleine Schrift“ umgesetzt.

Schritt 1: Text

Schritt 2: Fügen Sie die Bilder ein und richten Sie sie aus. Der Text soll die Bilder umfließen. Klicken Sie an den Anfang des Textblocks, dem Sie ein Bild hinzufügen möchten (bei Nitzsche also vor das „F“ von Friedrich) und klicken Sie auf das Symbol Bild einfügen/verändern. Treffen Sie auf der Registerkarte Aussehen folgende Einstellungen:

Bild einfügen/verändern: Aussehen

Erläuterung: Links bedeutet, dass das Bild links steht, der Text rechts um das Bild fließt. Vertikaler Abstand oben von 2 px, damit das Bild bündig mit der ersten Zeile ist (2 px ist ein Richtwert). Horizontaler Abstand rechts von 10 px, damit der Text nicht am Bild „klebt“.

Schritt 3: Korrigieren Sie Treppeneffekte. Wenn der Text eine Blocks zu kurz ist, rutscht der nächste Block neben den vorherigen.

Treppeneffekt

In so einem Fall können Sie den Textumfluss manuell mit dem Symbol Textumfluss beenden beenden. XIMS fügt dazu einen Zeilenumbruch mit einer besonderen Formatvorlage ein. Zeilenumbrüche sind unsichtbar: wenn Sie einen entfernen möchten, können Sie ihn über das Symbol Versteckte Zeichen einblenden sichtbar machen.


Arbeiten mit Bildunterschriften

Markieren Sie das Bild, dem Sie eine Unterschrift hinzufügen möchten, und klicken Sie auf das Symbol Bildunterschrift einfügen/ersetzen.

Bildunterschrift einfügen/ersetzen

Geben Sie den gewünschten Text ein und bestimmten Sie Textausrichtung und Textformat.

Bild mit Unterschrift

Wenn Sie die Unterschrift später ändern möchten, bearbeiten Sie sie wie gewohnt. Möchten Sie die Einstellungen ändern oder die Unterschrift ganz entfernen, markieren Sie das Bild und klicken Sie noch einmal auf das Symbol Bildunterschrift einfügen/ersetzen.