loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

Wie man Bilder in WordPress richtig einfügt (Schritt für Schritt)

Sind Sie auf der Suche nach der richtigen Methode, um Bilder in Ihre WordPress-Website oder Ihren Blog einzufügen?

Durch das richtige Hinzufügen von Bildern in WordPress können Sie die visuelle Attraktivität, die Zugänglichkeit und die Suchmaschinenoptimierung Ihrer Website verbessern. Sie können den Nutzern sogar erlauben, ihre eigenen Bilder hochzuladen und sie auf Ihrer Website oder in Ihren Wettbewerben zu verwenden.

In diesem Artikel zeigen wir Ihnen, wie Sie Bilder in WordPress richtig hinzufügen.

Add images in WordPress properly

Die Wichtigkeit des korrekten Hochladens von Bildern in WordPress

Manchmal kopieren Nutzer ein Bild direkt aus der Quelle und fügen es in den Inhalt ihrer Website ein. Leider kann dies zu Problemen wie langsamen Seiten, schlechter Benutzerfreundlichkeit und schlechter Suchmaschinenoptimierung führen.

Wenn Sie Bilder zu IhremWordPress-Websiteist es wichtig, dies richtig zu tun. Das bedeutet, dass Sie das richtige Dateiformat, den richtigen Dateinamen und den richtigen Alt-Text verwenden.

Wir empfehlen, Ihre Bilder mit beschreibenden Wörtern zu benennen, die durch Bindestriche getrennt sind. Sie könnten zum Beispiel den Dateinamen „bali-vacation-photo.jpg“ für ein Bild in Ihrem Reiseblog verwenden.

Richtiges Hinzufügen von Bildern bedeutet auchGrößenänderung Ihrer Bilder damit sie schnell laden und auf allen Geräten gut aussehen. Zum Beispiel, einigeBildformate wie JPEGsind stärker komprimiert als andere, was bedeutet, dass diese Bilder weniger Platz auf Ihrem Server einnehmen und weniger Zeit zum Laden benötigen.

Durch die Verwendung dieser Formate, zusammen mit einemPlugin zur Bildkomprimierung für die Bilder auf IhremWordPress-Blogkönnen Sie die Benutzerfreundlichkeit Ihrer Website verbessern.

In ähnlicher Weise können Sie durch die Verwendung des Bildblocks in WordPress und die richtige Optimierung Ihrer Bilder für SEO und Alt-Text die Indexierung Ihrer Bilder durch Suchmaschinen erleichtern.

Dies kanndie Platzierung Ihrer Website zu verbessern und verbessern Sie die Zugänglichkeit Ihrer Website für Menschen mit Behinderungen.

Sehen wir uns also an, wie man Bilder in WordPress richtig einfügt. Wir werden mehrere Methoden behandeln, und Sie können die Quicklinks unten verwenden, um zu den verschiedenen Abschnitten unseres Tutorials zu springen:

Hinzufügen von Bildern im Block-Editor (Gutenberg)

Sie können Bilder ganz einfach in derWordPress-Block-Editor mit Hilfe des Bildblocks.

Öffnen Sie zunächst die bestehende oder neue Seite bzw. den Beitrag, zu dem Sie ein Bild hinzufügen möchten.

Wenn Sie dort sind, klicken Sie auf die Schaltfläche „+“ in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen. Von hier aus müssen Sie den Bildblock finden und dem Beitrag oder der Seite hinzufügen.

Add image block to the post

Klicken Sie anschließend auf die Schaltfläche „Medienbibliothek“, um die Aufforderung „Medien auswählen oder hochladen“ auf dem Bildschirm anzuzeigen.

Von hier aus können Sie zur Registerkarte „Dateien hochladen“ wechseln, wenn Sie ein Bild von Ihrem Computer hochladen möchten.

Wenn Sie jedoch ein Bild aus der Mediathek hinzufügen möchten, können Sie das auch tun, indem Sie zur Registerkarte „Mediathek“ wechseln.

Select image from the media library

