Perfekte Bilder in WordPress

Bilder sagen mehr als 1000 Worte. Wie Du mit Bildern in WordPress umgehen kannst, beschreibt Dir dieses Tutorial mit einigen Pro-Tipps.

Zu einer Webseite gehören unzweifelhaft auch Bilder. Zwar geht es auch ohne Bilder, aber wer will sich so eine Textwüste antun? Mit den Bildern kommen aber die Probleme. Denn sind die Bilder in hoher Qualität, lädt die Webseite super langsam, sind die Bilder stark komprimiert, werden dieses sehr schnell unansehnlich. Diese Tutorial zeigt dir wie Du Bilder in WordPress verwalten und optimieren kannst, sie richtig dimensionierst und wie Du die Ladezeiten in den Griff bekommst.

Bildformate und das Web

Es gibt einige Bildformate, die sich für Webseiten eignen, da sich die Dateigröße in Grenzen hält und es eine breite Unterstützung dieser Formate in allen Browsern gibt. Jedes dieser Bildformate hat seine eigenen Stärken und Schwächen und hat ihre eigenen Einsatzzwecke.

Das JPG-Format

Starten wir direkt mit dem bekanntesten und verbreitetsten Bildformat. 1992 schlossen sich einige Firmen und Forschungsinstitute zur Joint Photographic Experts Group zusammen und entwickelten das JPG-Format. Seitdem ist es nicht mehr wegzudenken. Das JPG-Format ist in der Lage Fotos verhältnismäßig stark zur komprimieren bei noch annehmbarer Qualität. Das Format eignet sich sehr gut für Pixelgrafiken, unterstützt allerdings keine Transparenz.

Das PNG-Format

Das PNG-Format unterstützt gegenüber dem JPG-Format Transparenz. Deswegen ist das das geeignete Format, falls Du Transparenz in Bildern benötigst. PNG steht für portable Netzwerkgrafik und hat einen verlustfreien Komprimierungsalgorithmus. Dieses Format wurde als Nachfolger des damals populären GIF-Formats entwickelt, bei dem sich Patentforderungen anbahnten. PNG-Dateien haben in der Regel eine höhere Dateigröße als JPG-Dateien. Das PNG-Format eignet sich sowohl für Pixel- wie auch Vektorgrafiken.

Das SVG-Format

Das skalierbare Vektorgrafik-Format (engl. Scalable Vector Graphics) ist perfekt für zweidimensionale Vektorgrafiken geeignet. Es basiert auf der Beschreibungssprache XML (Webseiten werden mit einer Variante von XML mit dem Namen HTML beschrieben) und ist beliebig skalierbar. Es kann verlustfrei komprimiert werden, da es nur aus Text besteht. SVG lässt sich sowohl als Bildformat in eine Webseite, wie auch als Quelltext integriert werden. SVG ist kein geeignetes Format für Pixelgrafiken.

Das WebP-Format

Das vierte Format im Bunde ist das WebP-Format. Es wurde aus dem 2010 freigegebenen Video-Codec VP8 entwickelt. Dieses Format zeichnet sich durch eine höhere Komprimierungsrate gegenüber JPG bei gleicher Qualität aus. Gegenüber den 3 vorherigen Formaten unterstützen nicht alle Browser dieses Bildformat. Als einer der wichtigsten Vertreter können sämtliche Safari-Browser WebP-Bilder nicht anzeigen.

Wie groß sollte ein Bild auf meiner Webseite sein?

Das ist bei diesem Thema die Mutter aller Fragen. Um die Antwort auf diese Frage zu finden, sind zwei Aspekte zu beantworten. An welcher Stelle Deiner Seite bindest Du die Fotos ein und wie sind die notwendigen Abmessungen? Wenn Deine Webseite eine maximale Breite von 1200px hat, dann ist es erstmal nicht nötig, Bilder mit größeren Abmessungen vorzuhalten.

Nutzt Du für Deine Fotos allerdings eine Vollansicht mittels Lightbox, dann sieht die Sache schon anders aus. Denn dann sind 1200px ein wenig klein. Um hier abzuwägen zwischen Anzeigegröße und der dadurch resultierenden Dateigröße. Für mich haben sich Bilder mit einer maximalen Kantenlänge von 2400px bewährt. Diese sehen auf einem 4K-Monitor noch ansehnlich aus und haben nicht so eine riesige Dateigröße.

Verschiedene Größen für verschiedene Anwendungsfälle

