Optimale Bilder für eure WordPress Seite

Ohne Bilder keine Website: das gilt nicht nur für WordPress. Jedoch gibt es beim Einbinden von Bildern in eine WordPress Seite einige Dinge zu beachten. Wir erklären euch, wie ihr die optimale Bildbreite bestimmt, welche Bildgrößen es in WordPress gibt und welche Attribute ihr in der Mediathek angebt. Mit Checkliste für Anpassungen vor und nach dem Upload.

WordPress und Bilder: wer das CMS-System nutzt, und sei es nur als Redakteur, stolpert früher oder später über das Hinzufügen und Einbinden von Bildern. Aber welche Größe ist optimal? Wie sollte die Datei benannt werden? Und welche Attribute können und sollen angegeben werden? In diesem Artikel erklären wir euch, wie ihr optimal mit Bildern in WordPress umgeht.

[su_list icon=“icon: angle-double-right“ icon_color=“#000000″]

• Die optimale Bildgröße in WordPress
• Bildgrößen in WordPress
• Sprechende Dateinamen: Bilder sinnvoll benennen
• WordPress Mediathek: Einstellungen und Angaben für Bilder
• Checkliste: Bilder in WordPress einbinden

[/su_list]

Die optimale Bildgröße in WordPress

Bevor ihr ein Bild in WordPress hochladet, solltet ihr euch die optimale Größe für die Grafik überlegen. Das betrifft einerseits die Breite / Höhe in Pixeln, als auch die Größe der Bilddatei in Kilo- bzw. Megabyte.

Was die Maße eures Bilds angeht, ist hier vor allem die Breite relevant. Auf den meisten Webseiten wird vertikal, also nach unten oder oben, gescrollt. Somit ist die Breite der Inhalte beschränkt, die Höhe bzw. Länge aber theoretisch unendlich. Deshalb solltet ihr euch die optimale Breite für euer Bild heraussuchen und es entsprechend skalieren.

Maximale bzw. optimale Breite ermitteln

Ein Bild in WordPress sollte so breit sein, wie die maximal im Theme verwendete Bildbreite. Braucht ihr die Grafik also innerhalb eines Beitrags, schaut ihr euch an, in welcher Größe Bilder dort dargestellt werden. Das betrifft einerseits den Bereich der WordPress Beitrags an sich, andererseits auch den Header, in welchem vielleicht ein Beitragsbild angezeigt wird.

Habt ihr den breitesten Anwendungsfall für euer Bild ausfindig gemacht, könnt ihr ganz einfach über euren Browser herausfinden, wie viele Pixel breit eurer Bild im Optimalfall sein sollte. In Firefox / Chrome erscheint nach einem Rechtsklick auf die Seite ein Kontextmenü, in dem ihr Element untersuchen / Prüfen auswählt.

Es öffnet sich ein Dialog, in welchem ihr links oben das Symbol mit dem Mauszeiger auswählt.

Ist diese Option aktiv, könnt ihr einfach über ein Element auf der Seite hovern und euch so die Größe des Elements in Pixeln anzeigen lassen.

Der linke Pixelwert gibt die Bildbreite an. Diesen Wert schaut ihr euch beim breitesten Bild bzw. der Stelle, an der das Bild angezeigt werden soll, an und habt damit die optimale Bildbreite ermittelt.

Dateigröße: wie viel Speicherplatz darf ein Bild benötigen?

In WordPress ist die Dateigröße von Bildern allein schon durch das Uploadlimit der Mediathek standardmäßig auf 2 Megabyte (MB) beschränkt. Je nach Hoster und verwendeter PHP-Version kann die Obergrenze für den Dateiupload aber auch höher liegen. Praktischerweise wird sie euch angezeigt, wenn ihr in der Mediathek eine Datei hinzufügt.

Generell gilt: je kleiner die Bilddatei, desto schneller lädt die Seite. Eine möglichst kleine Datei ist also wünschenswert, trotzdem soll die Bildqualität natürlich stimmen.

Obwohl WordPress einen Upload von Bildern bis zu 2000KB Dateigröße erlaubt, sollten Grafiken normalerweise nicht größer als 200KB (0,2MB) sein. Größere Bilddateien verlangsamen eure WordPress Seite erheblich.

Außerdem ist wichtig zu wissen, dass WordPress hochgeladene JPEG-Bilder auf 82% komprimiert. So kann die Dateigröße deutlich optimiert werden, was zu schnelleren Ladezeiten führt, ohne deutlich sichtbare Qualitätseinbußen hinnehmen zu müssen.

Bildgrößen in WordPress

Ladet ihr ein Bild auf eure WordPress Seite, so wird nicht nur die ursprüngliche Version davon gespeichert, sondern zusätzlich werden drei vordefinierte Größen erzeugt. Die genauen Seitenverhältnisse dieser Standardgrößen könnt ihr nach Bedarf anpassen, oder diese auch ganz entfernen. Benutzt ihr eine Größenvariante nämlich nicht, müllt ihr beim Hochladen von Bildern euren Server unnötig voll und macht so euer WordPress langsamer.

Vordefinierte Standardgrößen

Insgesamt werden Bilder in vier Standardgrößen gespeichert:

• Vollbild (Full)
  Das Bild hat die Breite und Höhe, in der es hochgeladen wurde.
• Groß (Large)
  Standardmäßig sind maximale Breite und Höhe hier auf 1024 Pixel
• Mittel (Medium)
  Maximale Breite und Höhe sind hier auf 300 Pixel
• Vorschau (Thumbnail)
  Beim Vorschaubild sind Breite und Höhe auf je 150 Pixel Zusätzlich ist die Option aktiviert, dass das Bild auf exakt diese Größe beschnitten wird.

Um die vordefinierten Bildgrößen für eure WordPress Seite anzupassen, könnt ihr unter Einstellungen > Medien selbst Breite und Höhe der Standardgrößen bestimmen. Legt ihr diese auf 0 fest, wird die entsprechende Bildgröße nicht erzeugt.

Eigene Bildgrößen festlegen

Vier Bildgrößen reichen euch nicht? Kein Problem: mit der Funktion add_image_size könnt ihr in der functions.php eures WordPress Themes zusätzliche Größen für Grafiken definieren:

add_image_size ($name, $width, $height, $crop)

• $name: Bezeichner für die neue Bildgröße
• $width: Bildbreite in Pixel
• $height: Bildhöhe in Pixel
• $crop (optional): Angabe, ob Bilder zugeschnitten oder skaliert werden sollen

Möchtet ihr die neue Bildgröße beim Einfügen einer Grafik auswählbar machen, müsst ihr zusätzlich den Filter image_size_names_choose verwenden:

add_filter( 'image_size_names_choose', 'meine_neuen_bildgroessen' );
function meine_neuen_bildgroessen( $sizes ) {
    return array_merge( $sizes, array(
        'bezeichner-der-neuen-bildgroesse' => __('Name der Bildgroesse'),
    ) );}

Sprechende Dateinamen: Bilder sinnvoll benennen

Bevor ihr eure Grafik auf der WordPress Seite hochladet, solltet ihr einen geeigneten Dateinamen wählen. Das ist besonders im Hinblick auf Suchmaschinenoptimierung wichtig, außerdem wird der Quellcode so lesbarer.

Bei der Wahl des Dateinamens solltet ihr grundsätzlich erstmal Umlaute und Sonderzeichen vermeiden, denn manche Endgeräte können diese nicht korrekt interpretieren und zeigen euer Bild eventuell nicht an.

Wählt am besten einen Dateinamen, der kurz und prägnant beschreibt, was auf dem Bild zu sehen ist. Anstatt IMG_837618.jpg nennt ihr eure Grafik also zum Beispiel Dalmatiner-Welpe-im-Park.jpg.

WordPress Mediathek: Einstellungen und Angaben für Bilder

Inzwischen hat euer Bild die richtigen Maße, Dateigröße und -name stimmen auch und das Hochladen war erfolgreich. Schaut ihr euch das Bild jetzt in der Mediathek an oder wollt es in einen Beitrag einfügen, könnt ihr dort einige Werte wie Bildunterschrift oder Alt-Tag vergeben.

Bilder in der Mediathek bearbeiten

Bearbeitet ihr ein Bild direkt über die Mediathek (Medien > Medienübersicht > Bearbeiten), so könnt ihr einige Attribute angeben und die Grafik auch zuschneiden und skalieren.

Speziell vom Skalieren innerhalb von WordPress würde ich allerdings abraten. Nutzt dafür lieber ein Bildbearbeitungsprogramm wie GIMP, der Qualitätsunterschied ist deutlich zu sehen. Die Zuschneide-Funktion könnt ihr durchaus nutzen, allerdings ist es definitiv sinnvoll, sich vor dem Upload Gedanken über Bildmaße und –ausschnitt zu machen und direkt ein passendes Bild hochzuladen.

Neben diesen Möglichkeiten der Bildbearbeitung könnt ihr Bildunterschrift, Alt-Text und Beschreibung angeben.

Diese Attribute könnt ihr auch beim Einfügen der Grafik in einen Beitrag festlegen, meiner Meinung nach vor allem für Caption und Alt-Tag der sinnvollere und intuitivere Weg.

Bildattribute in WordPress angeben

Fügt ihr eine Grafik in einen Beitrag auf eurer WordPress Seite ein, könnt ihr einige Attribute angeben, darunter Alt-Text, Bildunterschrift, Verlinkung und Position des Bildes.

• Titel
  Man könnte meinen, hier ist das title-Attribut gemeint – stimmt aber nicht. Der Bildtitel in WordPress kommt dann zum Einsatz, falls kein Alternativtext angegeben wird. Ihr braucht ihn also nicht unbedingt auszufüllen, höchstens für interne Beschreibungszwecke.
• Bildunterschrift
  Was ihr in dieses Feld hineinschreibt, wird als Caption, also Bildunterschrift, angezeigt. Hier solltet ihr das Stichwort SEO nicht vergessen, denn der Text, der am nächsten an einem Bild steht, wird von Suchmaschinen mit dem Bildinhalt in Verbindung gebracht. Beschreibt also einfach kurz, was auf dem Bild zu sehen ist bzw. was ihr euren Lesern mit dem Bild zeigen wollt.
• Alternativtext
  Unbedingt ausfüllen solltet ihr den Alt-Text. Dieser wird angezeigt, falls das Bild nicht geladen werden kann, außerdem wird er von Screenreadern und Suchmaschinen gelesen. Beschreibt euer Bild also so, dass durch den Text klar wird, was auf der Grafik zu sehen ist. So verbessert ihr die Accessibility eurer WordPress Seite.
• Beschreibung
  Die Bildbeschreibung in WordPress dient dazu, interne Kommentare, Hinweise und Notizen zur Grafik hinzufügen zu können.
• Ausrichtung
  Ihr könnt auswählen, ob euer Bild links, rechts, mittig oder nicht ausgerichtet werden soll.
• Link
  Falls eure Leser auf das Bild klicken können sollen, könnt ihr hier festlegen, wohin dieser Klick sie führt. Ihr könnt die Datei, den Medien-Anhang oder eine eigene URL auswählen.
• Größe
  Zuletzt könnt ihr aus den bereits besprochenen WordPress Bildgrößen auswählen. Hier besteht auch die Möglichkeit, eigene Seitenverhältnisse anzugeben.

Das wichtigste dieser Bildattribute ist der Alt-Text, den ihr auf jeden Fall angeben solltet. Je nach Layout ist außerdem eine Bildunterschrift sinnvoll. Achten solltet ihr zudem auf die Layout-Angaben wie Ausrichtung, Größe und Verlinkung; diese sollten konsistent sein und so für eine gute Usability in allen euren Beiträgen sorgen.

Bildlayout bestimmen: erweiterte Optionen

Habt ihr euer Bild bereits in einen Beitrag eingefügt, könnt ihr die Bildoptionen durch einen Klick auf die Grafik und das erscheinende Stift-Icon bearbeiten.

In diesem Dialog könnt ihr außerdem die erweiterten Optionen aufklappen. Dort habt ihr die Möglichkeit, das title-Attribut sowie CSS-Klassen für die Grafik und den Link anzugeben.

Worauf achtet ihr bei Bildern in WordPress?