Wenn Sie ein Bild hinzufügen, müssen Sie Folgendes hinzufügenAlt-Text für das Bild in der linken Spalte. Dieser Alt-Text ist entscheidend für die Bild-SEO, da er den Suchmaschinen hilft, den Kontext des Bildes zu verstehen. Er ermöglicht es auch Menschen mit Bildschirmlesegeräten, diese Informationen über Ihre Bilder zu sehen.

In der rechten Spalte können Sie außerdem einen Titel und eine Beschriftung für das Bild hinzufügen. Beschriftungen sind die sichtbaren Textbeschreibungen Ihrer Bilder, während der Titel erscheint, wenn ein Nutzer mit der Maus über das Bild fährt.

Weitere Informationen finden Sie in unserem Leitfaden für Einsteiger überwie man Bildunterschriften in WordPress hinzufügt.

Klicken Sie dann einfach auf die Schaltfläche „Auswählen“, um das Bild zu Ihrer Seite oder Ihrem Beitrag hinzuzufügen.

Fill in image details

Nachdem Sie ein Bild hochgeladen haben, können Sie dessen Größe, Abmessungen, Rahmen und Stil über das Blockbedienfeld auf der rechten Seite weiter anpassen.

Einzelheiten finden Sie in unserem Tutorial überwie man Bilder in WordPress hinzufügt und ausrichtet.

Images settings in the block panel

Klicken Sie schließlich auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Sie haben nun ordnungsgemäß ein Bild im Gutenberg-Editor hinzugefügt.

Hinzufügen von Bildern im klassischen Editor

Wenn Sie noch die alteklassischer Editor in WordPressdann können Sie diese Methode verwenden.

Zunächst müssen Sie die Seite oder den Beitrag, zu dem Sie das Bild hinzufügen möchten, über das WordPress-Dashboard aufrufen. Sobald Sie dort sind, klicken Sie einfach auf die Schaltfläche „Medien hinzufügen“, um die Medienbibliothek zu starten.

Click the add media button

Danach können Sie auf die Registerkarte „Dateien hochladen“ wechseln, um ein Bild von Ihrem Computer hochzuladen.

Um ein Bild aus der Mediathek hinzuzufügen, wechseln Sie einfach zur Registerkarte „Mediathek“.

Upload image file in the classic editor

Wenn Sie ein Bild hinzufügen, müssen Sie einen Alt-Text und einen Titel hinzufügen. Sie können auch eine Beschreibung und eine Beschriftung hinzufügen, wenn Sie dies wünschen.

Sie können das Bild für alle diese Optionen einfach beschreiben. Dies hilft der Suchmaschine, Ihr Bild zu indizieren und die Sichtbarkeit Ihrer Website zu erhöhen.

Klicken Sie anschließend auf die Schaltfläche „In Beitrag einfügen“.

Configure attachment details in classic editor

Jetzt wird das Bild zu Ihrem WordPress-Beitrag oder Ihrer Seite hinzugefügt.

Von hier aus können Sie die Ausrichtung des Bildes mithilfe der Ausrichtungssymbole über dem Bild ändern. Sie können ein Bild auch weiter bearbeiten, indem Sie auf das Bleistiftsymbol klicken.

Click the Pencil icon to edit an image

Dadurch wird die Eingabeaufforderung „Bilddetails“ auf Ihrem Bildschirm geöffnet, wo Sie die Größe ändern und Bildtitelattribute, CSS-Klassen, Ausrichtung usw. hinzufügen können.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“, um die Änderungen zu speichern.

Edit image in the classic editor

Danach klicken Sie einfach auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihren Beitrag zu speichern.

Hinzufügen von Bildern in der Mediathek

Wenn Sie möchten, können Sie auch direkt ein Bild zur Mediathek hinzufügen. Beachten Sie, dass Sie nach dem Hinzufügen eines Bildes zur Mediathek immer noch einen Beitrag oder eine Seite öffnen und den Bildblock einfügen müssen.

Um ein Bild aus der Mediathek hinzuzufügen, müssen Sie die SeiteMedien “ Neu hinzufügen Seite aus dem WordPress-Verwaltungsbereich.