Ganz so einfach, wie es klingt, ist es doch nicht. Auf einer Webseite gibt es immer wieder den Bedarf, Bilder – auch dieselben Bilder – in verschiedenen Bildgrößen vorzuhalten. Ein Beispiel wären die Titelbilder von Beiträgen. Falls Du die Titelbilder im Beitrag anzeigst, wirst Du wahrscheinlich die volle Größe brauchen. Auf der Blogübersichtsseite reicht aber ein kleineres Vorschaubild. Je nachdem, wie die Übersichtsseite gestaltet ist, benötigst Du sogar verschiedene Größen der Vorschaubilder.

Responsive Bilder

Dir ist das noch nicht kompliziert genug? Dann solltest Du noch wissen, dass es guter Stil ist, je nach Display-Größe das passende Bild an das Endgerät zu liefern. Das bedeutet, dass ein Smartphone nicht das Bild in der vollen Auflösung benötigt, weil das Display ja deutlich kleiner ist. Werden die Bilder auf diese Art ausgeliefert, spricht man von responsiven Bildern.

Wenn Du Dich ein wenig mit HTML auskennst, weißt Du sicherlich, dass Bilder über das IMG-Tag eingebunden werden. Für responsive Bilder umschließt Du das IMG-Tag mit einer Figure und definierst zusätzlich einen Satz an Bildern in verschiedenen Auflösungen. Der Browser entscheidet dann, welches Bild in welcher Auflösung geladen wird.

<figure class="wp-block-image size-large enhanced-img"> <img width="2400" height="553" src="https://kamann.info/wp-content/uploads/child-teme-loaded.jpg" sizes="(max-width: 2400px) 100vw, 2400px" srcset="https://kamann.info/wp-content/uploads/child-teme-loaded.jpg 2400w, https://kamann.info/wp-content/uploads/child-teme-loaded-1600x369.jpg 1600w, https://kamann.info/wp-content/uploads/child-teme-loaded-768x177.jpg 768w, https://kamann.info/wp-content/uploads/child-teme-loaded-1536x354.jpg 1536w, https://kamann.info/wp-content/uploads/child-teme-loaded-2048x472.jpg 2048w"> </figure>
Code-Sprache: HTML, XML (xml)

Du findest, das sieht kompliziert aus? Ja, ist es auch. Zum Glück macht das der Gutenberg-Editor für Dich. Sobald Du ein Bild zu einer Seite oder Beitrag hinzufügst, wird der obige Bild automatisch hinzugefügt. Ohne dass Du was dafür tun musst. Das ist doch ganz praktisch oder?

Vorschaubilder erstellen lassen

Der Aufwand, um jedes Bild in vielen verschiedenen Größen manuell bereitzustellen, ist nicht zu unterschätzen. Zum Glück unterstützt Dich WordPress dabei nach Kräften. In den Einstellungen -> Medien in Deiner WordPress-Seite kannst Du drei verschiedene Bildgrößen definieren.

Bildgrößen in WordPress konfigurieren
Bildgrößen in WordPress konfigurieren

Wenn Du jetzt ein Bild in WordPress hochlädt, wird dieses Bild automatisch in diese drei Größen umgewandelt, ohne dass Du Dich darum kümmern musst. Ist doch auch ganz praktisch, oder?

Pro-Tipp: Zusätzliche Größen definieren

Manchmal kommt es aber vor, dass man mit diesen drei Größen nicht zurecht kommt und es schön wäre, zusätzliche Größen zu definieren. Wenn Du ein Child Theme verwendest, kannst Du das mit einem kleinen Code-Snippet in der functions.php erledigen:

/** * Add a 16:9 ratio thumbnail size for images and add them to the size picker */ add_image_size( 'thumbnail_16_9', 320, 180, true); add_filter('image_size_names_choose', 'add_additional_image_sizes'); function add_additional_image_sizes($sizes) { $addsizes = array( "thumbnail_16_9" => '16:9 Thumbnail' ); $newsizes = array_merge( $sizes, $addsizes ); return $newsizes; }
Code-Sprache: PHP (php)

In Zeile 4 gibst Du WordPress an, dass Du ein neues Vorschaubildformat haben möchtest. Der Name soll thumbnail_19_9 und die maximalen Abmessungen 320px * 180px sein. Der Rest des Snippets erweitert die Liste der Auswahlbox, in der Du die jeweilige Bildgröße auswählen kannst. Dort soll natürlich auch die neue Vorschaubildgröße auswählbar sein. In Zeile 9 siehst Du auch, wie Du aus dem eher kryptischen Namen des neue Formats einen lesbaren Namen machen kannst.

