Bilder sind für viele Blogs ein wichtiger Bestandteil des Layouts und ergänzen geschriebenen Inhalt. WordPress bietet zahlreiche Möglichkeiten, Bilder einzubinden und zu optimieren. Über die Auswirkungen auf und Optimierung für deine Ladezeit habe ich hier schon einmal geschrieben.

In diesem Artikel möchte ich dir ein paar kompakte Tipps und Tricks zeigen, mit denen du die Bildfunktionen von WordPress effektiver nutzen und einige häufige Probleme lösen kannst.

1. Bilder hochladen

Schon vor dem Upload solltest du deine Bilder vorbereiten:

  • Gib der Datei einen kurzen, sprechenden Namen (möglichst ohne Sonderzeichen und Umlaute)
  • Ändere die Größe von Fotos auf eine „sinnvolle“ Pixelzahl, je nach deinem Theme, z.B. 1200 Pixel Breite und eine Auflösung von z.B. 144 dpi.
  • Bearbeite dein Bild nach deinen Wünschen und Fähigkeiten, z.B. in Photoshop Elements* oder Snapseed.

Nach dem Upload kannst du verschiedene Informationen hinzufügen:

WordPress Mediathek Screenshot

  • Titel: Vergib einen sprechenden Titel
  • Bildunterschrift: Nach Belieben füge hier Text hinzu, der im Beitrag unter dem Bild angezeigt wird (funktioniert i.d.R. nicht bei Beitragsbildern)
  • Alternativtext: Beschreibe den Inhalt des Bildes – z.B. für Screenreader oder Fälle, wenn das Bild nicht geladen werden kann
  • Beschreibung: Ausführlichere Beschreibung, z.B. für die Mediendetailseite
  • Ausrichtung: Ausrichtung des Bildes im Text (keine Auswirkung für Beitragsbilder)
  • Link zur: Verlinke das Bild selbst (um es in Originalgröße ansehen zu können), eine andere Seite oder gar nichts
  • Größe: Wähle eine Größe, die möglichst nicht über die maximale Inhaltsbreite des Artikels hinaus geht, um Ladezeit zu sparen

2. Galerien erstellen

Wusstest du, dass du direkt in WordPress, ohne weitere Plugins, Bildergalerien erstellen kannst? Unter „Datei hinzufügen“ kannst du nicht nur neue Bilder hochladen, sondern auch direkt eine Galerie erstellen. Damit kannst du beispielsweise ein Album von Bildern in einem Beitrag präsentieren und eigene Bildunterschriften vergeben. Die Bilder werden in Spalten angezeigt und könen einzeln vergrößert werden.

Screenshot Galerie erstellen über WordPress MediathekScreenshot Galerie bearbeiten und einfügen

3. Problem: Bilder werden auf dem iPhone nicht angezeigt

Wenn Bilder auf deinem Computer, nicht aber auf dem iPhone angezeigt werden, kann das an Umlauten im Dateinamen liegen. Vermeide Umlaute und andere Sonderzeichen in Dateinamen – denn sie lassen sich nicht direkt in URL-konforme Namen übersetzen. Ersetze sie durch Entsprechungen wie „ue“ für „ü“ oder „ss“ für ß.

Nachträglich kannst du problematische Dateinamen mit diesem Plugin bearbeiten – prüfe danach aber, ob alle Bilder noch an den gewünschten Stellen angezeigt werden.

4. Problem: Bilder können nicht hochgeladen werden

Wenn du diesem Fehler beim Hochladen von Bildern in die Mediathek begegnest, probiere es zunächst einfach nochmal. Der Fehler tritt unter anderem auf, wenn deine Verbindung zum Webserver während des Uploads unterbrochen wird. Auch das Neuladen (vorher speichern!) des Editors kann helfen.

Screenshot HTTP Fehler beim Hochladen von Bildern in der MediathekWenn der Fehler bestehen bleibt, prüfe folgendes:

  • Hast du noch genügend freien Speicherplatz auf deinem Webhosting?
  • Besteht das Problem nur bei einem bestimmten Bild oder bei allen?
  • Ist das Bild größer als die konfigurierte maximale Uploadgröße?
  • Falls du vorher noch keine Bilder auf deine Website geladen hast oder du gravierende Änderungen an deiner Installation vorgenommen hast: Prüfe per FTP das Verzeichnis /wp-content/uploads – es sollte mindestens die Berechtigung 755 haben.
  • Vielleicht ist auch einfach dein Hoster überlastet. Probiere es ein paar Stunden später erneut. Wenn das Problem bestehen bleibt, kontaktiere deinen Hoster und/oder hole dir professionellen Rat (z.B. von uns).

 

5. Standardbeitragsbild festlegen

Wenn du nicht für jeden Blogbeitrag ein eigenes Beitragsbild hochladen möchtest, aber z.B. aus Layoutgründen immer ein Beitragsbild anzeigen möchtest, könnte ein Standardbeitragsbild die Lösung für dich sein. Wenn du in einem Beitrag nicht explizit ein eigenes Titelbild festlegst, wird damit immer ein standardmäßig festgelegtes angezeigt.

