Bilder auf der Webseite

Bilder laden Sie über den Texteditor oder die Mediathek hoch. Die Mediathek finden Sie im Dashboard -> Mediathek.

Ziehen Sie das Bild per 'Drag&Drop' aus dem Dateiexplorer in den Texteditor. Dies stösst automatisch einen Uploadvorgang in die Mediathek an.

Alle Dateien liegen in der Mediathek. Laden Sie Dateien und Bilder am besten auf der Seite hoch, auf der sie auch auftauchen sollen. Der Vorteil: in der Mediathek sehen Sie die Verknüpfung dieser Elemente.

Alle Dateien werden nach Monaten abgespeichert, damit nie zu viele Dateien in einem Ordner liegen.

Wenn Sie eine Datei zu einer Seite hochladen, wird diese Datei in dem Jahres-Monats-Ordner gespeichert, an dem die Seite publiziert wurde. Es handelt sich NICHT um das Datum des hochladens. Wenn Sie die Datei über die Mediathek direkt hochladen, wird die Datei in den aktuellen Jahres-Monats-Ordner hochgeladen.

So sieht das aus / Try our demo: → Bild auf Webseite (mit allen Feldern)

 

Mediathek organisieren

Bevor Sie anfangen, Bilder hochzuladen, überlegen Sie sich eine Strategie, wie Sie Bilder immer wiederfinden, die zusammengehören. Da Sie in der Mediathek keine Ordnerstruktur haben, lohnt sich eine Systematik gleich von Anfang an. Hier unsere Vorschläge gegen einen Mediathek-Dateien-Dschungel:

  • Struktur in der Mediathek geht davon aus, dass man einen Blog hat, das kann man Nutzen (einschränken auf einen Monat)
  • Bilder und Dateien NIE in der Mediathek hochladen, sondern IMMER aus der Seite! Dann hat man in der Mediathek die Verknüpfung "Hochgeladen zu"
  • Die Bilder geeignet nennen (vor allem bei Bildergalerien, anstelle des von der Kamera vergebenen kryptischen Namens). Zusammengehörende Bilder haben am besten den gleichen Dateinamensanfang. Danach können sie in der Mediathek auch einschränken.
  • Das geht auch im Nachhinein: Verwenden Sie die Felder Beschriftung und Beschreibung. Nach denen können Sie in der Mediathek suchen!

Bildformate, Fotos und Logos, bewegte Bilder

Meist denken wir gar nicht mehr über Bildformate nach: alle Fotos aus der Digitalkamera und dem Smartphone kommen üblicherweise im Format jpg zu uns. Das ist auch fast immer ok so. Im Browser können neben jpg auch die Formate png und gif angezeigt werden. Folgende Fehler kommen vor:

Mein Bild wird nicht in jedem Browser angezeigt (bmp?)

Beim Bildformat bmp ist es so, daß der Internet Explorer es anzeigt, andere Browser aber nicht!

Alle anderen Bild-Datei-Formate können nicht direkt auf der Webseite angezeigt werden, also binden Sie keinesfalls Bilder mit den Dateiendungen bmp, cdr, psd, raw usw. in Ihre Seite ein!

Mein Logo ist unscharf (Kompressionsrate jpg 82%)

Wenn Sie ein Logo mit wenigen Farben und scharf abgegrenzten Kanten und Schrift verwenden, dann ist jpg nicht das optimale Format. WordPress komprimiert Ihre Dateien. Dies geschieht aus Gründen der Suchmaschinenoptimierung (SEO), welche Seiten bevorzugt, die schneller laden. Seit WordPress 4.5 ist die Kompressionsrate sogar nochmals für die Smartphones erhöht worden.

Ist Ihnen Ihr Logo also zu verwaschen, verwenden Sie besser das Format png. Es komprimiert verlustfrei und kann sogar im Alpha-Kanal Transparenz (jpg kann das gar nicht und gif nur für eine von 256 Farben).

Der beste Weg, die gutgemeinte automatische Kompression von WordPress zu umgehen ist, wenn Sie die Bilder bereits vor dem Hochladen auf die später gewünschte Zielgröße verkleinern.
(Aus Gründen der  Suchmaschinenoptimierung (SEO) werden Bilder von WordPress stark komprimiert (je schneller die Website läd, desto besser ist es für das Ranking)).

Mein animiertes Gif bewegt sich nicht mehr

Psychologisch nicht emfpehlenswert sind die sogenannten animierten gifs. Das sind mehrere gif-Bilder, die zusammengeschaltet wurden und so einen Bewegungssequenz bilden. So nett das auf den ersten Blick auch wirkt, so schnell stört es im echten Betrieb der Seite. Immer wieder wird das Auge Ihres Besuchers auf das zuckende Bild gelenkt. Wenn Sie ein solches Gif in WordPress einbinden wollen, achten Sie darauf, daß sie das originale Bild in der vollständigen Größe verwenden. Die verkleinerten Versionen zucken nicht mehr 🙂

