Gewusst wie: WordPress

Bilder in WordPress optimal verwenden

Bilder stellen auf einer Webseite den wohl wichtigsten Mehrwert für ein bestmögliches Verständnis eines Themas dar. Daher ist eine gut bedachte Handhabung der angebotenen Möglichkeiten zur Bilddarstellung in WordPress ein wichtiger Punkt der Webseitenpflege.

Zu Anfang der Hinweis, dass zwar viele Bildformate zur Verwendung in WordPress einladen, doch sollte erst darüber nachgedacht werden, welche Anforderungen an das Bild für die Darstellung auf der Webseite bestehen. Gehen wir also vor dem Bilder-Upload wenige Schritte zurück und betrachten uns erst einmal die Bilddatei.

In vielen Fällen kommt es zu vorschnellen Uploads von Bildern, die griffbereit im Original vorliegen. Wieso ist das ein Problem?

Originale (oder auch »rohe«) Bilddateien von einer Fotokamera oder dem Smartphone sind noch nicht für das Internet optimiert, so dass die hohen Bildmaße und Dateigrößen unnötig Ladezeit verursachen. Denken wir an dieser Stelle an das Thema »Mobile first« und die verschiedenenen Endausgabegeräte im mobilen Einsatz, kann so etwas zu lästigen Ladezeiten und dadurch zu einer erhöhten Absprungrate von der Internetseite führen – dabei war das ausgesuchte Bild doch als informativer Zusatz gedacht, oder? 

Die Lösung in drei Schritten

1. Die WordPress-Bildbezeichnung (der Dateiname)

Geben Sie dem Bild einen passenden Namen und entfernen sie alle unnötigen oder verwirrenden Beschreibungen, wie beispielsweise Bildnummern und etwaige Leer- und Sonderzeichen. Je nach Belieben können eine kleine Schreibweise und einfache Trennstriche zur Worttrennung verwendet werden. Für die Suchmaschinenoptimierung (SEO) ist der Dateiname ein sehr wichtiger Punkt und sollte immer beachtet werden. 

2. Die richtigen Maße der Bilder für WordPress

Eine WordPress-Internetseite verwendet von Haus aus unterschiedliche Bildgrößen, so dass erst einmal herauszufinden gilt, welche maximale Bildgröße für die Darstellung auf einer Seite benötigt wird. In WordPress stehen unterschiedliche Bilddarstellungen für »Seitenbilder« und »Beitragsbilder« (bzw. Thumbnails – das sind mitunter Bilder im Blog-Bereich von WordPress) bereit. Dieser Bereich ist in WordPress unter »Medien« in den »Einstellungen« zu finden.

Im Bereich zur Bildbearbeitung in WordPress lassen sich Angaben zu den vorbereiteten Maßen aller Bilddarstellungen zur Internetseite finden. Verwenden Sie diese Angaben aber mit Bedacht, da durch eine vielseitige Verwendung an anderen Stellen der Webseite (z. B. in Slidern) die nötigen Maße höher ausfallen können.

Hinweis: aktuelle Computer-Monitore verwenden zur Darstellung zum Beispiel die Maße 1.920 x 1.080 Pixel. So können Webinhalte eine Breite von 1.920 Pixeln erhalten und bei der Verwendung von kleineren Bildern, diese unschön verzerren. 

3. Bildformat und Dateigröße anpassen

Nachdem die genauen Bildmaße gefunden wurden, kann das Bild im optimalen Format und der kleinstmöglichen Dateigröße für WordPress vorbereitet werden.

Im besten Fall stehen für diese Schritte aktuelle Bildbeabeitungsprogramme wie GIMP (ein kostenfreies Grafik- und Bildbearbeitungsprogramm) oder Photoshop (der Klassiker unter den kostenpflichtigen Grafik-Programmen, das ebenfalls als kostenfreie Testversion zur Verfügung steht) bereit.

Für einfache Darstellungen, mit einer Hintergrundfarbe oder einem vollständig ausgenutzen Bildraum, ermöglichen Bilder im JPEG-Format (gekürzt: JPG) eine sehr geringe Dateigröße.

Für Transparenzen im Bild, wird das PNG-Dateiformat angeboten. Hierdurch kann die Dateigröße im Vergleich höher ausfallen und könnte daher zusätzliche Ladezeit der Internetseite verursachen.

Animierte Bilder werden im GIF-Format abgespeichert und sind im Vergleich zu JPG- und PNG-Bilddateien recht groß. Hinweis: Flash-Dateien sollten gar nicht mehr im Internet verwendet werden, da dieser Web-Standard seit vielen Monaten von den bekannten Internetbrowsern (Mozilla Firefox, Google Chrome, Opera etc.) nicht länger unterstützt wird.

