WordPress Medien

WordPress Medien verwenden
Tutorial Teil 7

Aktualisiert am 28-11-2019

Was wären Webseiten ohne Bilder? Im 7. Teil meines Tutorials erfährst du alles über WordPress Medien und was vor dem Einbinden von Medien auf einer Webseite zu beachten ist.

Tutorial Teil 7 – WordPress Medien

Auf dem WordPress Dashboard findest du in der linken Seitenleiste den Menüpunkt Medien. Dahinter verbirgt sich die Mediathek (s. Abb. 34), die zunächst leer sein wird. Bevor du mit WordPress Medien arbeitest, gilt es einige grundsätzliche Dinge zu beachten.

Einerseits begrenzt WordPress die Größe einer Datei auf maximal 16 MB. Abgesehen davon, dass das Hochladen von Dateien dieser Größe relativ lange dauern kann, beeinflusst eine sehr große Datei später auch die Ladezeit deiner Webseite negativ. Empfehlenswert sind Dateigrößen bis zu 1 MB.

Andererseits lässt WordPress nicht alle Dateiformate zu. Beispielsweise ist aus Sicherheitsgründen das Hochladen von .svg-Dateien (fast) nicht möglich. Falls der Upload z. B. eines Icons doch gelingt, wird es hinterher nicht korrekt angezeigt. Verwenden darfst du jedoch folgende Formate:

  • Bilder: .jpg, .jpeg, .png, .gif
  • Videos .mp4, .m4v (MPEG-4), .mov (QuickTime), .wmv (Windows Media Video), .avi, .mpg, .ogv (Ogg), .3gp (3GPP), .3g2 (3GPP2)
  • Audio-Dateien .mp3, .m4a [1], .ogg, .wav
  • Dokumente .pdf, .doc, .docx, .ppt, .pptx, .pps, .ppsx, .odt, .xls, .xlsx, .key
  • sowie .zip-Dateien

[1] Funktioniert möglicherweise nicht in allen Browsern.

Abmessungen von Bildern

Dieses Tutorial erklärt vorrangig den Umgang mit Bildern, da es bei allen anderen Dateien kaum Besonderheiten gibt. Wenn du auf der Seitenleiste den Menüpunkt Einstellungen > Medien aufrufst, findest du dort die Standard-Abmessungen für Bilder.

  • Vorschaubild (Thumbnail): 150 x 150 px
  • Mittelgroß: maximal 300 x 300 px
  • Groß: maximal 1024 x 1024 px

Jedoch sind für eine optimale Darstellung der Bilder auf deiner Webseite eher die Vorgaben deines Templates / Themes maßgebend. Denn wenn deine Bilder wesentlich größer oder kleiner sind, erscheinen sie auf der Webseite verzerrt bzw. abgeschnitten. Oder sie sind so zusammengeschrumpft, dass das Wesentliche kaum erkennbar ist.

Anpassung der Abmessungen

Normalerweise reicht es, die Abmessungen unter groß zu ändern, wobei vor allem die korrekte Breite wichtig ist. Dagegen spielt die Höhe nur eine untergeordnete Rolle. Um die Vorgaben für WordPress Medien anzupassen, gehst du wieder in die

!

1. Einstellungen
2. Medien
3. Groß
4. in das Kästchen für Breite und/oder Höhe klicken
5. den neuen Pixel-Wert eintragen oder die Pfeile benutzen
6. evtl. den Haken bei monats-/jahresbasierte Ordner setzen
7. Änderungen speichern

Sowohl bei WordPress Medien für mittelgroße als auch für Vorschaubilder sind quadratische Abmessungen vorgegeben. Wenn deine Ausgangsbilder ein anderes Seitenverhältnis haben, passt WordPress sie automatisch an. Dabei ist zwischen der weichen (Resizing = Skalierung) und der harten (Cropping = Beschneiden) Methode zu unterscheiden.

WordPress Medien – automatisches konvertieren

Bei der Skalierung bleiben die Proportionen des Ausgangsbilds erhalten. Dadurch dass das Bild als ganzes verkleinert wird, gehen also keine Teilbereiche des Originals verloren. Sondern es findet nur eine Anpassung an die Vorgaben statt. WordPress verwendet diese Methode für die Abmessungen mittelgroß und groß.

Anders sieht es bei Vorschaubildern aus. Da Thumbnails meistens quadratisch sein sollen, ist für diese standardmäßig Beschneiden aktiviert. Denn bei reinem Resizing rechteckiger Bilder erschiene sonst oben und unten bzw. links und rechts ein schwarzer Rand. Oder es ginge ein Teil des Bildes verloren. Sollte es trotzdem noch zu groß sein, erfolgt zusätzlich eine Skalierung.

Falls du keinen Wert auf quadratische Thumbnails legst, kannst du deren automatische Anpassung deaktivieren und/oder durch Festlegen eines rechteckigen Formats die schwarzen Ränder vermeiden. Danach skaliert WordPress das Bild einfach nur entsprechend.

Eigene Bilder oder Stockfotos?

Unter Stockfotos sind Bilder zu verstehen, die nicht gezielt für einen bestimmten Zweck, sondern auf Vorrat produziert wurden. Solche Fotos sowie auch Grafiken etc. sind in Datenbanken gespeichert. Anschließend kannst du sie im Internet über spezielle Plattformen herunterladen. Zwei bekannte Anbieter sind Shutterstock oder auch iStock.

Jedoch ist die Nutzung solcher Bilder auf Webseiten nicht ganz unproblematisch – Stichwort Lizenz. Zwar werben viele Plattformen mit lizenzfreien Bildern, aber das entspricht leider nicht immer den Tatsachen. Vor allem, wenn du sie öffentlich auf einer Webseite einsetzen möchtest. Dann muss die Lizenzfreiheit auch für eine kommerzielle Nutzung gelten, was insbesondere bei kostenlosen Angeboten selten der Fall ist.

Darüberhinaus musst du die Bilder auf jeden Fall mit einer Angabe zum Rechteinhaber bzw. zu der Plattform, von der du sie bezogen hast, versehen. Einerseits haben solche Bilder den Vorteil i. d. R. qualitativ hochwertig zu sein. Andererseits wiederholen sich bestimmte Motive auf vielen Webseiten, so dass es z. B. als Featured Image langweilig ist und ihm die persönliche Note fehlt.

Zwar ist die Verwendung eigener Bilder oder Grafiken arbeits- und zeitaufwendiger, aber dafür bis du rechtlich auf der sicheren Seite. Und eigene Motive tragen zum stimmigen Gesamteindruck deiner Webseite bei. Unabhängig davon, ob du nun Stockfotos oder eigene Kreationen hochladen möchtest, sollten du sie nicht so verwenden, wie du sie heruntergeladen oder fotografiert hast.

Bildbearbeitung für WordPress Medien

Wie bereits unter Dateigröße und Abmessungen angedeutet, erfüllen die wenigsten Bilder im Original die Vorgaben. Einerseits passt die Breite oft nicht in dein Theme. Andererseits sind insbesondere bei Fotos die Datenmengen viel zu groß.

Obwohl WordPress Bilder beim Hochladen in WordPress Medien etwas komprimiert, reicht die dadurch erzielte Verringerung der Dateigröße nicht aus. Um eine akzeptable Ladezeit für deine Webseite zu erreichen, solltest du die Bilder bereits vorher bearbeiten. Hierzu bieten sich Bildbearbeitungsprogramme wie

  • Photoshop: in der Profi-Version teuer und recht anspruchsvoll
  • Affinity Foto / Designer: genauso professionell, aber nutzerfreundlicher und günstiger
  • Gimp: kostenlos mit nicht ganz so großem Funktionsumfang

an. Wenn du nur wenige Abbildungen verwendest, kannst du auch einen Online-Editor wie Pixlr benutzen. Jedoch stehen dir hier weniger Funktionen zur Verfügung. Für welches Programm du dich auch entscheidest, wichtig ist, dass du vor der eigentlichen Bearbeitung die für deine Webseite benötigten Abmessungen im Editor festlegst. Anschließend ziehst du das Original in die Maske (Abb. 35). Da es normalerweise größer als notwendig sein wird, entscheidest du ob du

  • nur einen in die Maske passenden Teilbereich verwenden möchtest oder
  • ob du es so verkleinerst, dass es in die Maske passt.

Auch solltest du dir überlegen, ob du die Bilder mit einem Wasserzeichen (deinem Logo oder Namen) versiehst. Es verhindert zwar eine unbefugte Nutzung durch Dritte nicht zu 100%, erschwert sie jedoch. Nachdem du mit dem Ergebnis zufrieden bist, speicherst du das Bild als .jpg-Datei. Wenn es sich nicht gerade um Fotos für einen Foto-Blog handelt, reicht hohe Qualität i. d. R. aus. Für Abbildungen mit überwiegend grafischen Elementen, Text oder für Logos ist .png besser geeignet. Denn das Format hat den Vorteil, dass die Grafik später verlustfreier skalierbar ist.

Bilder komprimieren

Zwar dürfte sich die Dateigröße jetzt schon um einiges verringert haben, optimal ist sie jedoch noch nicht. Denn du hast durch die Anpassung an das gewünschte Format lediglich dein Bild verkleinert. Deshalb folgt ein zweiter Schritt – die eigentliche Komprimierung.

Durch die Bildkompression erreichst du eine Verringerung des Informationsumfangs, den ein Foto oder eine Grafik mitbringt. Im Gegensatz zur oben beschriebenen Bildbearbeitung bleiben alle Informationsinhalte aber erhalten. Dabei ist zwischen einer verlustfreien und verlustbehafteten Kompression zu unterscheiden.