Bild hochladen

Gehen Sie auf Dashboard → Medien → Datei hinzufügen. Es öffnet sich ein Fenster, in das sie Dateien aus dem Dateiexplorer einfügen oder per Datei auswählen zu Ihrer Datei navigieren.

Bitte beachten: Folgende Zeichen im Dateinamen können nach unseren Erfahrungen Probleme verursachen: +
Am besten entfernen Sie solche Zeichen aus dem Dateinamen, bevor Sie das Bild hochladen.

Befinden Sie sich bereits im Texteditor, dann rügen Sie das Bild an der markierten Stelle im Texteditor ein mit Medien hinzufügen. (oberhalb des Textfensters).

Bilddetails

Bildtitel, Beschriftung und Alternativtext des Bildes werden rechts angezeigt, wenn Sie das Bild in der Medienübersicht markiert haben. Diese Details werden z.B in der Anhangsseite angezeigt.

Bildgröße

Beim Hochladen werden mehrere Versionen Ihres Bildes angelegt: ein quadratisches Miniaturbild, eine mittelgroße und eine große Version. All diese Versionen werden zudem stark komprimiert, um möglichst kleine, schnell zu ladende Bilddateien zu erzielen. Beachten Sie: wenn Sie die vollständige Größe einbauen, wird das Bild zwar optisch verkleinert in die Seite eingepasst, die Dateigröße kann aber mehrere Megabyte betragen!

Die verkleinerten Versionen haben folgende Pixel-Abmessungen:

  1. Vorschaubild (150x150), hart beschnitten
  2. Mittel (die längere Kante des Bildes wird auf 300 Pixel verkleinert)
  3. Groß (640 Pixel misst die längere Bildkante nach Verkleinerung)
  4. Vollständig (der Goldstandard, Ihre originale Bildgröße, unverändert)

Auf diese einfache Art soll eine gewisse Einheitlichkeit ermöglicht werden.

 

bilder-groesse

Wohin soll das Bild verlinken

  •  Neben einer benutzerdefinierten URL können Sie
  • auf die Medien-Datei verlinken lassen. (Klick auf das Bild öffnet die originalgroße Version des Bildes in einem neuen Fenster).
  • Wenn Sie auf eine Anhang-Seite verlinken, wird wenn auf das Bild geklickt wird, eine Anhangseite geöffnet, in der zum Beispiel auch eventuelle Bildbeschreibungen angezeigt werden.
  • Bei keiner Verlinkung des Bildes passiert nichts.

Screenshot

Sie wollen nur Teile eines Bildes verlinken (z.B. ein Gruppenfoto des Teams, und bei Klick auf jeden Kopf soll man auf die jeweilige Seite des Teammitglieds kommen)? Verwenden Sie die JGU Image Map

Bild bearbeiten

Sie können Sie die Bildgröße direkt in WordPress ändern mittels des Bild bearbeiten-Button unter dem kleinen Vorschaubild klicken.

Damit starten Sie einen Editor zur Bildbearbeitung. Folgende Funktionen (Icon-Leiste von links nach rechts) stehen zur Verfügung:

  • Beschneiden: Das Icon ist ausgegraut, bis Sie direkt im Vorschaubild auch einen Bildausschnitt auswählen, indem Sie mit der Maus ein Viereck aufziehen. Ihre Auswahl wird automatisch in der rechten Spalte im Bereich Bildausschnitt übernommen.
  • Gegen den Uhrzeigersinn drehen
  • Im Uhrzeigersinn drehen
  • Horizontal spiegeln
  • Vertikal spiegeln

Zusätzlich können Sie das gesamte Bild verkleinern (skalieren). Vergrößern ist nicht empfehlenswert, dadurch wird das Bild unscharf.

bildbearbeiten

Bild (proportional) verkleinern

Geben Sie die Breite ein, die Höhe wird daraus automatisch berechnet. Bestätigen Sie dann mit dem Knopf Skalieren. Das Bild wird nun gespeichert, die Änderung kann jedoch wieder rückgängig gemacht werden (mit Originalbild wiederherstellen).

Proportionen des Bildes ändern

Dies ist meist nötig, wenn Sie Bilder aus unterschiedlichen Quellen zum Beispiel in einem Imagescroller vereinigen wollen.

Am flexibelsten ist dies, wenn Sie ein Seitenverhältnis wählen, z.B. 16:9. Tragen Sie dies bei Bildformat ein. Das dann mit der Maus aufgezogene Viereck im Vorschaufenster bleibt dann immer in diesem Verhältnis.