Dort klicken Sie auf die Schaltfläche „Dateien auswählen“, um ein Bild von Ihrem Computer hochzuladen. Klicken Sie dann auf den Link „Bearbeiten“ neben dem Bild.

Add Image in the media library and click the Edit link

Dies führt Sie zur Seite „Medien bearbeiten“, wo Sie zunächst den Titel des Bildes ändern können. Danach können Sie einen Alt-Text, eine Beschriftung und eine Beschreibung hinzufügen, indem Sie nach unten scrollen.

Danach können Sie auch auf die Schaltfläche „Bild bearbeiten“ klicken.

Click the Edit Image button

Dadurch werden Sie auf eine andere Seite weitergeleitet, auf der Sie das Bild nach Belieben zuschneiden, skalieren, drehen oder spiegeln können. Ausführliche Anweisungen finden Sie in unserem Leitfaden für Einsteiger aufwie man grundlegende Bildbearbeitung in WordPress durchführt.

Wenn Sie zufrieden sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“, um Ihre Änderungen zu speichern.

basic editing features in WordPress

Dies führt Sie zurück zur Seite „Medien bearbeiten“, wo Sie erneut auf die Schaltfläche „Aktualisieren“ klicken müssen, um Ihre Einstellungen zu speichern.

Sie haben nun erfolgreich ein Bild zur Medienbibliothek hinzugefügt.

Rufen Sie als Nächstes den Beitrag auf, zu dem Sie das Bild über die WordPress-Verwaltungsseitenleiste hinzufügen möchten. Dort klicken Sie auf die Schaltfläche „+“, um dem Beitrag einen Bildblock hinzuzufügen.

Als nächstes müssen Sie die Schaltfläche „Medienbibliothek“ auswählen.

Image block

Daraufhin erscheint auf Ihrem Bildschirm die Aufforderung „Medien auswählen oder hochladen“, in der Sie das von Ihnen hochgeladene Bild oben in der Mediathek sehen.

Wenn Sie das Bild auswählen, sehen Sie, dass der Titel, der Alt-Text, die Beschriftung und die Beschreibung bereits auf der Seite der Medienbibliothek hinzugefügt wurden.

Klicken Sie nun einfach auf die Schaltfläche „Auswählen“, um das Bild in den Block-Editor hochzuladen.

Add image from the media library

Klicken Sie schließlich auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Einstellungen zu speichern.

Wie man ein Bild für WordPress SEO optimiert

Sobald Sie ein Bild zu einem Beitrag/einer Seite hinzugefügt haben, ist es auch wichtig, es für Suchmaschinen zu optimieren. Leider bietet WordPress keine integrierten erweiterten SEO-Funktionen für Bilder.

Dies ist der Ort, an demAll in One SEO für WordPress (AIOSEO) kommt herein.

Es ist diebestes WordPress SEO-Plugin auf dem Markt, mit dem Sie Ihre Inhalte, einschließlich Bilder, ganz einfach für Suchmaschinen optimieren können.

Zunächst müssen Sie das Programm installieren und aktivieren.AIOSEO Plugin. Weitere Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung aufwie man ein WordPress-Plugin installiert.

Anmerkung:AIOSEO hat auch einekostenlose Version. Sie benötigen jedoch die Pro-Version des Plugins, um die Image-SEO-Funktion freizuschalten.

Nach der Aktivierung müssen Sie den Einrichtungsassistenten konfigurieren.

Weitere Einzelheiten finden Sie in unserem Leitfaden überwie man All in One SEO für WordPress richtig einrichtet.

AIOSEO setup wizard

Als nächstes gehen Sie zurAll in One SEO “ Suchauftritt Seite in der WordPress-Administrations-Seitenleiste und wechseln Sie zur Registerkarte „Bild-SEO“.

Scrollen Sie dann nach unten und klicken Sie auf die Schaltfläche „Bild-SEO aktivieren“, um die Funktion freizuschalten.

Activating the Image SEO Module in AIOSEO

Sie können nun die Bild-SEO-Einstellungen sehen. Hier sehen Sie verschiedene Registerkarten für den Titel, den Alt-Text, die Beschriftung, die Beschreibung und den Dateinamen.

