So fügen Sie Bilder in WordPress im Jahr 2022 hinzuein Tutorial zum Hinzufügen von Bildern in klassischen und Gutenberg-Editoren (+ Reduzieren der Dateigröße)

Heute brechen wir auf, wie Sie Bilder in WordPress hinzufügen und deren Dateigröße reduzieren (damit Ihre Seiten & Beiträge so schnell wie möglich geladen werden).

Wenn Sie nur die Grundlagen des Startens eines Blogs lernen, gibt es eine Menge herauszufinden, ich verstehe es. Wir haben hier darüber gesprochen, wie Sie die Schriftgröße ändern, die Schriftfarbe ändern, einen anklickbaren Link erstellen und vieles mehr.

Die gute Nachricht ist, dass es im Jahr 2022 sehr einfach ist zu lernen, wie man Bilder in WordPress mit all den Usability-Updates und Verbesserungen hinzufügt, die sie in den letzten zehn Jahren gesehen haben.

In diesem kurzen Tutorial zeige ich Ihnen, wie Sie Bilder in WordPress-Posts hinzufügen, sowohl im klassischen Editor (den ich am liebsten verwende) als auch über den neueren Gutenberg-Editor.

Lassen Sie uns nun in das Hinzufügen von Bildern zu Ihren WordPress—Posts eintauchen und gleichzeitig deren Dateigröße so weit wie möglich reduzieren, um den SEO-Best Practices zu entsprechen und Ihre Seiten so schnell wie möglich zu laden.

So fügen Sie Bilder WordPress (und reduzieren die Dateigröße) in 2022

1. Hinzufügen von Bildern zu Beiträgen im klassischen WordPress-Editor
2. Hinzufügen von Bildern zu Beiträgen im Gutenberg WordPress Editor
3. Hinzufügen eines vorgestellten Bildes zu einem Beitrag in WordPress

Bevor wir uns mit diesem Tutorial zum Hinzufügen von Bildern zu WordPress befassen, zeige ich Ihnen in 2 einfachen Schritten, wie Sie die Dateigröße eines Bildes reduzieren (damit Ihre Beiträge schneller geladen werden).

Installieren Sie das (kostenlose) JPEG komprimieren & PNG-Bilder-Plugin von Tiny PNG

Sie können das kostenlose Compress JPEG & PNG Images Plugin für WordPress hier aus der WordPress Plugin-Bibliothek herunterladen.

Alternativ können Sie auch nach dem Plugin suchen und es direkt in Ihrem Plugin-Menü installieren, auf das Sie hier auf der linken Seite Ihres Blog-Admin-Abschnitts zugreifen können – oder schauen Sie sich dieses kurze Tutorial zur Installation eines WordPress-Plugins an:

Sobald Sie das Plugin JPEG komprimieren & PNG-Bilder installiert haben, wird jedes neue Bild, das Sie in Ihr WordPress-Blog hochladen, automatisch optimiert und die Dateigröße so weit wie möglich reduziert, ohne die Qualität Ihres Bildes zu beeinträchtigen.

Hinweis: Dies ist bei weitem das beste Bildkomprimierungs-Plugin auf dem Markt. Es ermöglicht bis zu 500 kostenlose Bildkompressionen pro Monat (was viel mehr ist, als Sie wahrscheinlich benötigen), bevor Sie auf einen kostenpflichtigen Plan bei $ upgraden müssen.009 / bild über Ihre ersten 500 jeden Monat. Es ist ein ernstes Schnäppchen und Sie werden kein besseres Komprimierungs-Plugin finden, mit dem Sie mehr kostenlose Credits erhalten.

Wenn Sie jedoch die Bildkomprimierung direkt auf Ihrem eigenen Computer durchführen möchten (unbegrenzt kostenlos), empfehle ich die ImageOptim-Anwendung.

Laden Sie Ihre Bilder hoch

Das war’s! Ernsthaft, es ist so einfach.

Sobald Sie das Komprimierungs—Plugin in Ihrem Blog installiert haben — oder zuerst einzelne Bilder auf Ihrem Computer komprimiert haben – können Sie sie in Ihre Beiträge oder Seiten in WordPress hochladen.

