Hilfe:Bilder einbinden

Aus Copedia

Prinzipielles zur Anordnung

Weil das Aussehen einer Webseite in erster Linie davon abhängt, wie sie der jeweilige Browser darstellt, nicht, wie der Autor sie plant, soll bei Anordnung, Ausrichtung und Größe möglichst auf zu spezielle Vorgaben verzichtet werden. Gutes Webdesign zeichnet sich durch Flexibilität aus, perfektes Layout ist erst für eine gedruckte Ausgabe wie den WikiReader nötig.

Die Bilder sollten möglichst in die jeweiligen Kapitel gesetzt werden. Zuviele Bilder am Anfang des Artikels, die sich „von selbst“ auf den Artikel verteilen, sind ungünstig: Sie zeigen leicht unerwünschte Nebenwirkungen im Layout und bringen auch manche Browser zum Absturz.

Originalgröße

Bilder lassen sich mit [[Bild:Dateiname|Beschreibung]] in Seiten einfügen. Das Bild wird dann in Originalgröße links im Artikel angezeigt. Mit der Option framed, z.B. [[Bild:Dateiname|framed|Beschreibung]] wird das Bild mit einem Rahmen umgeben.

Eingabe Ergebnis
[[Bild:Feather 150 transparent.png|Feder]] Feder
[[Bild:Feather 150 transparent.png|framed|Eine Feder mit Rahmen]]
Eine Feder mit Rahmen

Thumbnails

Text der Bildbeschreibung

Mediawiki kann automatisch Vorschaubilder erzeugen. Dazu fügt man den Zusatz thumb oder thumbnail oder miniatur zwischen Dateiname und Alternativtext ein, zum Beispiel [[Bild:Feather 150 transparent.png|thumb|Text der Bildbeschreibung]].

Text der Bildbeschreibung

Für Thumbnails ohne Rahmen fügt man den Zusatz frameless hinzu. Dabei ist zu beachten dass diese jedoch standardmäßig links ausgerichtet sind, so dass für das gleiche Verhalten zu thumb ein right notwendig ist, zum Beispiel [[Bild:Feather 150 transparent.png|frameless|right|Text der Bildbeschreibung]] (unteres Bild).

Das erzeugte Vorschaubild wird rechtsbündig ausgerichtet und vom Artikeltext umflossen. Der Alternativtext wird unter dem Bild als Beschreibung angezeigt. Über die Lupe springt man zur großen Version des Bildes auf seiner Beschreibungsseite.

Angemeldete Benutzer können die Bildgröße der Thumbnails in ihren Benutzereinstellungen festlegen; für nicht angemeldete Leser erscheinen diese Bilder mit einer Bildbreite von 180 Pixeln.

Diese Art der Bilddarstellung sollte im Allgemeinen in Seiten verwendet werden.

Bildunterschriften unterstützen alle Möglichkeiten der Textgestaltung. Sie werden jedoch bei rahmenloser Darstellung nicht angezeigt.


Bilder skalieren

Grundsätzlich sollten starre Bildgrößen nur in Ausnahmefällen verwendet werden, da dies die individuellen Anzeigeeinstellungen für Vorschaubilder (Thumbnails) der Benutzer ignoriert. Wann immer möglich, lassen Sie die Benutzer selbst wählen, in welcher Größe sie Vorschaubilder sehen wollen.

Feste Skalierung

Normales Thumnail

Mit [[Bild:Feather 150 transparent.png|thumb|50px|Beschreibung]] wird die Breite des generierten Miniaturbildes (thumbnail) auf 100 Pixel festgelegt (Standardgröße, keine Definition: 180 Pixel).

Mit [[Bild:Feather 150 transparent.png|thumb|x100px|Beschreibung]] wird die Höhe des Miniaturbildes festgelegt. Die zugehörige Breite bzw. Höhe wird aus dem Seitenverhältnis automatisch berechnet.

Thumb mit 50px

Wenn man mit [[Bild:Feather 150 transparent.png|thumb|100x100px|Thumb mit 100x100px]] sowohl die Maximalhöhe wie auch -breite angibt, wird der im Verhältnis kleinere Wert genommen. In diesem Beispiel würde das Bild weder höher noch breiter als 100 Pixel werden.

Außerhalb von Infoboxen sollten keine festen Bildbreiten verwendet werden. Für den Fließtext im Artikelnamensraum gibt es Thumbnails in Verbindung mit der automatischen Skalierung. Um ein Bild/eine Grafik in besonderen Fällen dennoch größer oder kleiner darzustellen, kann der upright-Parameter verwendet werden. Damit erfolgt eine prozentuale Skalierung, die sich an den Benutzereinstellungen orientiert. Für die Verwendung siehe das folgende Kapitel.


Hoch- und querformatige Bilder kombinieren – automatische Skalierung

Upright=0.5
Ohne px-, aber mit upright-Angabe (Vorgabewert)
Fehler beim Erstellen des Vorschaubildes: Datei fehlt
Skalierbare Vergrößerung bei einem sehr breitformatigen Foto

