Beitrag

 
Was Sie bei der Verwendung von Bilder in WordPress beachten sollten

Worauf Sie beim Einfügen von Bildern in WordPress unbedingt achten sollten!

Eine Website ohne Bilder? Unvorstellbar! Website-Betreiber kommen gar nicht drum herum, sich mit diesem Thema auseinanderzusetzen. Hier deshalb eine Hilfestellung: Tipps und Tricks dazu, worauf es beim Einfügen von Bildern in WordPress ankommt und was dabei alles beachtet werden sollte.

Bilder sind ein wichtiger Bestandteil einer jeden Website. Sie geben dem Besucher einen ersten Eindruck davon, mit wem oder was er es eigentlich zu tun hat. Und wie heißt es doch so schön: Der erste Eindruck währt am längsten.

Bevor man sich also mit den technischen Rahmenbedingungen beschäftigt, die beim Einfügen von Bildern in WordPress eine Rolle spielen, gilt es, eine attraktive Auswahl an aussagekräftigen Motiven zusammenzustellen. Dabei kann es sinnvoll sein, die Hilfe eines professionellen Fotografen in Anspruch zu nehmen.

Format, Dateigröße und -namen – Vorbereitung beim Einfügen von Bildern in WordPress

Ist qualitativ hochwertiges Bildmaterial vorhanden, geht es im nächsten Schritt darum, dieses für eine optimale Performance auf der Website aufzubereiten. Entscheidend dafür ist beispielsweise die Dateigröße. Diese sollte unter 200 Kilobyte liegen, damit die eigene WordPress-Website bei allen Nutzern trotz unterschiedlicher Internetgeschwindigkeiten zügig lädt. Nichts ist nerviger, als lange Ladezeiten beim Besuch eines Webangebots.

Eine geeignete Dateigröße erreicht man, indem man seine Bilder je nach verwendetem Theme in der Breite auf 800 bis 1.400 Pixel beschränkt und im JPG-Format bei etwa achtzigprozentiger Auflösung abspeichert. Den Satz am besten noch mal lesen. Jetzt noch einen sinnvollen Dateinamen für die Suchmaschinen wie Google, der das wichtigste Keyword beinhaltet, vergeben und die Vorbereitung für den Upload ist abgeschlossen:

  • Richtige Datenmenge: < 200 KB
  • Richtige Breite: 800 bis 1400 Pixel
  • Richtiges Dateiformat: PNG oder 
JPG (Qualität ca. 80%)
  • Richtiger Dateinamen: 
Beschreibung des Bildes.jpg

Eine Ausnahme von dieser Regel gibt es, wenn Sie Ihre Website für hochauflösende Bildschirme, wie Apples Retina Displays optimieren wollen. Dazu haben wir einen gesonderten Beitrag geschrieben.

Bilder in WordPress einfügen – so geht’s

Nun geht es ans Hochladen der Bilder in die eigene WordPress-Mediathek. Dies kann auf verschiedenen Wegen erfolgen: zum einen über den Upload in die Mediensammlung, die sich hinter dem Menüpunkt „Medien“ in der linken Navigationsleiste verbirgt. Zum anderen über die direkte Integration in einen Beitrag. Erstellt man einen solchen, erscheint unter dem Feld für die Titeleingabe die Schaltfläche „Dateien hinzufügen“.

WordPress - Bild hochladen über "Datei hinzufügen"

 

Wählt man diese aus, kann im nächsten Schritt die Entscheidung getroffen werden, ob man ein Bild aus der Mediathek verwenden oder ein neues hochladen möchte. Dabei ist es möglich, die Dateien in einem Browser auszuwählen oder via Drag-and-Drop auf die Seite zu ziehen.

WordPress - Ziehen Sie die Datei zum Hochladen

 

Bilder ausrichten und positionieren

Eines der wichtigsten Kapitel in unseren WordPress-Workshops nimmt das Thema Ausrichten und Positionieren von Bildern ein. Die Bild- und Text-Ausrichtung ist nicht selten ein Grund für Frustrationen für Website-Betreiber, denn das Vermengen von Text und Bildern ist in HTML nicht ganz so einfach wie in Microsoft Word.

Lesen Sie in einem separatem Beitrag ein paar Tipps, wie Sie die Ausrichtung der in WordPress eingefügten Bilder finetunen können.

Bilder in WordPress bearbeiten

