WordPress Bilder und Medien: Alles was du wissen musst

WordPress-Bilder-und-Medien-scaled

Bilder sind ein grosser und wichtiger Bestandteil einer modernen Webseite. Sie helfen dem Besucher und Leser, Dinge zu visualisieren und lockern auch gerne lange Beiträge etwas auf. Kein Wunder solltest Du also auf Deiner WordPress Webseite Bilder und auch andere Medien nutzen, damit Deine Besucher länger auf Deiner Seite verweilen.

Wir erklären Dir deshalb alles, was Du über Bilder und Medien innerhalb WordPress wissen musst.

Die WordPress Mediathek

Alle Bilder und Medien werden prinzipiell in der WordPress Mediathek gespeichert, sofern Du die integrierte Funktion zum Hochladen von Bildern und Medien nutzt.

Beim Hochladen von Bildern speichert WordPress Dein Bild auf dem Server und erstellt zur gleichen Zeit einen Eintrag in der Datenbank, wo neben dem Namen des Bildes und weiteren Informationen auch der genaue Speicher-Ort angegeben ist.

Die Mediathek findest Du innerhalb vom Dashboard im linken Menü an der 3. Stelle, sofern kein anderes Plugin diesen Platz für sich in Anspruch nimmt. Du kannst die Mediathek auch über folgenden Link erreichen: deineseite.com/wp-admin/upload.php

Innerhalb der WordPress Mediathek werden Dir alle hochgeladenen Bilder und Medien entweder als Kacheln oder als Liste angezeigt. Diese Option kannst Du je nach Vorliebe selber anpassen. Wähle hierzu einfach einer der Icons oben Link aus.

Solltest Du ein bestimmtes Bild suchen, gibt es innerhalb der Mediathek eine Suchfunktion, bei der Du neben Dateinamen auch einfach nach Beschreibungen, welche Du angegeben hast, suchen kannst.

Wirst Du dabei nicht fündig, lässt sich der Inhalt der WordPress Mediathek auch nach Monaten und Medienart filtern, was Dir das auffinden eventuell etwas vereinfacht.

So lädst du Bilder und Medien in WordPress hoch

Möchtest Du Bilder oder anderen Medien hochladen, gibt es dafür unterschiedliche Wege. Der schnellste führt über die Mediathek, wo Du oben einen „Datei hinzufügen“ Button vorfindest. Hast Du diesen angewählt, kannst Du entweder per Drag-and-drop Bilder und Medien in das Fenster ziehen oder durchsuchst Deine Festplatte.

Neben dieser Methode kannst Du aber auch Bilder und Medien direkt, während dem Schreiben von Beiträgen oder Seiten hochladen. Wie Du dies innerhalb des Gutenberg-Editors oder dem Classic Editor machst, erklären wir Dir weiter unten.

Wo werden Bilder in WordPress gespeichert?

Lädst Du Bilder über die WordPress Mediathek hoch, landen diese automatisch in einem Verzeichnis auf Deinem Server. Das Verzeichnis ist dabei nach Jahren und Monaten sortiert.

Um Deine Bilder auf dem Server zu finden, öffnest Du den Ordner "wp-content" steuerst dann den Ordner "Uploads" an und findest dort die nach Jahren Sortieren Ordner, in welchen sich dann die einzelnen Monate befinden.

Solltest Du einen Ordner öffnen, wirst Du rasch feststellen, dass Deine Bilder in verschiedenen Varianten bzw. grössen gespeichert sind. Dies hängt mit den Einstellungen in Deinem Template oder Deinen Plugins zusammen - dazu aber später mehr weiter unten.

Kann ich Bilder auch über FTP bzw. SFTP zu WordPress hochladen?

Ja, jedoch ist es nicht ganz so einfach.

Wie oben erwähnt, erstellt WordPress pro Bild, welches Du hochlädst einen Datenbankeintrag und schneidet das Bild dann auch noch zu. Lädst Du Deine Bilder nun über FTP bzw. SFTP hoch, sind diese zwar auf Deinem WordPress Server, jedoch weiss WordPress selber davon nichts und Du findest das Bild auch nicht in der Mediathek.

Um diese Datenbank-Einträge nachträglich zu erstellen, benötigst Du entweder gute Kenntnisse mit WP-CLI oder Du nutzt ein Plugin  Media Register, welches die Bilder dann registriert.

Aber Achtung: Bei jedem dieser Plugins wird jede Menge Kapazität Deines Servers benötigt, weshalb Du vielleicht Fehlermeldungen zu sehen bekommst, sollte Dein Server in die Knie gezwungen werden. Wir empfehlen hier gerne unser «Managed WordPress Hosting» Angebot, welches hierbei keine Probleme hat.

Wie gross sollten hochgeladene Bilder sein?

Bilder nehmen auf einem Server immer den meisten Platz ein. Auch wenn Deine WordPress Seite von einem Besucher aufgerufen wird, sorgen Bilder immer mal gerne dafür, dass die Seite etwas langsamer ladet.

Wir empfehlen hier gerne immer "So gross wie Nötig – so klein wie Möglich".

Überlege Dir immer, wie gross die Bilder am Schluss dargestellt werden, wenn sie von einem Computer oder Smartphone aufgerufen werden. In unserem Fall befinden sich die grössten Bilder in unseren Blog als Titelbild.

Mit den Entwickler-Tools, welche Google Chrome oder auch Firefox mit sich bringen, kannst du selber herauslesen, wie gross das Bild ist, welches gerade geladen wurde. Bei unserem Titelbild sind es 768px x 432px, weshalb Bilder eigentlich nicht grösser sein sollten.

Jedoch gibt es hierbei eine Ausnahme: Solltest Du versuchen, mit Deinen Beiträgen in Google Discover zu landen, müssen die Bilder grösser sein. Google verlangt hier mindestens 1200px, weshalb bei Techgarage die Bilder mit 3360px x 1200px (16:9 Format) hochladen.

Wieso erstellt WordPress verschiedene Grössen von meinen Bildern?

WordPress erstellt automatisch beim Hochladen von Bildern verschiedene Grössen. Diese Funktion sorgt dafür, dass nicht immer das Originalbild angezeigt wird, wenn es dies von der Grösse her gar nicht benötigt.

Die bereits vordefinierten Grössen benennt WordPress wie folgt:

  • Thumbnail (Vorschaubilder)
  • Mittel
  • Gross

Wie die Abmessungen dieser Grössen sind, kannst Du in den Einstellungen bei Medien anpassen.

Neben diesen 3 kann jedes installierte Plugin wie Template weitere Bildgrössen hinzufügen. Diese sind jedoch nicht in den Einstellungen einsehbar und lassen sich auch nicht einfach ändern.

Nutzt Du zum Beispiel ein Galerie-Plugin, welches Bilder in 1920px x 1080px anzeigen möchte, so kann es gut sein, dass beim Hochladen Deine Bilder in diese Grösse zugeschnitten werden.

Solltest Du nun ein neues Template oder Plugin installiert haben und die Bilder sehen dabei etwas komisch aus, liegt dies daran, dass Deine Bilder immer noch in der alten Grösse vorhanden sind. Bilder werden immer nur beim Hochladen zugeschnitten und nicht nachträglich. Um das nachzuholen, nutzt Du am besten ein kleines Plugin wie zum Beispiel Regenerate Thumbnails.

So optimierst du deine Bilder vor dem Hochladen in die WordPress Mediathek

Webseiten müssen heute schnell sein, um 1. Deine Besucher glücklich zu machen und 2. auch bei Google gute Platzierungen zu erhalten. Bilder sind hier oft ein Problem, da sie recht gross bzw. schwer sein können. Heutzutage ist es deshalb sehr wichtig, dass Du Deine Bilder vor dem Hochladen bereits optimierst.

Weiter oben haben wir bereits angesprochen, wie die Abmessungen Deiner Bilder sein sollten. Nutzt Du Programm, um Deine Bilder anzupassen, verfügt das Programm oft eine „Web Exportfunktion“, wodurch die Qualität des Bildes etwas heruntergeschraubt wird.

Photoshop wie auch Pixelmator für Mac besitzen so eine Funktion. Ein anderes Programm für den Mac ist "ImageOptim" welches gratis Deine Bilder optimiert und Du so ordentlich nochmals ein paar Kilobyte verlierst. Für Windows gibts auch die Online Version davon.

Hast Du dazu gar keine Lust, gibt es unzählige WordPress-Plugins, welche Deine Bilder beim Hochladen optimieren. Bedenke jedoch dabei, dass diese oft Kostenpflichtig sind und auch Deinen Server warmlaufen lassen könnten.

Ein Service+Plugin, welches wir gerne empfehlen ist Shortpixel.

Bilder während dem Schreiben im Classic Editor einfügen und hochladen

Schreibst Du Deine Beiträge oder Deine Seiten noch im Classic Editor, welchen Du definitiv mal beerdigen solltest, lassen sich Bilder über den Button oberhalb vom Editor einfügen. Entweder Du nimmst eines aus der Mediathek, welches bereits hochgeladen ist, oder Du lädst ein neues in die Mediathek.

Sobald das Bild im Editor ist, kannst Du es mit der Eingabetaste auf eine neue Zeile verschieben, solltest Du Deinen Cursor beim Einfügen des Bildes noch auf der Textzeile haben.

Da das einfügen und verschieben von Bildern im Classic Editor etwas ein Krampf ist, solltest Du auf den Gutenberg Editor wechseln, welcher mit WordPress 5.0 eingeführt wurde.

Bilder während dem Schreiben im Gutenberg Editor einfügen und hochladen

Beim Gutenberg Editor ist das Hochladen und Einfügen während dem Schreiben ein Kinderspiel. Wähle dazu einfach mit dem + den Bilder-Block aus. Hier hast Du nun die Möglichkeit entweder ein Bild aus der Mediathek auszuwählen, oder ein neues hochzuladen.

Ist das Bild eingefügt, kannst Du es mit den Pfeilen weiter noch oben und unten verschieben. Weiter lässt sich der Style und die Ausrichtung vom Bild über das "Block-Menü" auf der rechten Seite anpassen.

Das Beitragsbild

Blogbeiträge sollten neben einem tollen Text auch tolle Bilder beinhalten. Damit der Leser bereits beim ersten Blick auf die Vorschau den Artikel anklicken möchte, solltest Du immer ein Beitragsbild hochladen.

Die Option für das Beitragsbild findest Du im Editor auf der rechten Seite bei "Beitrag". Relativ weit unten ist dort ein Punkt der "Beitragsbild" heisst. Lade an dieser Stelle Dein Bild hoch.

Nutzt Du übrigens ein SEO Plugin wie Yoast SEO, wird Dein Beitragsbild automatisch in die Meta-Tags übernommen, damit auch bei Facebook und Twitter dieses als Vorschau sichtbar ist.

So löschst Du ein Bild aus der WordPress Mediathek

Möchtest Du Deine Mediathek etwas aufräumen, kannst Du jederzeit Bilder löschen. Gehe dazu einfach in Deine Mediathek und wähle das Bild aus, welches Du löschen möchtest. Nun öffnet sich das Bild und Du kannst ganz unten rechts auf "Endgültig löschen" drücken.

Solltest Du übrigens mal Deine ganze Mediathek aufräumen wollen, empfehlen wir Dir unseren Artikel "Wie Du Deine WordPress Medienbibliothek aufräumst" lesen.

Abonniere 
unseren Newsletter

Nur wertvolle Infos – kein Spam. Mit der Ameldung bestätigst Du, dass wir Dir einmal im Monat eine Zusammenfassung der neuesten Themen im Web-Bereich als E-Mail zusenden dürfen.