Werden hoch- und querformatige Bilder untereinander gesetzt, ohne dass eine Breite vorgegeben wird, wirken die hochformatigen Thumbs meist übermäßig groß. Es empfiehlt sich in solchen Fällen, dem hochformatigen Bild den Parameter upright mitzugeben. Damit wird es standardmäßig um den Faktor 0,75 schmaler als das querformatige Bild dargestellt, was in der Regel zu einer schöneren Aufteilung führt. Der große Vorteil liegt in der automatischen Skalierung, die für anonyme Benutzer genau so funktioniert wie für angemeldete Benutzer, die sich in ihren persönlichen Einstellungen eine andere Bildbreite vorgegeben haben. Die Größenverhältnisse untereinander bleiben immer gewahrt.

[[Bild:Bildname.jpg|thumb|upright|Ohne ''px''-, aber mit ''upright''-Angabe]]

Dem Parameter upright kann auch ein Faktor mitgegeben werden, falls es sich um sehr hohe Bilder handelt, bei der eine Skalierung auf 0,75 noch nicht reicht:

[[Bild:Bildname.jpg|thumb|upright=0.5|Ohne ''px''-, aber mit ''upright=0.5''-Angabe]]

Auf diese Weise können auch sehr breite Bilder, z.B. Panoramen, skaliert werden. Mit einem upright-Wert > 1 werden sie entsprechend breiter als das Standard-Thumbnail dargestellt. Die Proportionen bleiben dadurch in jeder Darstellung erhalten.

[[Bild:Panorama.jpg|thumb|upright=1.8|Panorama, es wird mit 180 % der Standardbreite dargestellt.]]

Die Breite der so berechneten Thumbnails wird immer auf den nächsthöheren 10er-Wert aufgerundet.

Zu beachten: upright kann nicht dafür eingesetzt werden, um sehr kleine Vorlagen, wie zum Beispiel SVGs mit zu geringer Basisgröße zu vergrößern, das geht derzeit nur mit fester Größenangabe wie im Abschnitt Feste Skalierung beschrieben.


Ausrichten im Text

Die Optionen left, right, center und none richten Bilder im Text nach links bzw. rechts aus. Dabei ist jedoch zu beachten, dass die Darstellung je nach Browser sehr unterschiedlich sein kann. Um Probleme bei der Darstellung zu vermeiden, empfiehlt es sich, alle Bilder als thumbs auf der rechten Seite, bei längeren Absätzen auch absatzweise unter der Absatzüberschrift einzufügen.

Der Parameter none schaltet jegliche automatische Ausrichtung (bei Thumbnails) ab und stellt das Bild inline dar.

Alle Optionen lassen sich beliebig, jeweils durch senkrechte Striche getrennt, miteinander kombinieren, unbekannte Optionen ignoriert die Software.

Vertikale Ausrichtung

Bilder können auch vertikal zu einem Text ausgerichtet werden.

Rahmen

Vor allem einfache Grafiken, Flaggen usw. die einen weißen Untergrund haben und nicht mit thumb dargestellt werden sollen, benötigen einen Rahmen. Dieser kann mit dem Parameter border erzeugt werden:

[[Bild:Flag of the Vatican City.svg|border|right|100px]]

Einfügen eines Links zur Bildbeschreibungsseite

Durch einen Klick auf ein hochgeladenes Bild erscheint eine Seite mit der Beschreibung und einer meist höher aufgelösten Version dieses Bildes. Wenn das Bild im Text nicht angezeigt werden soll, kann auf diese Seite verwiesen werden, indem man im Link vor das Wort Bild einen Doppelpunkt setzt: Aus [[:Bild:Rotkehlchen_gr.jpg|Bildbeschreibung]] wird Bildbeschreibung.

Nach dem Hochladen einer neuen Bildversion

Wenn man Bilder überarbeitet und danach unter dem bisherigen Namen wieder hochlädt, gibt es Besonderheiten zu beachten, die teils die Erfolgskontrolle, teils die Wiki-Software betreffen:

  • Manche Webbrowser zeigen nach dem Hochladen einer neuen Version immer noch das alte Bild an. In diesem Fall hilft es meist, die fragliche Seite mit der Funktion des Webbrowsers neu zu laden (Refresh oder Reload). Es kann aber auch nötig sein, gezielt den Browsercache zu leeren.
  • Manchmal wird das neue Bild im Seitenverhältnis des alten Bildes angezeigt. Es erscheint dann verzerrt. In diesem Fall muss nichts getan werden. Die betroffenen Seiten werden nach einiger Zeit automatisch neu erzeugt und die Verzerrungen verschwinden dann von selbst. Will man die Darstellung beschleunigt korrigieren, hilft eine „leere Bearbeitung“ (das heißt, man klickt auf „Seite bearbeiten“ und speichert die Seite ohne Änderung sofort wieder) oder ein sogenanntes „Purge“.