Lassen Sie uns nun genau untersuchen, wie Sie Bilder zu WordPress hinzufügen.

1. Hinzufügen von Bildern zu Beiträgen im klassischen WordPress-Editor

Wenn Sie wie ich sind und immer noch das klassische WordPress-Editor-Layout zum Hinzufügen / Bearbeiten Ihrer Beiträge bevorzugen, dann folgen Sie hier.

Wenn Sie andererseits den neueren Gutenberg-Editor für Ihren Post-Inhalt verwenden, springen Sie zum nächsten Abschnitt für diese exemplarische Vorgehensweise. Wenn Sie nicht sicher sind, welchen Editor Sie verwenden, werfen Sie einen Blick auf die Screenshots unten und vergleichen Sie sie mit Ihrem Editor. Möchten Sie den klassischen Editor verwenden, sind sich aber nicht sicher, wie Sie ihn erhalten sollen? Nehmen Sie sich 2 Minuten Zeit, um dem einfachen Tutorial von Yoast zur Installation des klassischen Editors in Ihrem WordPress-Blog zu folgen.

1. Öffne den Beitrag, dem du Bilder hinzufügst (und finde die richtige Stelle)

Zuerst musst du sicherstellen, dass du dich in dem Beitrag befindest, dem du ein Bild hinzufügen möchtest.

Dann sollten Sie Ihren Cursor genau an die Stelle in Ihrem Beitrag navigieren, an der Sie das Bild hinzufügen möchten.

2. Klicken Sie oben in Ihrem Editor auf die Schaltfläche „Medien hinzufügen“

Diese Schaltfläche sieht hier folgendermaßen aus:

Sobald Sie auf die Schaltfläche „Medien hinzufügen“ klicken, wird der Bildschirm angezeigt, auf dem Sie Ihre Bilddatei hochladen können.

3. Klicken Sie auf „Dateien hochladen“

Klicken Sie auf die Registerkarte „Dateien hochladen“ und Sie werden zu dem Bildschirm weitergeleitet, auf dem Sie mit dem Auswahlwerkzeug eine Bilddatei auswählen können, von der sie sich auf Ihrem Computer befindet.

Wenn Sie alternativ eine Bilddatei von Ihrem Desktop ziehen und hochladen, können Sie den Bildschirm „Dateien hochladen“ überspringen und direkt zum Ziehen des Bildes und Ablegen übergehen (es gibt eine Demo davon im nächsten Schritt).

4. Laden Sie Ihre Bilddatei hoch

Ich ziehe es vor, Bilddateien von meinem Desktop zu ziehen und sie in den Datei-Uploader zu legen (anstatt den Selektor zu verwenden, um sie auf meinem Computer zu finden), da dies viel schneller ist.

Hier ist eine kurze Video- / GIF-Demonstration, wie Sie ein Bild von Ihrem Desktop zu WordPress hinzufügen:

Sobald Sie Ihr Bild hochgeladen haben, funktioniert das Komprimierungs-Plugin Es ist magisch, die Dateigröße zu reduzieren (hinter den Kulissen).

Hinweis: Bevor Sie Ihre Bildoptionen abschließen und auf „In Beitrag einfügen“ klicken, sollten Sie einen SEO—freundlichen Alternativtext für Ihr Bild verfassen – etwas, das die Art dessen beschreibt, was in Ihrem Bild stattfindet, und im Idealfall eines der Ziel-Keywords einfügen, für die Sie hoffen, dass der Artikel schließlich rangiert (in organischen Suchergebnissen).

5. Wählen Sie Ihre Bildoptionen und klicken Sie auf „In Beitrag einfügen“

Schließlich haben Sie einige Optionen für Ihr Bild zu definieren. Dies beinhaltet:

• Steuern der Ausrichtung, wie Ihr Bild in Ihrem Beitrag angezeigt wird (ich wähle immer Mittelausrichtung)
• Erstellen eines Links zu einer anderen Seite oder einem Beitrag in Ihrem Blog (oder zu einem externen Link, zu dem Sie die Leser weiterleiten möchten)
• Anzeigegröße (Ich empfehle immer, das Bild in voller Größe hochzuladen, um einen Verlust der Bildqualität zu vermeiden)

