Tutorial Teil 7 – WordPress Medien
Auf dem WordPress Dashboard finden Sie in der linken Seitenleiste den Menüpunkt Medien. Dahinter verbirgt sich die Mediathek, die zunächst leer sein wird. Bevor Sie mit WordPress Medien arbeiten, 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 Ihrer 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 dürfen Sie 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 WordPress Medien Tutorial erklärt vorrangig den Umgang mit Bildern, da es bei allen anderen Dateien kaum Besonderheiten gibt. Wenn Sie auf der Seitenleiste den Menüpunkt Einstellungen > Medien aufrufen, finden Sie 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 Ihrer Website eher die Vorgaben Ihres Templates / Themes maßgebend. Denn wenn Ihre 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.
Das würde bedeuten, dass Sie ein Bild mit den Maßen 2048 x 1200 px hochladen, beim Einbinden auf der Seite die Größe auf volle Größe > 50 % einstellen und es dann auf der Seite mit den Standardmaßen für „groß“ 1024 x 600 px erscheint. Dasselbe gilt im übrigen auch für Ihr Logo im Header oder Hauptmenü. In vielen guten Themes haben Sie die Möglichkeit, das Logo in zwei Größen hochzuladen, sodass es je nach Gerät entsprechend scharf dargestellt wird.
Abbildungen in doppelter Größe erstellen
Falls vor allem Ihre Fotos später auch auf Retina Displays (Apple Geräten) scharf angezeigt werden und suchmaschinen-optimiert sein sollen, müss(t)en Sie diese in der doppelten Größe zu WordPress Medien hochladen und anschließend beim Einstellen auf einer Seite auf 50% „verkleinern“.
Anpassung der Abmessungen
Normalerweise reicht es für WordPress Medien, 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 Vorgabenanzupassen, gehen Sie 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 Ihre 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 bezüglich der Vorschaubildern 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. Oder es ginge ein Teil des Bildes verloren. Sollte es trotzdem noch zu groß sein, erfolgt zusätzlich eine Skalierung.
Keine WordPress Thumbnails
Falls Sie keinen Wert auf quadratische Thumbnails legen, können Sie 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 können Sie 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 Sie sie öffentlich auf einer Webseite einsetzen möchten. Dann muss die Lizenzfreiheit auch für eine kommerzielle Nutzung gelten, was insbesondere bei kostenlosen Angeboten selten der Fall ist.
Darüberhinaus müssen Sie die Bilder auf jeden Fall mit einer Angabe zum Rechteinhaber bzw. zu der Plattform, von der Sie sie bezogen haben, 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.
Eigene Bilder und Grafiken
Zwar ist die Verwendung eigener Bilder oder Grafiken arbeits- und zeitaufwendiger, aber dafür sind Sie rechtlich auf der sicheren Seite. Und eigene Motive tragen zum stimmigen Gesamteindruck deiner Website bei.
Bilder immer vorher bearbeiten
Wenn Sie eigene Kreationen zu WordPress Medien hochladen möchten, sollten Sie sie nicht so verwenden, wie Sie sie fotografiert oder erstellt (Grafiken) haben. Auch bei Stockfotos ist es sinnvoll, die Bild- und Datei-Größe vor dem Hochladen zu WordPress zu überprüfen.
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 Ihr 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 Ihre Webseite zu erreichen, sollten Sie die Bilder bereits vorher bearbeiten. Hierzu bieten sich Bildbearbeitungsprogramme an 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
Wenn Sie nur wenige Abbildungen verwenden, können Sie auch einen Online-Editor wie Pixlr benutzen. Jedoch stehen Ihnen hier noch weniger Funktionen zur Verfügung.
Anpassen und Speichern von Bildern
Für welches Programm Sie sich auch entscheiden, wichtig ist, dass Sie vor der eigentlichen Bearbeitung die für Ihre Website benötigten Abmessungen im Foto-Editor festlegen. Anschließend ziehen Sie das Original in die „Maske“.
Da es normalerweise größer als notwendig sein wird, entscheiden Sie ob Sie
- nur einen in die Maske passenden Teilbereich verwenden oder
- ob Sie es so verkleinern, dass es komplett in die Maske passt.
Auch sollten Sie sich überlegen, ob Sie die Bilder mit einem Wasserzeichen (Ihrem Logo oder Namen) versehen. Es verhindert zwar eine unbefugte Nutzung durch Dritte nicht zu 100%, erschwert sie jedoch, da die Herkunft für jeden sichtbar ist. Nachdem Sie mit dem Ergebnis zufrieden sind, speichern Sie 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.
.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 ist, dass die Datenmenge sowohl von Fotos als auch von Grafiken direkt beim Speichern der bearbeiteten Bilder 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 Sie haben durch die Anpassung an das gewünschte Format lediglich Ihr Bild verkleinert. Deshalb folgt ein zweiter Schritt – die eigentliche Komprimierung.
Durch die Bildkompression erreichen Sie 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 erzielen Sie mit speziellen Werkzeugen, die Sie online nutzen können, 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 können Sie sowohl .jpg- als auch .png-Dateien komprimieren und beide sind kostenlos nutzbar.
Hochladen in WordPress Medien
Nachdem die Bilder vorbereitet, mit einem passenden Namen versehen und auf Ihrem Gerät gespeichert sind, rufen Sie 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 finden Sie 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, haben Sie die Möglichkeit, über ein Auswahlfeld alle Medien (Standard) oder auch nur Bilder oder nur Videos etc. anzeigen zu lassen. Außerdem haben Sie die Wahl zwischen Raster- oder Listenansicht.
Um weitere Angaben zu Ihrem Bild hinzuzufügen, klicken Sie in der Rasteransicht von WordPress Medien auf das Bild. In dem sich nun öffnenden Fenster finden Sie 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 können Sie 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 Sie die Listenansicht gewählt haben, finden Sie diese Optionen unterhalb des Bild-Namens.
Wenn Sie auf Weitere Details bearbeiten klicken, befindet sich oberhalb des Bildes die Option, die URL zu ändern. Dies ist wie auch bei anderen URLs Ihrer Seite jedoch nicht ratsam, da es für Chaos bei der Indexierung sorgen kann. Falls Sie ein Plugin wie z. B. Yoast SEO oder Rank Math nutzen, können Sie 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 in WordPress Medien ein Button Bild bearbeiten. Hier bietet Ihnen 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 legen Sie 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 Ihrer Website. Sobald Sie es einfügen wollen, ö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 Ihr Logo in voller Schönheit zu erhalten, ziehen Sie den Rahmen so auseinander, dass Ihr Logo vollständig hineinpasst. Anschließend klicken Sie unten rechts auf Zuschneiden überspringen.
Wie Sie Dateien aus WordPress Medien auf Ihrer Website einsetzen, 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.