Einerseits ist mit manchen Bildbearbeitungs-Programmen auch das Komprimieren möglich. Andererseits erzielst du mit speziellen Werkzeugen, die du online nutzen kannst, bedeutend bessere Ergebnisse. Ich habe mit tiny png sehr gute Erfahrungen gemacht. Aber auch das Tool von Website Planet macht einen guten Eindruck. Mit beiden kannst du sowohl .jpg- als auch .png-Dateien komprimieren und beide sind kostenlos.

Bilder in WordPress Medien hochladen

Nachdem die Bilder vorbereitet, mit einem passenden Namen versehen und auf deinem Gerät gespeichert sind, rufst du das WordPress Dashboard (s. Abb. 36) auf

!

1. Medien
2. Datei hinzufügen
3. Datei per Drag&Drop in dem Feld ablegen
oder Dtei vom Desktop auswählen
4. Hochladen

Alle Bilder und auch andere Dateien findest du nun unter WordPress Medien, wobei die zuletzt hinzugefügte Datei immer an erster Stelle erscheint. Sobald die Datei hochgeladen ist, erhält sie automatisch ihre eindeutige URL, die sich wie folgt zusammensetzt: https:// deineseite .de / wp-content / uploads / Jahr / Monat / Name der Datei .format

WordPress Medien verwalten

Wenn bereits mehrere (unterschiedliche) Dateien vorhanden sind, hast du die Möglichkeit, über ein Auswahlfeld alle Medien (Standard) oder auch nur Bilder oder nur Videos etc. anzeigen zu lassen. Außerdem hast du die Wahl zwischen Raster- oder Listenansicht (Abb. 37 – 39). Um weitere Angaben zu deinem Bild hinzuzufügen, klickst du in der Rasteransicht auf das Bild. In dem sich nun öffnenden Fenster findest du neben dem Bild folgende Angaben

  • Dateiname, Dateityp, Hochgeladen am, Dateigröße, Abmessungen
  • Alternativer Text +
  • Titel +
  • Beschriftung +
  • Beschreibung +
  • Hochgeladen von
  • Hochgeladen zu (Titel des Beitrags)
  • sowie den Link

Nachträglich kannst du alle hier mit + versehenen Angaben ergänzen bzw. verändern. Unterhalb befinden sich drei Links: Anhang-Seite anschauenWeitere Details bearbeitenEndgültig löschen. Falls du die Listenansicht gewählt hast, findest du diese Optionen unterhalb des Bild-Namens (Abb. 33 – 34).

Medien

8 Abbildungen

WordPress Medien

Wenn du auf Weitere Details bearbeiten klickst, befindet sich oberhalb des Bildes die Option, die URL zu ändern. Dies ist wie auch bei anderen URLs deiner Seite jedoch nicht ratsam, da es für Chaos bei der Indexierung sorgen kann. Falls du ein Plugin wie z. B. Yoast SEO nutzt, kannst du die Indexierung von Medien untersagen. Trotzdem ist es jedoch möglich, dass einzelne Abbildungen in der Google Bildersuche auftauchen.

Bilder nachträglich bearbeiten

Des weiteren befindet sich unterhalb des Bildes ein Button Bild bearbeiten. Hier bietet dir WordPress einige Werkzeuge an, um ein bereits hochgeladenes Bild zu modifizieren (Abb. 40-41).

  • Beschneiden,
  • nach links oder rechts drehen,
  • vertikal oder horizontal spiegeln,
  • skalieren
  • oder einen Bildausschnitt erstellen.

Abschließend legst du noch fest, für welche Bildgrößen die Änderungen übernommen werden sollen. Allerdings ist zu bedenken, dass diese Werkzeuge eine sorgfältige Bildbearbeitung im Vorfeld nicht ersetzen können. Sondern sie sind wirklich nur für Einzelfälle geeignet.

Eine Ausnahme bildet das Einbinden eines Logos in die Kopf- / Menüleiste deiner Webseite. Sobald du es einfügen willst, öffnet sich ein neues Fenster. Über das Logo ist ein Rahmen gelegt. Da dieser meistens nur den mittleren Teil des Logos umschließt, möchte WordPress den so markierten Teil ausschneiden. Um dein Logo in voller Schönheit zu erhalten, ziehst du den Rahmen so auseinander, dass dein Logo vollständig hineinpasst. Anschließend klickst du unten rechts auf Zuschneiden überspringen.

WordPress Tutorial Teil 7

WP7-pdf

Wie du Dateien aus WordPress Medien auf deiner Webseite einsetzt, erkläre ich in meinen Tutorials über das Arbeiten mit dem Gutenberg-Editor.

Von Ellena © Grafiken: eb (Logo: WordPress)

android apple apps bloggen browser cloud dsl-wlan e-mail foto google internetsicherheit ios macOS messenger microsoft mobilfunk onlinedienste recht seo social tutorials updates windows wordpress

Schreibe einen Kommentar