Tutorial Teil 7 – WordPress Medien
Auf dem WordPress Dashboard findest du in der linken Seitenleiste den Menüpunkt Medien. Dahinter verbirgt sich die Mediathek, 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 8 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. Ohne Probleme funktionieren jedoch folgende Formate:
- Bilder: .jpg, .jpeg, .png, .webp, .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] Möglicherweise Probleme bei manchen Browsern.
Abmessungen von Bildern
Dieses WordPress Medien 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 Website eher die Vorgaben deines Templates / Themes maßgebend. Denn wenn deine Bilder wesentlich größer oder kleiner sind, erscheinen sie auf der Website verzerrt bzw. abgeschnitten. Oder sie sind so zusammengeschrumpft, dass das Wesentliche kaum erkennbar ist.
Bei älteren WordPress Versionen bedeutete das, dass du ein Bild mit den Maßen 2048 x 1200 px hochlädst, beim Einbinden auf der Seite die Größe auf volle Größe > 50 Prozent einstellst und es dann auf der Seite mit den Standardmaßen für „groß“ 1024 x 600 px am Besten dargestellt wird. Entsprechendes gilt auch für kleinere Original-Bilder (bei einer Darstellung von 500×300 px wären es mit 1000×600 px hochzuladen). Dasselbe gilt/galt im übrigen auch für dein Logo im Header oder Hauptmenü. In vielen guten Themes hast du die Möglichkeit, das Logo in zwei Größen hochzuladen, sodass es je nach Gerät entsprechend scharf angezeigt wird.
Ab der WordPress Version 6.3 hat sich das Einfügen der Bilder im Hinblick auf die beste Darstellung etwas verändert. So bestimmst du jetzt zuerst die Abmessungen, z. B. Original (voreingestellt), Quadrat, etc.). Wenn du bei „Original“ bleibst, kannst du Breite und Höhe ignorieren, denn sie werden automatisch eingestellt. Lediglich wenn du „Individuell“ ausgewählt hast, trägst du hier deine gewünschten Maße in px ein. Zuletzt hast du unter Auflösung wie bereits zuvor die Wahl zwischen Vorschaubild, mittel, groß, vollständige Größe.
Abbildungen in doppelter Größe erstellen
Falls vor allem deine Fotos später auch auf Retina Displays (Apple Geräten) scharf angezeigt werden und suchmaschinen-optimiert sein sollen, musst du diese auch bei der neusten WordPress Version unbedingt in der doppelten Größe zu WordPress Medien hochladen. Das anschließende „Verkleinern“ auf 50 Prozent entfällt jedoch, wenn du Original und vollständige Größe wählst. Die alte 50 Prozent Option führt jetzt eher zu einer Verzerrung des Bilds auf kleinen Bildschirmen.
Anpassung der Abmessungen
Wenn du für deine Bilder individuelle Maße vorgeben willst, reicht es für WordPress Medien normalerweise, nur 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 anzupassen, gehst du wieder in die
- Einstellungen
- Medien
- Groß
- in das Kästchen für Breite und/oder Höhe klicken
- den neuen Pixel-Wert eintragen oder die Pfeile benutzen
- evtl. einen Haken bei monats-/jahresbasierten Ordnern setzen
- Ä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 mittel und groß.
Anders sieht es bezüglich der Vorschaubilder in WordPress Medien aus. Da Thumbnails meistens quadratisch sind / 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. Sollte es trotzdem noch zu groß sein, erfolgt zusätzlich eine Skalierung.
Keine WordPress Thumbnails
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.
Verwendung von 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 Website 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 sie z. B. als Featured Image langweilig sind und ihnen die persönliche Note fehlt.
Eigene Bilder und Grafiken
Zwar ist die Verwendung eigener Bilder oder Grafiken arbeits- und zeitaufwendiger, aber dafür bist du rechtlich auf der sicheren Seite. Außerdem tragen eigene Motive auch zum stimmigen Gesamteindruck deiner Website bei.
Bilder immer vorher bearbeiten
Wenn du eigene Kreationen zu WordPress Medien hochladen möchtest, solltest du sie nicht so verwenden, wie du sie fotografiert oder erstellt (Grafiken) hast. Auch bei Stockfotos ist es sinnvoll, die Bildabmessung und Datei-Größe vor dem Hochladen zu WordPress zu überprüfen.
Bildbearbeitung für WordPress Medien
Wie bereits unter Abmessungen bereits angedeutet, erfüllen die wenigsten Bilder im Original die Vorgaben. Einerseits passt die Breite oft nicht in dein Theme, was du auch in den WordPress Medien anpassen könntest (s. u.). Allerdings sind die Möglichkeiten sehr eingeschränkt und nicht mit den Optionen, die ein echtes Bild-Bearbeitungsprogramm bietet zu vergleichen.
Andererseits sind insbesondere bei Fotos die Datenmengen viel zu groß. Obwohl die Bilder beim Hochladen in WordPress Medien etwas komprimiert werden, 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 Bild-Bearbeitungsprogramme an wie
- Photoshop: in der Profi-Version teuer und recht anspruchsvoll
- Affinity Foto / Designer: genauso professionell wie Photoshop, aber nutzerfreundlicher und günstiger
- Gimp: kostenlos mit nicht ganz so großem Funktionsumfang
Wenn du nur wenige Abbildungen verwendest, kannst du auch einen Online-Editor wie Pixlr benutzen. Jedoch stehen dir dort noch weniger Funktionen als bei Gimp zur Verfügung.
Anpassen und Speichern von Bildern
Für welches Programm du dich auch entscheidest, wichtig ist, dass du vor der eigentlichen Bearbeitung die für deine Website benötigten Abmessungen im Foto-Editor festlegen. Anschließend ziehst du das Original in die „Maske“.
Da es normalerweise größer als notwendig sein wird, entscheidest du ob du
- nur einen in die Maske passenden Teilbereich verwendest (entspräche dem Beschneiden) oder
- ob du es so verkleinerst, dass es komplett in die Maske passt.
Auch solltest du dir überlegen, ob du die Bilder mit einem Wasserzeichen (deinem Logo oder Namen) versehen möchtest. Es verhindert zwar eine unbefugte Nutzung durch Dritte nicht zu 100 Prozent, erschwert sie jedoch, da die Herkunft für jeden sichtbar ist. Nachdem du mit dem Ergebnis zufrieden bist, speicherst du das Foto als .jpg– oder webp-Datei. Wenn es sich nicht gerade um Fotos für einen Foto-Blog handelt, reicht hohe Qualität i. d. R. aus.
.jp(e)g höchstens für Fotos
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. Inzwischen können auch die allermeisten Browser das .webp-Format korrekt anzeigen. Der Vorteil dieses Formats ist, dass die Datenmenge sowohl von Fotos als auch von Grafiken direkt beim Speichern der bearbeiteten Bilder schon stark reduziert wird.
Bilder komprimieren
Zwar dürfte sich die Dateigröße jetzt schon um einiges verringert haben, optimal ist sie jedoch für das Hochladen zu WordPress Medien immer noch nicht. Denn du hast durch die Anpassung an das gewünschte Format lediglich dein Bild hinsichtlich der Größe verändert. 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 Bildbearbeitungsprogrammen 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-, .png als auch .webp-Dateien komprimieren und beide sind kostenlos nutzbar.
Verkleinern ist nicht gleich komprimieren
Leider gibt es immer noch zahlreiche Websites, deren Betreiber offensichtlich meinen, das kleinere Bilder die Ladezeit weniger negativ beeinflussen. Das stimmt so aber nicht. Die Verringerung der Datenmenge durch kleinere Bildmaße ist nur minimal, die Beeinträchtigung des Nutzererlebnisses jedoch groß. Für die Ladezeit entscheidend ist immer die ausreichende Komprimierung, unabhängig davon, ob es sich um große oder kleine Bilder handelt.
Hochladen in WordPress Medien
Nachdem die Bilder vorbereitet, mit einem passenden Namen versehen und auf deinem Gerät gespeichert sind, rufst du das WordPress Dashboard auf
- Medien
- Datei hinzufügen
- Datei per Drag&Drop in dem Feld ablegen
- oder vom Desktop auswählen
- Hochladen
Alle hochgeladenen 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.
Um weitere Angaben zu deinem Bild hinzuzufügen, klickst du in der Rasteransicht von WordPress Medien 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 anschauen – Weitere Details bearbeiten – Endgültig löschen. Falls du die Listenansicht gewählt hast, findest du diese Optionen unterhalb des Bild-Namens.
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 Website jedoch nicht ratsam, da es für Chaos bei der Indexierung sorgen kann. Falls du ein Plugin wie z. B. Yoast SEO oder Rank Math nutzt, kannst du die Indexierung von Medien untersagen. Trotzdem ist es jedoch möglich, dass einzelne Abbildungen in der Google Bildersuche auftauchen.
Notwendige Angaben
Dazu gehören primär der ALT-Text, der es Suchmaschinen ermöglicht, dein Bild „zu verstehen“, denn ansehen können sie es ja nicht sowie der Titel und die Beschriftung. Der Titel sollte natürlich aussagekräftig sein (nicht img2098628) und die Beschriftung muss die Quellenangabe bzw. den Namen des Rechteinhabers enthalten. ALT-Text und Beschriftung kannst du später beim Einfügen auf einer Seite auch noch anpassen. Eine Beschreibung ist nicht unbedingt nötig.
Bilder nachträglich bearbeiten
Des weiteren befindet sich unterhalb des Bildes in WordPress Medien ein Button Bild bearbeiten. Hier bietet dir WordPress einige Werkzeuge an, um ein bereits hochgeladenes Bild zu modifizieren.
- 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 Website. 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 und/oder du klickst unten rechts auf Zuschneiden überspringen.
Wie du Dateien aus WordPress Medien auf deiner Website einsetzt, erkläre ich in meinen Tutorials über das Arbeiten mit dem Gutenberg-Editor.
WEITERE WORDPRESS-TUTORIALS
- WP Login und Einstellungen
- Benutzer & Kommentatoren
- Werkzeuge – Datenschutz
- Plugins installieren
- Themes & Templates
- Design, Widgets, Menüs
- Seiten & Beiträge
Abbildungen © eb, WordPress | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.