Mehr Artikel wie dieser

Welche WordPress Version habe ich? So findest Du es heraus!

WordPress ist das beliebteste CMS der Welt, mit welchem sich neben Blogs auch ganze Webseiten erstellen lassen. Da WordPress regelmässig und fleissig verbessert wird, kann…
Weiterlesen

WordPress 6.1 – Alle Neuerungen mit webP und dem neuen Twenty Twenty-Three Standard-Theme im Überblick

Das dritte grosse WordPress Update in diesem Jahr steht vor der Türe. Mit WordPress 6.1 kommen am 1. November 2022 wieder zahlreiche Neuerungen auf uns…
Weiterlesen

Wie wir ACF Blocks mit Handlebars Templating einsetzen

Mittels Handlebars Templating trennen wir Logik sauber vom Inhalt. Auf diese Weise können wir übersichtliche, einfache und performante Templates für WordPress Editor Blocks erstellen, welche…
Weiterlesen

iPhone Bildschirmgrössen – (k)ein Hexenwerk für Webdesigner?

iPhone-Bildschirm Messgrössen iPhone Bildschirmgrösse in Zoll (Display Size, Inches) Dies ist die Bildschirmgrösse in Zoll, gemessen von einer Ecke zur anderen. Genau so, wie auch Bildschirmgrössen von…
Christoph Ackermann
Weiterlesen

Vorstellung von WordPress 6.0 – Neue Blöcke und mehr Performance

Seit dem 24. Mai 2022 ist mit WordPress 6.0 die zweite Hauptversion in diesem Jahr veröffentlicht worden. Benannt wurde die Version nach Jazzmusiker Arturo O’Farrill.…
Weiterlesen

So kombinieren wir Nested Pages, SEO Framework & Polylang in WordPress

Bei vielen Kundenwebseiten setzen wir auf das Plugin Nested Pages, um Seitenstruktur besser sehen (und verwalten) zu können. Ohne dieses Plugin sieht die Anzeige von…
Weiterlesen

WordPress Login – so bekommst Du Zugang zu Deinem Dashboard

Gerade für WordPress Anfänger, aber auch bei fortgeschrittenen Benutzern, kann es oft schwierig sein, sich bei seinem Konto anzumelden. Im folgenden Beitrag werde ich Dir…
Weiterlesen

WordPress 6.0: Entwicklerteam gibt Zeitplan der neuen Version bekannt

Update: WordPress 6.0 wurde am 24. Mai 2022 veröffentlicht Wie Matias Ventura Ende Januar schrieb, soll WordPress 6.0 ein Abschluss der Phase 2 des Gutenberg-Projekts…
Weiterlesen

WordPress 5.9 – Was ist neu und kommt mit dem Update

Ursprünglich sollte WordPress 5.9 (Josephine) bereits am 14. Dezember 2021 veröffentlicht werden, wurde jedoch wegen offenen Problemen nach mehrfachen Verschieben nun am 25. Januar 2022…
Weiterlesen

Warum unsere Kunden ihre Webseite kaputt layouten können

Einleitung / Basics Bereits seit einiger Zeit haben wir unseren neuen cubetech Core im Einsatz. Intern nennen wir das Ding liebevoll „gutenbase“ – eine Mischung…
Weiterlesen

Tech Talk – „Advanced Custom Fields“ Plugin

Bereits seit langer Zeit setzen wir bei unseren WordPress-Installationen auf das populäre Plugin «Advanced Custom Fields» (nachfolgend ACF). Dieser Beitrag zeigt, wie wir unsere Webseiten…
Weiterlesen

Wie du deine WordPress Medienbibliothek aufräumst

Wer WordPress für seinen Blog oder seine Firmenwebseite schon länger nutzt, hat sicher schon einiges an Dateien in die Mediathek hochgeladen. WordPress erstellt beim Hochladen…
Weiterlesen