Bilder in WordPress optimieren

Du meinst, das war schon alles? Weit gefehlt. Die Bilder sind jetzt schon kleiner, da die Abmessungen reduziert wurden. Aber es gibt üblicherweise noch weiteres Potential, um die Dateigröße der Bilder zu verringern. Wahrscheinlich kennst Du die Technik. Bei JPG-Dateien kannst Du bei dem Export oder Speichern den Komprimierungsgrad angeben. Dies wirkt sich direkt auf die Dateigröße aus. Allerdings ist das eine Aufgabe, die einem weniger Spaß macht und es doch viel besser wäre, wenn das von WordPress erledigt würde, wenn Du ein Bild hochlädst, oder?

ShortPixel oder Imagify als Bild-Optimierer verwenden

Die beiden Dienste sind spezialisiert darauf, Bilder zu optimieren. Die Ergebnisse sind bei beiden Diensten ähnlich gut. Auf dieser Seite verwende ich ShortPixel, da bei einer geringeren Anzahl von Bildern, die man im Monat hochlädt, kostenlos ist. ShortPixel unterstützt 3 unterschiedliche Optimierungsgrade. Bei Lossy bekommst Du die kleinste Dateigröße, allerdings kann der Qualitätsverlust sichtbar sein. Bei Glossy hast Du einen sehr guten Mittelweg zwischen Dateigröße und Qualität (ich verwende meistens Glossy). Dann gibt es noch Lossless. Hier bleibt die Qualität nahezu unangetastet, allerdings ist der Gewinn an reduzierter Dateimenge hier am geringsten. Du kannst das selber ausprobieren, wie Dir dir Ergebnisse zusagen. Auf der Seite von ShortPixels kannst Du ein Foto hochladen und das Ergebnis mit dem Original vergleichen.

Für ShortPixels gibt es ein Plugin für WordPress, welches nach der Installation und Konfiguration seinen Dienst im Hintergrund verrichtet. Sobald Du ein Bild in WordPress hochgeladen hast, wird dieses Bild von ShortPixels optimiert. Das betrifft natürlich auch sämtliche Vorschaubilder. Als Goodie werden auch automatisch WebP-Varianten Deiner Bilder erzeugt. Du kannst ShortPixels so konfigurieren (oder Dein Webhoster unterstützt das schon automatisch), dass bei unterstützten Browsern anstatt der JPGs die WebP-Variante ausgeliefert wird.

Pro-Tipp: Deaktivieren der WordPress-eigenen Komprimierung von Bildern

Seit Version 5.3 von WordPress werden Bilder mit einer Kantenlänge größer als 2560px automatisch komprimiert. Allerdings ist die Qualität nicht ausreichend und diese Funktion steht etwas in Konflikt mit Short Pixels. Allerdings ist es gar nicht so einfach diese Funktion zu deaktivieren. Wenn Du dafür nicht gleich ein Plugin installieren willst, dann kannst Du diese Funktion auch in der functions.php deaktivieren:

/** * Disable resizing of images with dimensions about 2560px. */ add_filter( 'big_image_size_threshold', '__return_false' );
Code-Sprache: PHP (php)

Und was ist mir Dir?

Webseiten mit WordPress

Verwendest Du schon schon einen Bildoptimierer wie Short Pixel oder Imagify? Kennst Du weitere Best Practices im Umgang mit Bildern? Wie sehr beeinflußen auf Deiner Seite die Bilder die Performance? Schreib Doch dazu was in die Kommentare.
Bist Du Interessiert an meinen weiteren Services zu WordPress?

Schreibe einen Kommentar

Das könnte Dich auch interessieren

Was kann ein Child Theme in WordPress überhaupt alles?

Was kann ein Child Theme in WordPress überhaupt alles?

Ein Child Theme in WordPress ermöglicht es Dir, dass aktive Theme zu erweitern und zu ...
Weiterlesen …
Wie Du WordPress lokal installieren kannst – mit Local

Wie Du WordPress lokal installieren kannst – mit Local

Es gibt viele Gründe mit einer neuen WordPress-Seite auf dem eigenen Rechner zu beginnen. Dieser ...
Weiterlesen …
Welches WordPress passt zu mir?

WordPress com oder org – welches passt zu mir?

Von WordPress gibt es eine freie und eine kommerzielle Variante. Doch was sind die Unterschiede ...
Weiterlesen …