Überschrift, Beschriftung, Beschreibung und Alternativer Text

Geben Sie dem Bild zunächst eine aussagekräftige  Überschrift. Es handelt sich hierbei nicht um den Dateinamen, sondern um die Anzeige in der Mediathek.

Die Beschriftung wird als Bildunterschrift angezeigt, wenn Sie das Bild in eine Seite einfügen.

In das  Feld Beschreibung geben Sie den Text ein, der erscheinen soll, Sie das Bild als Anhang verknüpfen. Bei Klick auf das eingefügte Bild öffnet sich das Bild mit der Beschreibung.

💡: Aus Gründen der Zugänglichkeit sollten Sie den Alternative Text immer ausfüllen. Bleibt der Alternativtext leer, so wird der Dateiname des Bildes vorgelesen. Das ist immer unsinnig! Hat das Bild keine inhaltliche Bedeutung (es handelt sich um ein Schmuckbild), so sollten Sie im Feld Alternativtext ein Leerzeichen eintragen. Dies stört nicht beim Vorlesen oder der Anzeige in der Braillezeile.
Der Alternative Text wird immer dann angezeigt, wenn keine Bilder geladen werden (zum Beispiel, wenn die Seite vorgelesen wird), oder der Ladevorgang noch nicht abgeschlossen ist.
Außerdem sollten Sie auf jeden Fall die Verlinkung des Bildes abschalten, wenn es sich um ein Schmuckbild handelt.

Mehr zur Barrierefreiheit auf Webseiten

Bilder im nachhinein kleiner anzeigen

Ist das Bild bereits in die Seite eingebaut, können Sie die Anzeigeeinstellungen ändern, indem Sie das Bild markieren und dann auf den Stift klicken. Die Größeneinstellung "Individuelle Größe / custom size" finde ich ganz besonders unglücklich und ich empfehle Ihnen, diese nicht zu verwenden, denn damit ändern Sie nichts an der Bilddatei (die bleibt im Hintergrund im schlimmsten Fall riesengroß), sondern geben nur das in der HTML-Seite zur Verfügung stehende Anzeigefenster vor.

 

Bilder per URL einfügen

Für die Einbindung fremder Inhalte (z.B. fremder Bilder) in die Internetseiten Ihres Projektes muss in der Regel die Zustimmung des Urhebers eingeholt werden. Das Zentrum für Datenverarbeitung ist nicht verantwortlich für Urheberrechtsverletzungen, welche durch den nicht-autorisierten Upload fremder Inhalte entstehen.

Wenn Sie auf ein Bild direkt aus dem Internet verweisen möchten (und dürfen)

url

Dafür geben Sie die gewünschte URL des Bildes an sowie eine Titel für das Bild und drücken anschließend auf "in die Seite einfügen/in den Beitrag einfügen".

Bild und Text nebeneinander

P1050048Dies erreichen Sie durch die Ausrichtung. Beim Einbau des Bildes im Menü auf der rechten Seite. Ausrichtung= links sieht dann in Kombination mit der Textboxaktuell-Klasse so aus.
Die optimale Reihenfolge ist: zuerst den Text (in einem Absatz). Dann das Format textboxgrau zuweisen. Als nächstes den Cursor vor den Text und und das Bild einbinden. Als letztes das Bild links ausrichten. Bild und Text müssen gemeinsam in einem Absatz stehen, um die gewünschte Ausrichtung zu erreichen.

Bild aus der Mediathek löschen

Klicken Sie dazu in der Mediathek einmal auf das Thumbnail-Bild der zu löschenden Datei:

mediathek_thumbnail

Danach erhalten Sie die Detailansicht, in der Sie unten rechts einen Link 'Unwiderruflich löschen' finden:

meda_delete

Bitte beachten: die Datei kann danach nirgendwo in WordPress mehr angezeigt/verwendet werden. In allen Seiten/Beiträgen, die möglicherweise darauf verlinkten, werden diese Links danach nicht mehr funktionieren. Wurde eine Datei auf diesem Wege ungewollt gelöscht, wenden Sie sich bitte unter Angabe der Blog-URL an: webmaster@uni-mainz.de.

Diashow (JGU Imagescroller)

Dazu benötigen Sie zuerst je einen Beitrag für jedes Bild. Das Bild ist mit dem jeweiligen Beitrag verlinkt. Lesen Sie mehr dazu: JGU Imagescroller einrichten

Datenschutz bei Bildern

Sie dürfen nicht einfach alles hochladen oder wiederverwenden! Mehr dazu auf: Datenschutz bei Bildern