Für Spezialisten vom Fach stehen bei der Bildbearbeitung weitere Optionen, wie beispielsweise eine verbesserte Farbanpassung für web-optimierte Bilder und weitere Einstellungsmöglichkeiten zu den oben genannten Bildformaten bereit. 

Der Zwischenstand

Nach diesen drei Schritten in der Bildbearbeitung für die Verwendung in WordPress haben wir folgendes erreicht:

  • die optimalen Bildmaße durch Überprüfung aller Bildausgaben auf der Webseite
  • ein erklärender und hilfreicher Bildname (besonders für die Suchmaschinenoptimierung, kurz SEO)
  • die kleinstmögliche Bildgröße durch die Nachbearbeitung des Bildes ins passende Bildformat 

Bildbearbeitung in WordPress – wie geht es weiter?

Nach einem erfolgreichen Upload der Bilddatei in der Mediathek (in der Navigation unter »Medien« zu finden), kann diese Datei erneut bearbeitet und final für alle Eventualitäten optimiert werden.

Nach einem Klick auf das Bild in der WordPress-Mediathek, öffnet sich ein abschließender Bearbeitungsbereich (der gleiche Bereich, der sich ebenso bei der Nutzung in Seiten- und Blog-Beitragsbearbeitungen öffnen kann). Hier können die folgenden Inhalte bearbeitet werden:

  • Titel (der Bildtitel, welcher ebenso wie die Bildbezeichnung ausgeschrieben werden kann)
  • Beschriftung (eine Bildinformation, welche unter dem Bild ausgegeben wird)
  • Alternativtext (ein Inhalt, welcher anstelle des Bildes ausgegeben wird, sofern dieses durch fehlerhafte Ausgaben nicht angezeigt werden kann)
  • Beschreibung (ein Bildhinweis, welcher beim Hinübergleiten des Mauszeigers und auch zur Barrierefreiheit mittels Sprachausgabe ausgegeben werden kann)

Was die besten Inhalte für diese vier Bereiche sind (und ob diese tatsächlich benötigt werden), obliegt dem Webseitenbetreiber und/ oder der unterstützenden Internetagentur. Sollte die SEO, die Barrierefreiheit oder die Weitergabe an Informationen einen wichtigen Faktor darstellen, sollten diese Optionen als grundsätzliche Bearbeitung in die Webseitenpflege eingehen. Der Mehrwehrt: erneute Nachbearbeitungen und zusätzlicher Zeitaufwand können hierdurch verhindert werden.

WordPress Child Theme erstellen

WordPress Child Theme Erstellung - so geht's richtig!

Für die Basis eines WordPress Child Themes sind drei einfache Schritte nötig:

  1. Erstellung einer functions.php Datei
  2. Erstellung einer style.css Datei
  3. Erstellung eines Child Theme Vorschaubildes (screenshot.png)

Lösung

1. Eine functions.php Datei erstellen

Diese PHP (Dateiendung: .php) Datei kann über einen Text-Editor (zum Beispiel Notepad++, tsWebEditor oder Sublime Text) erstellt werden. In diese Datei wird der folgende Code eintragen, um die style.css Datei des Eltern-Themes einzubinden:

<?php /**
* Theme Name child theme functions and definitions
*/

/*—————————————————————————————————————————*/
/* Include the parent theme style.css
/*—————————————————————————————————————————*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

2. Eine style.css Datei erstellen

Wie auch im ersten Schritt, kann der folgende Code in einem der oben genannten Text-Editoren erstellt und im Dateiformat .css angespeichert werden:

 /*
Theme Name: Theme Name Child
Theme URI:
Description: Theme Name Child Theme
Author: Your Name
Author URI: www.yourdomain.com
Template: yourparentthemetextdomain
Version: 1.0
License: GNU General Public License v2 or later
License URI: www.gnu.org/licenses/gpl-2.0.html
Tags: Theme Name Child Theme
*/

/*
You can start adding your own styles here. Use !important to overwrite styles if needed. */

3. Das Child Theme Vorschaubild (screenshot.png) erstellen

Das Vorschaubild für WordPress Child Themes kann in wenigen Schritten über ein Grafik Programm wie zum Beispiel Adobe Photshop erstellt werden. Die Maße liegen bei 880 x 660 Pixel und die Datei wird im RGB Farbraum auf 72 DPI angelegt. Der Bildinhalt kann frei variieren und den eigenen Wünschen entsprechen - an dieser Stelle gibt es keine genauen Vorgaben.