Nachdem Sie diese Optionen ausgewählt haben, können Sie auf „In Beitrag einfügen“ klicken und los geht’s!

Diese Schaltfläche befindet sich hier in der unteren rechten Ecke Ihres Bildschirms:

Jetzt werden Sie zurück zu Ihrem Editorfenster weitergeleitet und sehen, dass das Bild, das Sie gerade hinzugefügt haben, genau dort sitzt, wo Sie es hochgeladen haben.

Denken Sie daran, dass Sie noch einige schnelle & einfache Bearbeitungsoptionen haben, wenn Sie etwas an der Anzeige Ihres neuen Bildes ändern möchten:

• Sie können die Größe manuell ändern, indem Sie eine der Ecken greifen und in der Größe nach oben oder unten ziehen
• Sie können auf die Mitte des Bildes klicken und es in Ihrem Beitrag verschieben, um es neu zu positionieren
• Sie können das Bild jederzeit löschen, indem Sie auf Ihrer Tastatur auf „Rücktaste“ oder „Löschen“ klicken und von vorne beginnen

Und das ist es! Sie haben gelernt, wie Sie mit dem klassischen Editor ein Bild zu WordPress hinzufügen.

2. Hinzufügen von Bildern zu Beiträgen im Gutenberg WordPress Editor

Im Gutenberg WordPress Editor sehen Ihre Post-Editing-Optionen ganz anders aus als im klassischen Editor.

Gutenberg verfolgt den Ansatz, Inhalte über ein System von „Blöcken“ wie Textblöcken, Kopfzeilenblöcken, Bildblöcken usw. hinzuzufügen / zu bearbeiten. Lassen Sie uns also in das Hinzufügen von Bildern in Gutenberg eintauchen.

1. Wählen Sie das Symbol „Bild hinzufügen“

Nachdem Sie sichergestellt haben, dass Sie ein Bild an der richtigen Stelle in Ihrem Beitrag hinzufügen, wählen Sie das Symbol „Bild hinzufügen“. Es wird genau hier so aussehen:

Sobald Sie auf das Symbol „Bild hinzufügen“ klicken, haben Sie einige Optionen, wie Sie Ihrem Beitrag ein Bild hinzufügen können.

2. Wählen Sie aus, wie Sie das Bild hinzufügen möchten

In Gutenberg haben Sie einige schnelle Optionen zum Hinzufügen eines Bildes in WordPress. Das beinhaltet:

• Hochladen (öffnet einen Auswahlbildschirm, in dem Sie die Bilddatei von Ihrem Computer auswählen können)
• Medienbibliothek (führt Sie zu Ihrer vorhandenen Bildbibliothek – aus der Sie auch ziehen können & ein Bild ablegen)
• Von URL einfügen (Wenn sich ein Bild irgendwo online befindet, das Sie importieren möchten, können Sie diesen Link hier einfügen)

Hier ist eine Momentaufnahme dieser Optionen (persönlich klicke ich einfach auf „Hochladen“ und greife schnell nach dem gewünschten Bild von meinem Desktop):

3. Laden Sie Ihr Bild hoch

Sobald Sie das Bild ausgewählt haben, das Sie hochladen möchten, klicken Sie einfach auf die Schaltfläche „Öffnen“ und es wird Ihrem Beitrag hinzugefügt.

Nachdem Sie das Bild hinzugefügt haben, wird ein kleineres Miniaturbild davon als neuer Block in Ihrem Beitrag angezeigt.

Hier ist ein Screenshot, wie das aussehen wird:

4. Bildeinstellungen & Schnellbearbeitungsoptionen

Bevor Sie fortfahren, sollten Sie Ihre Bildeinstellungen auswählen (gemäß den Best Practices für SEO).

Und genau wie mit dem klassischen Editor können Sie viele verschiedene Einstellungen und Eigenschaften für ein Bild definieren. Mit Gutenberg wird es nur ein bisschen anders gemacht. Ihre Bildeinstellungen befinden sich stattdessen in der rechten Seitenleiste (nachdem Sie zuerst einmal auf das Bild geklickt haben).