Konfigurieren von automatischen Bildtiteln

Sobald Sie auf der Seite Bild-SEO zur Registerkarte „Titel“ wechseln, können Sie damit beginnen, ein Titelformat für Ihre Bilder mithilfe von Smart Tags zu erstellen.

Diese Smart Tags erzeugen dann automatisch Titelattribute für Ihre Bilder. Das ist es, was ein Besucher sehen wird, wenn er mit der Maus über Ihre Bilder fährt.

Wenn Sie beispielsweise möchten, dass jedes Bildtitel-Attribut den Bildtitel und den Titel der Website verwendet, können Sie diese Smart Tags in das Feld „Titelformat“ einfügen.

Add smart tags to configure title SEO

Danach können Sie auch die Option Interpunktion entfernen aktivieren, wenn Sie möchten, dass AIOSEO beim Erstellen eines Bildtitels automatisch einige Zeichen aus dem Dateinamen entfernt.

Wenn Sie zum Beispiel beim Speichern einer Bilddatei wie „an-example-image“ Bindestriche verwenden, können Sie im Abschnitt „In Leerzeichen umzuwandelnde Zeichen“ die Option „Bindestriche (-)“ wählen.

Sobald Sie dies getan haben, entfernt AIOSEO automatisch die Bindestriche und verwandelt sie in Leerzeichen, so dass der Bildtitel „ein Beispielbild“ ist.

Configure strip punctuation and casing options

Danach blättern Sie nach unten zum Abschnitt „Gehäuse“.

Hier können Sie eine Groß- und Kleinschreibung für Ihren Titel wählen. Wir empfehlen, die Groß- und Kleinschreibung zu wählen, damit Ihre Titel besser lesbar sind.

Automatische Alt-Tags konfigurieren

Nachdem Sie die Titeleinstellungen konfiguriert haben, wechseln Sie oben auf die Registerkarte „Alt-Tag“.

Von hier aus können Sie die Smart-Tags neben der Option „Alt-Tag-Format“ verwenden, um automatisch Alt-Text für alle Ihre Bilder zu erzeugen.

Danach können Sie auch die Einstellung „Interpunktion entfernen“ aktivieren, wenn Sie möchten, dass Zeichen wie Bindestriche (-) oder Unterstriche (_) in Leerzeichen umgewandelt werden.

SEO settings for alt tags

Wenn es Zeichen wie Zahlen oder Pluszeichen (+) gibt, die AIOSEO bei der Erstellung des Alt-Textes nicht entfernen soll, können Sie die Kästchen für diese Optionen im Abschnitt „Auszuschließende Zeichen“ aktivieren.

Sie können auch ein Gehäuse für Ihren Alt-Text auswählen.

Automatische Untertitel und Beschreibungen konfigurieren

Um automatische Beschriftungen für Ihre Bilder zu erstellen, wechseln Sie zur Registerkarte „Beschriftungen“.

Vergewissern Sie sich hier, dass die Option „Beschriftung beim Hochladen automatisch generieren“ aktiviert ist. Sie können dann die Smarttags auswählen, die zur Erstellung von Bildunterschriften verwendet werden sollen.

Enable Captions toggle and configure its smart tags

Außerdem können Sie mit der Funktion „Interpunktion entfernen“ Zeichen in den Beschriftungen ausschließen oder einschließen und ein Gehäuse für sie wählen.

Sobald Sie fertig sind, müssen Sie von oben auf die Registerkarte „Beschreibung“ wechseln.

Vergewissern Sie sich hier, dass die Option „Beschreibung beim Hochladen automatisch generieren“ aktiviert ist. Sie müssen auch die Smarttags auswählen, die Sie für die automatische Erstellung von Bildbeschreibungen verwenden möchten.

Enable the Description toggle and configure its smart tags

Sie können auch die Funktion „Interpunktion entfernen“ verwenden, um Zeichen wie Unterstriche, Apostrophe oder Zahlen in die Beschreibung aufzunehmen oder auszuschließen.

Danach wählen Sie einfach ein Gehäuse für Ihre Bildbeschreibungen aus.

Strip punctuation and casing settings