Sind die Bilder in WordPress hochgeladen, können sie hier weiter bearbeitet werden. Diesbezüglich ist es von besonderer Bedeutung, die Felder für den „Titel“ und den „Alternativtext“ auszufüllen, da diese einen Beitrag zur Auffindbarkeit in der Google-Suche leisten. Suchmaschinen können schließlich nur Text auslesen.

Dem Alternativtext oder „Alt-Tag“ kommt noch eine besondere Bedeutung zu: Er wird mittels sogenannter Screenreader vorgelesen und sorgt so für barrierefreie Websites und ist entsprechend unbedingt auszufüllen!

Metadaten zu Bildern hinzufügen

Weiterhin können an dieser Stelle die Ausrichtung sowie die Darstellungsgröße des Bildmaterials bestimmt werden. Das Gleiche gilt für die Bildunterschrift, die später unter der Abbildung auf der Website angezeigt wird. Und das Gleiche gilt für die Beschreibung, die gut für interne Zwecke genutzt werden kann.

Die Liste der wichtigen Metadaten für Bilder in WordPress

Bildgröße direkt im Beitrag anpassen

Die Darstellungsgröße eines Bildes kann zudem direkt auf der Oberfläche der Beitragsbearbeitung angepasst werden. Und zwar durch einfaches Größer- beziehungsweise Kleiner-Ziehen. Auf diese Funktion sollte man allerdings nur in Ausnahmefällen zugreifen und lieber die Bilder vor dem Hochladen bereits auf die richtige Größe bringen. Entweder um die Datenmenge zu reduzieren oder die Qualität zu verbessern.

Bildgröße in WordPress anpassen

Klickt man im Bild auf das Stift-Symbol, gelangt man wiederum in den Bearbeitungsmodus. Hier gibt es für fortgeschrittene Anwender die Möglichkeit, erweiterte Optionen zu nutzen.

Bild direkt in WordPress bearbeiten

 

Auch gutes kann man noch verbessern. In einem Beitrag haben wir zusammengefasst, was WordPress bei der Bildverarbeitung fehlt.

Beitragsbild in WordPress festlegen

Zu guter Letzt eine weitere wichtige Komponente in WordPress: das Beitragsbild. Das Beitragsbild wird – je nach verwendetem Webdesign und der vorgenommenen Einstellungen – auf verschiedenen Übersichten zusammen mit dem Beitrag angezeigt.

Verwendung von Beitragsbildern in WordPress

 

Wie legt man das Beitragsbild fest? Ganz einfach: über den Link „Beitragsbild festlegen“ in der rechten Spalte der Maske zur Beitragserstellung. Und wieder kann entweder ein neues Bild von der eigenen Festplatte hochgeladen oder eins aus der Medienbibliothek ausgewählt werden.

Beitragsbild in WordPress festlegen

 

So, nun aber viel Spaß bei der Bebilderung Ihrer WordPress-Website!

Autor:

Elbnetz ist ein Team enthusiastischer WordPress-Fans. Wir sind davon überzeugt, dass niemand überkandidelte, komplizierte Websites braucht. Mit WordPress ist es möglich, grandiose Websites zu entwickeln.

  • Mathias Judersleben

    Super Beitrag wenn man auf Speed achten muss sollte man die Bilder auch komprimieren.
    Ich habe ein guten online Tool gefunden, wo die Qualität auch nicht sehr eingeschränkt ist.
    https://compressor.io/
    Meiner Meinung nach der beste Tool

    Antworten
  • Andi

    Sehr schöner Beitrag! Frage: Kann man eigentlich auch ein Bild per Mail mitsenden das über das Kontaktfomular via WordPress erstellt wird? Beispiel: Kunde XY gibt seine Kontaktdaten ein. Ich möchte nun gern von der Unterseite wo er sich befunden hat, das Beitragsbild mitsenden von dem Produkt. Möglich ?

    Antworten
    • Elbnetz Redaktion

      Ahoi Andi!

      Hmmm, wir sind nicht sicher, ob wir Deine Frage verstehen. Sprichst Du von einem Kontaktformular, dann hängt es vom verwendeten Plug-in ab, ob Bilder hochgeladen werden können. Die bekanntesten „Contact Form 7“ und „Gravity Forms“ können das mit Leichtigkeit.

      Beste Grüße, Deine Elbnetz Redaktion,

      Antworten
  • Peter Buchmann

    Hallo,
    ich versuche nun auch, meine homepage etwas mehr nach meinem Geschmack einzurichten.
    Im Theme Twenty fourteen finde ich keine Möglichkeit, das Beitragsbild so auszurichten, dass der Text entweder links oder rechts davon erscheint, also quasi am oberen Rand des Beitragsbildes beginnt. Oder wird das Beitragsbild in diesem Theme immer oberhalb des Textes angezeigt?
    Über eine Hilfestellung würde ich mich freuen.
    Viele Grüße
    Peter Buchmann

    Antworten
    • Elbnetz Redaktion

      Hallo Herr Buchmann,
      die Größe des Beitragsbildes ist vom Designer des Themes festgelegt. Man kann das Format und die Größe natürlich anpassen, doch das würde einen größeren Eingriff bedeuten. Dabei können wir Ihnen behilflich sein.
      Oder Sie suchen sich ein für Ihre Bedürfnisse und Geschmack passenderes Theme aus.

      Beste Grüße und einen guten Rutsch,
      Ihre Elbnetz Redaktion

      Antworten
  • Peter Dworak

    Ich verwende für meinen Fitness-Blog animierte Bilder (GIFS). Damit kann ich wunderbar Bewegungsabläufe der Übungen darstellen.

    Bin mir nicht sicher, ob ich dafür die richtige Größe und Abmessung verwende… z. B. habe ich für Rückentrainingsgerät ein GIF mit der Dateigröße 384 KB mit der Abmessung 650×376 erstellt. Siehe http://wp.me/p4OuKv-34

    Was halten Sie davon? Bitte um Feedback und Ratschlag…

    Antworten
    • Elbnetz Redaktion

      Hallo Herr Dworak,

      die Dateigröße von 384 KB und auch die Abmessungen sind für Ihren Fall völlig OK.

      Herzliche Grüße,
      Elbnetz-Redaktion

      Antworten
  • Henning Papendorf

    Vielen Dank für Ihre Einweisung. Eigentlich ist es nur mein Job, den Text dieser Seite http://www.meditation.de zu redigieren, ev. auch mal ein Grafik (mitPhotoshop) zu ändern. Ansonsten bin ich ein blutiger Anfänger, was WordPress betrifft. Ich habe nun das Problem, dass von mir geänderte und neu eingefügte Fotos/Grafiken sich nicht wirklich zum Text mit korrektem Abstand oben und unten einfügen lassen und es mir vor allem nicht gelingt, die Vergrößerungsfunktion beim Klicken auf ein Bild zu aktivieren. Aktuell geht es gerade um diese Unterseite: http://meditation.de/brain-landing-page/
    Das Foto „Verbesserte geistige Gesudnheit“ kann man größerklicken, nicht aber die beiden Fotos „Außergewöhnlich tiefe Ruhe“ und „Anstieg der Glückshormone“. Ich wäre für einen kurzen Hinweis sehr dankbar.
    Henning Papendorf

    Antworten
    • Elbnetz Redaktion

      Hallo Herr Papendorf,

      die Abstände der Bilder nach oben und unten werden über CSS-Befehle beeinflusst. Wenn Sie die Abstände angepasst haben möchten, sollten Sie den Entwickler des Designs bitten Ihre Wünsche umzusetzen.

      Möchten Sie, dass bei einem Klick ein größeres Bild erscheint, müssen Sie zum einen eine größere Version hochladen (WordPress legt automatisch kleinere Bildversionen an) und diese dann in den Optionen rechts unten mit der „Mediendatei“ verlinken.

      Beste Grüße aus Hamburg,
      Ihr Elbnetz-Support

      Antworten
  • Manuel Groh

    Tolle Einsteiger-Anleitung!
    Ich habe aber noch ein entscheidendes Problem mit de Einfügen von Bildern. Und zwar möchte ich den Text um Bilder herumfließen lassen (Theme TwentyFourteen). Ich weiß, dass ich den entsprechenden Befehl über den HTML-Editor in den -Befehl einfügen kann, das ist allerdings für die Autoren ohne HTML-Kenntnisse leider nicht praktikabel.

    Gibt es eine Möglichkeit das über Custom CSS o.ä. zu lösen?

    Über Tipps & Tricks wäre ich sehr dankbar!

    Antworten
    • Elbnetz Redaktion

      Hallo Herr Groh,

      es freut uns, dass wir Ihren Einstieg erleichtern konnten.

      Sie haben sicherlich den Verweis auf unseren Beitrag Tipps und Tricks beim Ausrichten von Text und Bildern bemerkt und die Anweisungen dort gelesen.

      Also gehen wir davon aus, dass Sie das Bild zentrieren und mit Text links und rechts umfliessen lassen möchten. Das ist mit CSS allein nicht möglich, sondern würde eine komplexe Umsetzung – besonders im Hinblick auf responsive Design – erfordern.

      Beste Grüße,
      Ihre Elbnetz-Redaktion

      Antworten
  • Leonie

    Hallo 🙂

    Euer Beitrag war mir sehr hilfreich. Allerdings habe ich eine Frage: ist es bei meinem Theme (Ever After) möglich, das Beitragsbild linksbündig zu formatieren, sodass der Text rechts daneben verläuft?

    Liebe Grüße,
    Leonie

    Antworten
    • Elbnetz Redaktion

      Moin Leonie,

      wir kennen zwar das Theme nicht, aber grundsätzlich ist alles möglich. Je nach Aufbau des Themes kann man Deinen Wunsch entweder mit CSS-Formatierungen umsetzen oder muss die entsprechende PHP-Vorlage anpassen. Ein Fachmann oder eine Fachfrau Deiner Wahl wird Dir sicher helfen können.

      Sonnige Grüße,
      Dein Elbnetz-Team

      Antworten
  • Khoa

    Sehr schöner Artikel mit informativen Inhalten, die ich sehr gern weiterempfehlen. Ich denke, dass bei CMS Systemen wie WordPress der passende Hoster ausgewählt werden sollte, damit Bildanpassungen sich auf die Ladegeschwindigkeit positiv auswirken. Plug-Ins sollten nur spärlich eingesetzt werden (vgl. http://www.seejey.de/2015/05/14/bildgroesse-von-fotos-fuer-internetseiten-anpassen/ ). Ich finde die simple Bildkomprimierung über Microsoft Office Picture Manager ein wenig haasträubend, wo die Datenspeichermenge im Gegensatz zu Komprimierungstools im Internet viel höher ausfällt.

    Antworten
  • Bernadette

    Hallo,

    ich bin neu bei WordPress und habe mir ein Theme ausgesucht, das auf der ersten Seite ein vollformatiges Foto zeigt. Das möchte ich natürlich gegen ein eigenes austauschen. Muss ich vor dem Hochladen mein Foto exakt formatieren, das heißt rausfinden, wie breit/hoch das bisherige in Pixeln ist? Oder kann ich einfach eins hochladen und es wird dann sozusagen „automatisch“ angepasst?
    Vielen Dank übrigens, dass ihr so eine verdienstvolle Seite macht. Ich hoffe, ich kann noch viel aus eurem Forum lernen.

    Antworten
    • Elbnetz Redaktion

      Hallo Bernadette,

      Deine Frage kann man nicht pauschal beantworten. Beides ist möglich, das hängt vom Theme ab.

      Grundsätzlich ist es aber ratsam, die Bilder so gut es geht zuzuschneiden und in der Größe möglichst genau vorzubereiten.

      Ansonsten gilt: Ausprobieren!

      Besten Gruß,
      Die Elbnetz-Redaktion

      Antworten
  • Bernadette

    Vielen Dank für die Antwort; ich werde es ausprobieren. Ich habe bei weiterer Recherche etwas über das Plugin „Enable Media Replace“ gefunden – verstehe ich es richtig, das dieses Tool bei eventuellen Problemen mit der Bildgröße helfen könnte?
    Ich bleibe dran … schönen Tag noch.

    Antworten
    • Elbnetz Redaktion

      Ja, das ist ein sehr gute Plug-in um direkt die Mediendatei auszutauschen.

      Antworten
  • Milena

    Bei mir geht es leider nicht. Ich habe nicht diese Funktion die Bildgröße einzustellen und die Qulität. Brauche ich ein Plugin ? liebe Grüße Milena

    Antworten
    • Elbnetz Redaktion

      Hallo Milena,

      was genau geht bei Dir nicht? Solltest Du nicht die beschriebenen Funktionen haben, könntest Du eine ältere WordPress-Version installiert haben oder Dein Browser zeigt das nötige Java-Script nicht an.

      Lieben Gruß,
      Die Elbnetz-Redaktion

      Antworten
  • Nick

    Für Seiten mit großen Bildern und/oder Bildergalerien bzw. Webseiten mit Produktübersichten, würde ich definitiv von PNG abraten! Wenn es um Ladezeitoptimierung geht kommt man einfach um Photoshop und seiner „Für Web speichern“ Funktion nicht drumherum. Ich habe das gerade durch mit einer Firmenseite, die mehr als 1000 Artikel hat. Ich speichere ausschließlich im JPG Format mit einer Qualität von 60-80%, bei Bildern mit viel rot manchmal 80-100%. Ein normales Foto mit Hintergrund oder Farbverläufen ist als PNG immer gute 100-300% größer (Dateigröße) als ein JPG bei gleicher Qualität am Bildschirm.
    PNG eignet sich nur, wenn es größere Formate sind, die scharf dargestellt werden sollen UND Transparenzen enthalten sind. Für kleinere Schmuckelemente oder Logos mit einer Hand voll Farben UND Transparenzen würde ich z.B. nach wie vor als GIF speichern, da nur die Farben gespeichert werden, die es wirklich braucht. Das PNG-Format ist dafür einfach zu aufgebläht. Und wer seine Produktfotos/Urlaubsfotos etc. mit Photoshop eh schon optimiert, sollte Abstand halten von Plugins oder WP-internen Kompressionstools. Diese verwandeln schöne Fotos teilweise in regelrechten Pixelmatsch.

    Antworten
  • Constanze

    Herzlichen Dank für die hilfreichen Beiträge! Macht es eigentlich Sinn, Bilder extern (z.B. Flickr o.ä.) zu speichern und dann über einen Link einzufügen um Speicherplatz zu sparen? Oder gibt das Probleme? Liebe Grüße

    Antworten
    • Elbnetz Redaktion

      Die Praxis macht am meisten bei Videos Sinn, weil normale Webserver nicht wirklich für die Auslieferung von Videos geeignet sind.
      Bei Bildern ist der Vorteil geringer, weil sie wesentlich weniger Speicherplatz benötigen.
      Das Einzige, was man riskiert ist, dass die Bilder irgendwann nicht mehr im Netzt sind.

      Liebe Grüße,
      Das Elbnetz-Team

      Antworten
  • Kai Martin

    Moin,

    Erstmal gute Site.

    Für meinen Video Blog möchte ich gerne ein animiertes Beitragsbild. Sofern es möglich ist, wie ? Einfach ein animiertes Bild als Beitragsbild einfügen oder coding betreiben ?

    Beste Grüße,
    Martin

    Antworten
    • Elbnetz Redaktion

      Moin Martin,

      vielen Dank für Deine Nachricht. Leider haben wir keine Antwort auf Deine Frage. Wir haben noch kein animiertes GIF als Beitragsbild eingefügt. Einfach mal ausprobieren und uns mitteilen, ob es funktioniert 🙂

      Besten Gruß und viel Erfolg,
      Die Elbnetz-Redaktion.

      Antworten
      • Kai Martin

        Hy,

        erstmal danke für die Rückmeldung. Hätte ja sein können, dass Ihr das bereits probiert habt 🙂

        Ich habe gerade es probiert, zwar mit einem sehr kleinen animierten Gif, aber es scheint tatsächlich zu funktionieren.

        Beste Grüße,

        K. Martin Bönki

        Antworten
  • Andi

    Hallo, bei mir erscheinen die Beitragsbilder leider nicht. Woran kann das liegen?
    http://bulli-botschafter.de/
    Gruß
    Andi

    Antworten
    • Kim Salewski

      Hallo Andi,

      Es kann sein, dass dein Theme gar keine Beitragsbilder zulässt.
      Geh ansonsten sicher, dass du deinen Beiträgen ein Beitragsbild zugeteilt hast.

      Viele liebe Grüße,
      Kim

      Antworten
  • Ewald Sindt

    Hallo und guten Tag,
    ich nutze WP und komme auch gut damit zurecht, nutze sowohl die App als auch den PC. Das einzige, was mir nicht gelingt ist den Headertext mit einem Bild zu hinterlegen. Bei den Blogbeiträgen ist das ja kein Problem.
    Evtl. haben Sie ja einen Tipp für mich.
    MFG
    Ewald Sindt

    Antworten
    • Kim Salewski

      Moin Ewald,

      Es hängt vom Theme ab, ob es Bilder hinter Headlines zulässt. Wie man an unseren Beiträgen sieht, steht die Headline in einigen Themes auch unter dem Beitragsbild. Headlines auf Bildern sind also nicht die Norm. Unterschiedliche Themes bieten da unterschiedliche Designs an, leider können wir da pauschal keine genaue Antwort geben.

      Viele liebe Grüße,
      Kim

      Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?