Um das zu erreichen, könntest du mit etwas PHP-Kenntnissen den Code deines Themes (in einem Child-Theme) anpassen. Leichter geht es mit dem Plugin Default Featured Image.

6. Beitragsbild erzwingen

Wenn du mit anderen Autoren zusammenarbeitest und Beiträge nicht immer vor der Veröffentlichung kontrollieren kannst, kannst du mithilfe eines Plugins das Festlegen eines Beitragsbild vorschreiben. Dazu eignet sich z.B. Required Featured Image. Bevor der Beitrag veröffentlicht werden kann, erscheint ein Hinweis, der zum Upload des Titelbilds auffordert.

7. Lightbox einrichten

Eine so genannte Lightbox ist eine Bilderansicht, die wir von vielen Websites kennen – du klickst auf ein Bild und es öffnet sich, während der Rest der Website abgedunkelt in den Hintergrund tritt. Mit Pfeiltasten kannst du innerhalb der Bilder einer Galerie oder Seite vor- und zurückgehen.

Beispiel Screenshot einer Lightbox

Fast automatisch gelingt die Einrichtung einer Lightbox für deine bestehenden Bildern mit dem Plugin Simple Lightbox. Damit erscheinen alle Bilder eines Beitrags automatisch in einer Lightbox. Wenn du explizit festlegen möchtest, welche Bilder in der Lightbox erscheinen und diese nicht einzeln in den Beitrag einfügen möchtest, könnte das Plugin Lightbox Gallery passen.

Bevor du jedoch ein neues Plugin installierst, prüfe, ob dein Theme nicht schon eine ähnliche Funktion mitbringt. Wenn du Minify oder andere Slider-/Galerie-Plugins verwendest, könnte es außerdem sein, dass du die Einstellungen anpassen musst oder die Lightbox gar nicht funktioniert.

8. Bilder direkt in WordPress bearbeiten

Auch nach dem Upload kannst du Bilder noch in der Mediathek bearbeiten. Du kannst sie skalieren, rotieren und beschneiden. Öffne das Bild dazu in der Mediathek und klicke auf „Original bearbeiten“ bzw. „Bild bearbeiten“:

Screenshot zum Bearbeitungsmodus gelangen

Screenshot Bildbearbeitungstools WordPress

Beachte aber, dass du mit diesen Tools das Originalbild überschreibst und die Änderungen nachträglich nicht rückgängig gemacht werden können. Behalte also das Original auf deinem Computer oder schließe deine Bildbearbeitung bereits vor dem Upload ab.

9. Bild beim Teilen auf Facebook fehlt oder ist falsch

Wenn du einen Link bei Facebook teilst, sucht Facebook sich i.d.R. das erste Bild aus dem Beitrag heraus, um es in der Vorschau anzuzeigen. Mit so genannten Open Graph Tags kannst du gezielt festlegen, welches Bild das ist. Das Plugin Yoast SEO sorgt konkret dafür, dass automatisch das Beitragsbild verwendet wird.

Wenn das Bild nun in deinem Beitrag richtig ist, aber trotzdem nicht beim Teilen angezeigt wird, versuche es zunächst mit dem Facebook Debugger. Trage dort deinen Link ein und „scrape“ die Informationen neu. Meist siehst du dann schon das gewünschte Bild und beim nächsten Teilen wird die Vorschau korrekt angezeigt. Hier erkläre ich dir in einer Minute, wie das geht.

Falls es tatsächlich ein Problem mit dem Beitragsbild gibt, kann dir der Debugger bei der Fehlersuche helfen.

Um ein bestimmtes Bild separat für das Teilen bei Facebook festzulegen, kannst du dieses in der Yoast Box unter dem Artikel auswählen:

Screenshot Yoast SEO Box Facebook-Einstellugen

 

Kennst du noch weitere Bildertipps für WordPress? 

Gleich geschafft...
Bitte bestätige deine Anmeldung mit dem Link in der E-Mail, die wir die gerade geschickt haben.
So löst du 5 typische WordPress Probleme
Der Frühjahrsputz für deine Website
Kostenloses PDF: Schaff Platz für Neues, mehr Sicherheit und Page Speed.
WordPress Support ab 99€/h
Noch ein Schritt zum Download...
Just one more step...
Almost there...
Please confirm your email address by clicking the link in the email we just sent you.
Die Checkliste zum Abhaken für deine Performance-Optimierung
Kostenloses E-Book & noch mehr Ressourcen
Noch ein Schritt zum Download...
Noch ein Schritt zum Download...
Fast geschafft...
Kostenlose Anmeldung zur Challenge und zum Newsletter von HootProof,de und BlogYourThing.com. Du kannst dich jederzeit wieder abmelden. Datenschutz von HootProof & Datenschutz von BlogYourThing