Automatische Dateinamen konfigurieren

Wie wir bereits erwähnt haben, empfehlen wir, Ihren Bilddateien SEO-freundliche Dateinamen zu geben. Sie können dies tun, bevor Sie Ihre Bilder hochladen, oder AIOSEO kann dies automatisch für Sie tun.

Sobald Sie von oben auf die Registerkarte ‚Dateiname‘ wechseln, werden Sie feststellen, dass AIOSEO die Einstellung ‚Strip Punctuation‘ bereits für Sie konfiguriert hat.

Wenn Sie jedoch möchten, dass AIOSEO bei der Erstellung von Titeln oder Alt-Texten weitere Zeichen aus den Dateinamen Ihrer Bilder entfernt, können Sie diese Zeichen in das Feld „Zu entfernende Wörter“ eingeben.

AIOSEO settings for Filename

Danach können Sie auch ein Gehäuse für Ihre Dateinamen auswählen.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Sie haben Ihre Bilder nun erfolgreich für SEO optimiert, und AIOSEO generiert automatisch Titel, Alt-Text, Beschriftungen und Beschreibungen für alle Ihre Bilder.

Ausführlichere Anweisungen finden Sie in unserem Leitfaden für Einsteiger unterwie man Bilder für Suchmaschinen optimiert.

Bonus: Erlauben Sie Benutzern, Bilder in WordPress hochzuladen

Vielleicht möchten Sie Ihren Nutzern auch erlauben, ihre eigenen Bilder auf Ihre WordPress-Website hochzuladen. Dies kann nützlich sein, wenn Sie einen Wettbewerb veranstalten oder eineFotografie-Website die nutzergenerierte Bilder akzeptiert.

Hierfür können Sie Folgendes verwendenWPFormsdas ist diebestes Kontaktformular-Plugin auf dem Markt. Es kommt mit einem Drag-and-Drop-Builder, der es super einfach macht, jede Art von Formular zu erstellen, die Sie wollen, einschließlich eines Bildübermittlungsformulars.

Zunächst müssen Sie das ProgrammWPForms Plugin. Einzelheiten finden Sie in unserer Anleitung unterwie man ein WordPress-Plugin installiert.

Nach der Aktivierung gehen Sie zumWPForms “ Neu hinzufügen auf dem WordPress-Dashboard, um den Formularersteller zu starten.

Hier müssen Sie einen Namen für Ihr Formular eingeben und dann auf die Schaltfläche „Snippet verwenden“ unter der Vorlage „Einfaches Kontaktformular“ klicken.

Select contact form template

Dadurch wird die Formularvorlage in den Formularersteller geladen, wo Sie die Vorschau auf der rechten Seite und die verfügbaren Felder in der linken Spalte sehen.

Ziehen Sie von hier aus das Feld für den Datei-Upload auf das Formular und klicken Sie darauf, um die Einstellungen weiter anzupassen.

Add file upload field

Hier können Sie die Bezeichnung und die Beschreibung des Feldes ändern und sogar die zulässigen Erweiterungen angeben.

Wenn Sie zum Beispiel nur JPEG- und PNG-Dateien zulassen möchten, müssen Sie diese Optionen in das Feld „Erlaubte Dateierweiterungen“ eingeben. Denken Sie daran, die einzelnen Erweiterungen durch ein Komma zu trennen.

Danach können Sie in der linken Spalte auch die maximale Größe der Bilddatei und die Anzahl der Uploads einstellen.

Configure field settings

Ausführlichere Anweisungen finden Sie in unserem Tutorial überwie man Nutzern erlaubt, Bilder in WordPress hochzuladen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Öffnen Sie dann die Seite/den Beitrag, zu der/dem Sie das Formular zum Hochladen von Bildern hinzufügen möchten. Klicken Sie dort auf die Schaltfläche „+“ in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen

Von hier aus müssen Sie den WPForms-Block zu der Seite/dem Beitrag hinzufügen.

Locate and add the WPForms block

Wählen Sie einfach das von Ihnen erstellte Formular zum Hochladen von Bilddateien aus dem Dropdown-Menü aus.

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner