B1: Bilder in WordPress

Grundsätzliches zu Bildformaten im Internet

Es gibt viele Bildformate – .jpg, .png, .svg, .bmp, .gif – die im Internet und in der realen Welt benutzt werden. Eines ist sicher, Ihre Internetseite kommt ohne Bilder nicht aus. Bilder auf der Internetseite – also auch Bilder in WordPress – laden den Besucher ein, länger auf ihr ihr zu verweilen. Das ist durch Untersuchungen belegt.

digitale Bildformate auch in WordPress

Nun kommen wir aber gleich zu den zu „beachtenden Faktoren“. Bilder erzeugen Ladezeiten und sollten unbedingt optimiert für das Internet sein. Vorweg kann man pauschal schon sagen, dass Bilder für das Internet eine Auflösung von 72 dpi besitzen sollten. Bildformate sollten kompatibel zu allen Browsern in allen ihren Versionen sein.

Zwei Formate bieten sich hier an. Das ist das JPG – Format und das PNG – Format. Zu dem SVG – Format mache ich am Ende des Kapitels noch eine Bemerkung. Es soll hier ansonsten nicht weiter interessieren.

JPG oder JPEG – Format

Das Format entspricht einer Norm für verlustbehaftete Bildkomprimierung. Der Name geht auf das Gremium „Joint Photographic Experts Group“ zurück.

Es können 16,8 Millionen Farben bei geringer Dateigröße (auf Grund von verlustbehafteter Kompression) dargestellt werden.

Die Stärken des Formats liegen in der Darstellung von detailreichen und großen Fotos mit vielen Farben. Transparenz (kein Alphakanal) kann das Format hingegen nicht darstellen. Die Darstellung von scharfen Kanten ist eine Schwäche des Formats.

PNG – Format (Portable Network Grafics)

Das Format ist eine Weiterentwicklung des GIF – Formates. Es kann Transparenz, ebenso wie scharfe Kanten darstellen. Außerdem  kann es komprimiert oder kompressionslos verwendet werden. Das zur Verfügung stehende Farbspektrum muss sich allerdings mit 256 Farben  begnügen. So eignet sich das Format typischerweise für kleinere Logos, Icons und Grafiken.

SVG – Format (Scalable Vector Grafic)

Bilder im SVG – Format sind Vektorgrafiken. Sie können beliebig groß dargestellt werden, ohne dabei „pixelig“ zu werden. Das Format wird überwiegend für Logos und Grafikelemente im Internet benutzt. Außerdem kommt es in den Printmedien zum Einsatz. Es ist absolut ernst zu nehmen, verschiebt aber unseren Fokus. Daher möchte ich nicht näher darauf eingehen.


Kurzexkursion 1 – Sprites:

Um die „Geschwindigkeit einer Internetseite“ zu optimieren, und damit positiv im Ranking einer Suchmaschine bewertet zu werden, können sogenannte Sprites einsetzt werden. (Das ist jetzt kein WordPressthema, sondern eine CSS  – Thematik.)

Eine Grafik besteht aus mehreren einzelnen Grafiken, die dann gezielt angesprochen werden. Sinn der Aktion, man hat nur einmalig eine Serveranfrage, statt für jede einzelne Grafik und spart somit Zeit bzw. gewinnt Geschwindigkeit.


Kurzexkursion 2 – Icon – Fonts:

Icon – Fonts sind in meinen Augen die prominentere, anzutreffende Lösung der beiden Techniken, wenn es um grafische Bedienelemente geht. Icon – Fonts sind Webfonts als Pictoramm  zumeist im vektoriellen SVG – Format und somit in der Dateigröße klein und skalierbar.

Auch das ist ein CSS – Thema und interessant für den Themeentwickler. Aber nicht für uns hier! Socialmedia – Icons basieren in der Regel auf Icon – Fonts. Eine mit CSS animierte Navigationsleiste mit Icon – Fonts ist auf meiner Homepage www.sebastian-handl.de zu sehen.

Bilder in WordPress

Allgemeine Betrachtung

Bilder, die in die WordPress – Mediathek hochgeladen werden, werden (stark) komprimiert. Zwar wird in der Mediathek die Original – Dateigröße angezeigt, benutzt wird für Bilder in WordPress allerdings i.d.R. eine optimierte Version  für Ihre Seite. Auf die Komprimierung haben Sie zunächst keinen Einfluss. Was Sie machen können ist, die von WordPress verwendete Größe  auf Ihrer Seite ermitteln, diese wird im Dateinamen als „Postfix“ angehangen. Optimieren Sie nun das Original vor dem (erneuten) Hochladen auf diese Größe (z.B. 1024×599 Pixel) – z.B. mit der kostenlosen Grafiksoftware „gimp“ (siehe Links) wird die Datei nicht komprimiert.

Wir gehen einen anderen Weg und schalten im Folgenden die WordPress-Bild –Kompression über das Childtheme aus (das kann man auch gerne über ein Plugin bewirken, was man in verschiedenen Themes wiederverwenden kann). Trotzdem sollte Ihre Grafikdatei nicht unnötig groß sein. Die vorher beschriebene Methode führt zu einer „Punktlandung“.

Ausschalten der Bildkompression in WordPress

Um die Bildkompression in WordPress (dauerhaft) für Ihr Theme auszuschalten und Sie so mehr Kontrolle über Ihre Bilder in WordPress besitzen, müssen Sie in der function.php in Ihrem Childtheme einen Eintrag tätigen.

Der Reihe nach:

Die functions.php Datei im Elternordner

1. Kopieren Sie sich aus dem Eltern- Theme- Ordner die functions.php Datei.

Hinweis: Der Eltern- Theme- Ordner befindet sich in Ihrer XAMPP – Installation unter:

C:\xampp\htdocs\wordpress\wp-content\themes

Die functions.php Datei im Childordner

2. Fügen Sie die functions.php Datei in den Childtheme- Ordner ein.

3. Öffnen  Sie die functions.php in einem geeigneten Editor (z.B. Brackets, siehe Links)

Hinweis: Der Childtheme- Ordner befindet sich in Ihrer XAMPP – Installation unter: 

C:\xampp\htdocs\wordpress\wp-content\themes\twentysixteen-child

Codeanweisung zum Ausschalten der WordPresskompression

4. Löschen Sie den php – Code (Zum besseren Einstieg habe ich den Anfangskommentar stehen lassen)

5. Schreiben Sie wenn Sie möchten einen eigenen Kommentar, um den folgenden Code zu markieren und erklären.

6. Fügen Sie folgende Codezeilen ein:

add_filter(‚jpeg_quality‘, function($arg) {return 100;});

add_filter(‚wp_editor_set_quality‘, function($arg) {return 100;});

7. Speichern Sie die Datei ab.

Bilder in WordPress

Hinweis: Um den Erfolg Ihrer Änderungen zu kontrollieren, können Sie ein Bild vor den Veränderungen in die Mediathek hochladen und dasselbe Bild nach den Veränderungen.

Nun erstellen Sie eine Seite auf denen beide Bilder vorhanden sind und laden Sie über die rechte Maustaste ‚Grafik speichern unter …‘ auf Ihren PC.

Durch vergleichen der Dateigröße erkennen Sie, ob Ihre Veränderung erfolgreich war.

Ein Gedanke zu „B1: Bilder in WordPress“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.