So sehen diese Einstellungen aus:

Stellen Sie sicher, dass Sie Ihre Bildeinstellungen für mindestens diese beiden Eigenschaften definieren:

• SEO-freundlichen Alternativtext schreiben, der das Bild beschreibt und in einer Keyword-Phrase webt
• Bildgröße (Ich zeige Bilder immer in voller Größe an, um einen Qualitätsverlust zu vermeiden)

Sie können auch in die „Stil“ -Einstellungen klicken, um ein nuancierteres Styling hinzuzufügen & integrierte Zuschneidefunktionen mit Gutenberg.

5. Verschieben von Bildern innerhalb eines Beitrags über Gutenberg

Ein sehr cooler Nebeneffekt des Fokus des Gutenberg-Editors auf die Verwendung von „Inhaltsblöcken“ ist, wie einfach Sie Ihre Bilder (oder Inhaltsblöcke) innerhalb eines Beitrags verschieben können.

Nachdem Sie einmal auf das Bild geklickt haben, das Sie in Ihrem Beitrag neu anordnen möchten, werden die Pfeile „Auf“ und „Ab“ direkt neben dem Bild angezeigt.

Klicken Sie auf diese Pfeile, um Ihr Bild innerhalb Ihres Beitrags nach oben oder unten zu verschieben:

Und das war’s! Du kannst gehen.

Sie haben jetzt gelernt, wie Sie ein Bild auch im Gutenberg-Editor zu WordPress hinzufügen 🙂

3. Hinzufügen eines vorgestellten Bildes zu einem Beitrag in WordPress

Vorgestellte Bilder sind in einem WordPress—Blog unerlässlich, da sie die Bilder sind, die oben in Ihren Blog-Posts angezeigt werden (und sowohl in den Suchergebnissen als auch auf Social-Media-Plattformen, wenn Ihre Inhalte geteilt werden).

Zu guter Letzt erfahren Sie, wie Sie einem Beitrag (oder einer Seite) in WordPress ein ausgewähltes Bild hinzufügen.

Unten rechts in Ihrem WordPress-Editor-Fenster sehen Sie einen Abschnitt zum Hinzufügen eines vorgestellten Bildes. Klicken Sie auf „Set Featured image“ und Sie werden zum Standard-Bild-Upload-Bildschirm weitergeleitet, wo Sie das gewünschte Bild oben in Ihrem Beitrag hinzufügen können (auch in Suchergebnissen und auf sozialen Plattformen).

Nachdem Sie das zu verwendende Bild hochgeladen und auf „Ausgewähltes Bild festlegen“ geklickt haben, werden Sie zurück zu Ihrem Editorbildschirm weitergeleitet und sehen unten rechts eine kleine Miniaturansicht des Bildes (um zu bestätigen, dass Sie das richtige Bild hinzugefügt haben) wie folgt:

Ziemlich einfach, oder?

Wenn Sie das falsche Bild ausgewählt haben (oder später Änderungen vornehmen möchten), können Sie einfach auf den Text „Featured image entfernen“ klicken und Sie haben die Möglichkeit, ein anderes Bild auszuwählen oder hochzuladen, das in Ihrem Beitrag angezeigt werden soll.

Abschließende Gedanken zum Hinzufügen eines Bildes in WordPress

Das Hinzufügen von Bildern zu Ihren Posts in WordPress muss nicht schwierig sein.

Egal, ob Sie den klassischen Editor oder Gutenberg für Ihr Blog verwenden, das Team hinter WordPress hat hart daran gearbeitet, das Hinzufügen von Bildern zu einem sehr einfachen Prozess zu machen.

Wenn Sie immer noch Probleme haben, schreiben Sie mir bitte einen Kommentar am Ende dieses Beitrags.

Das ist alles für heute!

Wir haben gerade behandelt, wie man Bilder in WordPress hinzufügt 👏

Gefällt dir, was du siehst? Melden Sie sich an, um weitere Blogging-Tutorials und Ratschläge zu erhalten.

Willst du mehr Blogging-Tutorials?

Schauen Sie sich meinen ultimativen Leitfaden an, um dieses Jahr ein Blog zu starten und damit Geld zu verdienen.