Wer, so wie ich, bereits ungezählte Bilder auf WordPress-Websites hochgeladen hat, der hat sich bestimmt schon des öfteren gefragt, was sie oder er da eigentlich tut. Ist die Auflösung zu hoch? Zu niedrig? Muss ich das Bild irgendwie vorbereiten oder optimieren?
Bilder in WordPress sollten dringend optimiert werden. Dazu gehört sowohl die Abmessungen des Bildes in Pixel (Bildpunkten), als auch die Bildqualität, denn beide bestimmen die Dateigröße des Bildes. Kleinere Dateigrößen sind wichtig, damit ein Bild schnell genug lädt, solange die sichtbare Qualität ausreichend ist.
Was bedeutet das jetzt im Detail? Welche Schritte muss man setzen? Das erkläre ich Ihnen genau in den folgenden Abschnitten.
Muss ich Bilder für die Verwendung in WordPress optimieren?
Optimierung von Bildern für eine Website ist kein Muss, aber sehr zu empfehlen. Das heißt, eigentlich ist es ein Muss. Dabei kann man die Größe (Abmessungen) des Bildes und dessen Qualität optimieren. In WordPress bringt man am besten die Bilder vor dem Hochladen bereits auf die ideale Größe und verwendet dann ein Plugin für die automatische Bild-Qualitäts-Optimierung.
WordPress hat zwar eine Reihe von voreingestellten Größen, die für jedes hochgeladene Bild erzeugt werden, aber davon braucht man sich nicht irritieren zu lassen, im Gegenteil: Sie können diese automatische Erstellung zu Ihrem Vorteil nutzen. Die Standard-Größen der Bilder in WordPress können Sie übrigens in meinem Artikel Bildgrößen in WordPress: Eine umfassende Einführung nachlesen.
Wie groß sollten Bilder für die Verwendung in WordPress sein?
Bilder sollten auf Websites grundsätzlich an die Anzeige auf PC- und Smartphone-Bildschirmen angepasst sein. Das gilt klarer Weise auch für WordPress-Websites. Für Vorschaubilder empfiehlt sich eine Breite von 300 Pixel, bei Bildern, die vollbreit im Text verwendet werden sollen, nimmt man 800 Pixel oder etwas mehr. 1280 Pixel sind auch noch in Ordnung, wenn man etwas wirklich Großes mit dem Bild vorhat.
Diese Regel nehme ich mir grundsätzlich zu Herzen, außer es handelt sich um eine Website, auf der die Bilder eine ganz zentrale Rolle spielen, wie z.B. für ein Fotografie-Studio oder ein Hotel. Hier auf WebsiteBerater.com komme ich ganz gut mit dieser beschriebenen Grundregel aus.
Ein angenehmer Nebeneffekt: Die Dateigröße (und zwar insgesamt) der Website wird kleiner und dadurch lädt sie, vor allem auf Smartphones, wesentlich schneller. Wenn man die Größenoptimierung mit der Qualität kombiniert, kann man hier Faktoren von 40 und mehr herausholen, wie ich weiter unten anhand eines Optimierungs-Beispiels für ein konkretes Bild in WordPress demonstriere.
Verringern der Dateigröße als Teil der WordPress-Optimierung
Ein wichtiger Punkt in der Optimierung von WordPress-Websites betrifft also vor allem die auf der Website angezeigten Bilder. Wie schon erwähnt, spielt dabei deren Dateigröße im Prinzip die Hauptrolle. Das ist ganz einfach der Tatsache geschuldet, dass alles, was Ihre Besucher auf Ihrer Website sehen sollen, vom Server zum Browser übertragen werden muss, auch die Bilder.
Das Problem der Dateigröße betrifft aber nicht nur Bild-Dateien. Generell gilt, ganz grob gesagt: Wenn man nur die Hälfte laden muss, geht das auch doppelt so schnell. Die Zeitersparnis betrifft hier zwar unmittelbar nur die Übertragungsdauer der Daten, aber in einem langsamen mobilen Datennetz zum Beispiel kann das einen enormen Unterschied ausmachen.
Dass hier Bilder an erster Stelle stehen, hat damit zu tun, dass
- Videos nur im absoluten Ausnahmefall auf dem eigenen Webserver gehostet werden sollten (das sind derzeit wohl die größten Standard-Datenmengen), und
- Text-Dateien im Vergleich zu Bildern wesentlich kleiner sind und daher auch die Optimierungseffekte an Text gegenüber denen an Bildern zunächst eine untergeordnete Rolle spielen.
Sie wissen vielleicht, dass Bilder, wie sie z.B. von heutigen Standard-Smartphone-Kameras aufgenommen werden, unter Umständen mehrere MegaByte groß sein können. Die Größe einer Bilddatei liegt einerseits an der Auflösung, die das Bild in Bildpunkten (Pixeln) hat, z.B. 1024×768. Zum anderen liegt es an der in der Kamera voreingestellten Bild-Qualität bzw. Bild-Optimierung (ja, auch die Kamera optimiert die Bilddatei bereits) im jeweiligen Bildformat.
Die Details sollen uns an dieser Stelle noch gar nicht so interessieren, aber beide hier genannten Faktoren, die Auflösung und die Qualität, sollte man für die Nutzung auf der eigenen Website herunterschrauben. Wieder werden Sie einwenden: Moment, dann sieht das Bild aber nicht mehr so gut aus, oder? Ja, absolut gesehen verliert es an Auflösung und Bildqualität. Der Besucher der Website merkt davon aber auf seinem Gerät de facto nichts.
Die Bildauflösung als Optimierungs-Möglichkeit für Websites
Nehmen wir als Beispiel ein Smartphone-Display. Wenn dieses Display in der Breite nur eine Auflösung von 360 Pixel hat, dann nützt es gar nichts, wenn ein angezeigtes Bild stattdessen in einer Breite von 720 Pixel vorliegt – es wird nicht besser aussehen. Um die Dateigröße eines Bildes zu verringern, kann man es also getrost verkleinern – je nach Einsatzgebiet.
Lassen Sie mich Ihnen noch ein konkretes Beispiel hier direkt von WebsiteBerater.com geben. Alle Bilder, die Sie hier in Artikeln eingebunden sehen, haben eine Breite von 800 Pixel (wenn das Original breiter war) oder kleiner (wenn das Original kleiner war/ist).
Die Vorschaubilder skaliere ich standardmäßig auf eine Breite von 300 Pixel. Sehen Sie sich z.B. das Titelbild eines anderen Beitrags an, das ich hier gerade nochmal eingebaut habe. Sieht trotzdem ansehnlich aus, oder? Das ist eine Breite von nur 300 Pixel.
Die Bildqualität als Optimierungs-Möglichkeit für Websites
Die Auflösung ist aber noch nicht alles. Das Bild, das Sie hier gerade nochmal gesehen haben, ist auch bezüglich der Qualität optimiert. Das bedeutet, es wurde zusätzlich komprimiert, sodass es möglichst klein wird, dabei aber noch möglichst gut aussieht. So, darüber, wie weit man es mit dieser zusätzlichen Optimierung treiben soll, kann man sicher streiten, doch schnell ist es dadurch auf jeden Fall.
Genau diese Art von Optimierung besorgt das gleich noch genauer vorgestellte WordPress-Plugin Imagify, und zwar voll-automatisch. Man lädt das Originalbild einfach in die WordPress-Medien-Bibliothek hoch (ich skaliere es vorher bereits auf eine Größe herunter, die ich gut und passend finde, den Grund dafür erzähle ich Ihnen gleich noch). Das Plugin optimiert, ersetzt und backupt das hochgeladene Bild automatisch.
Nehmen wir als konkretes Beispiel wieder das Beispiel-Titelbild von gerade eben im vorangegangenen Abschnitt. Im Original mit einer Auflösung von 1920×1280 Pixel hatte es eine Dateigröße von 1.1 MB (im Format jpg). Der Ausschnitt, den Sie hier sehen, hat, skaliert auf 300×219 Pixel, noch eine Dateigröße von 55 kB (das sind 0.055 MB).
Das so hochgeladene Bild hat Imagify bei gleicher Auflösung noch weiter optimiert. Das Resultat (das sie hier sehen), hat nur noch 27 kB, ist also um mehr als einen Faktor 40 kleiner als die Ausgangsdatei. Wer also einfach Bilder ohne Skalierung und Optimierung auf seine Website stellt, riskiert vergleichsweise gewaltige Download-Größen.
Bildoptimierung in WordPress mit dem Plugin Imagify
Was Sie bisher hier so gelesen haben, kann zwar Spass machen, aber nicht auf lange Sicht. Da wünscht man sich dann schon eine automatisierte Lösung oder zumindest etwas, das dem nahe kommt. Hier greifen wir, wie bei jeglicher Funktionserweiterung in WordPress, auf Plugins zurück. In diesem Fall ist das Plugin Imagify ein gutes Beispiel.
Imagify kann (und wird) Ihnen bei allen Aspekten der Bildoptimierung helfen. Es kann automatisch Bilder re-skalieren, die Qualität über Kompressionsstufen anpassen, zusätzliche Bild-Dateiformate (siehe unten) erzeugen und bereitstellen, und die Verlinkung zu einem CDN herstellen (siehe gleich).
Das alles passiert zunächst voll automatisiert, nachdem Sie das Plugin zum ersten Mal aktivieren, und dann im laufenden Betrieb automatisch, wenn Sie ein neues Bild in Ihre Medien-Bibliothek hochladen. Insgesamt eine perfekte Methode, um sich einen Haufen Arbeit zu ersparen und automatisiert gute Ergebnisse zu erhalten.
Da ich an anderer Stelle schon eine Anleitung zur Installation und Einrichtung von Imagify verfasst habe, verweise ich meine daran interessierten LeserInnen an dieser Stelle einfach auf diesen anderen Artikel. Klicken Sie dazu einfach auf den Link.
Bild-Optimierung per Content-Delivery-Network (CDN)
Ein weiterer wichtiger Aspekt der Bildoptimierung ist die Möglichkeit, Bilder einfach auszulagern. Insbesondere bei großen, hochauflösende Bildern sollte man sich diesen Schritt ernsthaft überlegen. Durch die Verwendung eines Content-Delivery-Networks (CDN) können Sie die Ladezeiten Ihrer Bilder verbessern, und zwar so:
Ein CDN speichert Ihre Bilder auf mehreren Servern weltweit und liefert sie an Ihre Besucher vom geografisch nächstgelegenen Server aus. Dadurch werden die Ladezeiten Ihrer Bilder erheblich verkürzt (weil der Server eventuell näher am Besucher-Browser dran ist als Ihr eigener) und gleichzeitig wird Ihr Webserver entlastet.
Außerdem erledigt ein CDN normalerweise auch bereits die oben besprochene Komprimierung der Bilder, ohne die Qualität merklich zu beeinträchtigen, und konvertiert sie automatisch in das am besten geeignete Bildformat für verschiedene Browser und Geräte. Bei der Auswahl eines CDN sollten Sie auf Kompatibilität, Preisgestaltung und Benutzerfreundlichkeit achten. Einige bekannte CDN-Anbieter sind Cloudflare, Ezoic, Amazon CloudFront und MaxCDN.
Das ideale/optimale Bild-Dateiformat in WordPress
Die Wahl des richtigen Bildformats ist ein entscheidender Faktor bei der Optimierung der Bilder auf Ihrer WordPress-Website. Verschiedene Bildformate haben unterschiedliche Stärken und Schwächen. Im Folgenden stelle ich die gängigsten Formate und deren Vor- und Nachteile vor:
JPG (.jpg)
JPG ist das gebräuchlichste Bildformat im Web und eignet sich gut für Fotos und komplexe Bilder mit vielen Farben. Es bietet eine hohe Kompressionsrate und ermöglicht kleinere Dateigrößen bei guter Qualität. Der Nachteil von JPG ist, dass es sich um ein verlustbehaftetes Format handelt, was bedeutet, dass die Bildqualität bei hoher Kompression leidet. Jedoch ist das in den meisten Fällen für Webzwecke durchaus akzeptabel.
PNG (.png)
PNG ist ein verlustfreies Bildformat, das besonders für Vektorgrafiken, Text, Logos und einfache Bilder mit wenigen Farben geeignet ist. Es unterstützt Transparenz und bietet im Allgemeinen eine bessere Bildqualität als JPG. Der Hauptnachteil von PNG ist, dass die Dateien deutlich größer sein können als bei JPG, was zu vergleichsweise längeren Ladezeiten führt.
GIF (.gif)
GIF ist ein älteres Bildformat, das hauptsächlich für einfache Animationen und Bilder mit einer geringen Anzahl von Farben verwendet wird. GIF unterstützt Transparenz und ermöglicht kleine Dateigrößen. Der größte Nachteil von GIF ist seine begrenzte Farbpalette (maximal 256 Farben), wodurch es für Fotos und hochwertige Bilder weniger geeignet ist.
WebP (.webp)
WebP ist ein modernes Bildformat, das von Google entwickelt wurde. Es kombiniert die Vorteile von JPG und PNG und ermöglicht sowohl verlustfreie als auch verlustbehaftete Kompression. WebP bietet im Vergleich zu JPG und PNG eine deutlich bessere Bildqualität bei kleineren Dateigrößen. Der Hauptnachteil von WebP ist die eingeschränkte Browserunterstützung, insbesondere in älteren Browsern. Allerdings gewinnt es zunehmend an Akzeptanz und wird in absehbarer Zeit wahrscheinlich das dominierende Bildformat im Web werden.
Um das ideale Bildformat für Ihre WordPress-Website zu wählen, sollten Sie die Art der Bilder, die Sie verwenden, und die Anforderungen Ihrer Zielgruppe berücksichtigen. Im Prinzip können Sie es sich mit einem geeigneten Plugin (z.B. Imagify) auch einfach machen und das Plugin die jeweils ideale Version Ihrer Bilder bereitstellen lassen.
Ausnahmen für die Bild-Optimierung auf Websites
Wie immer gibt es auch hier Ausnahmen. Nämlich dann, wenn es darauf ankommt, dass ein Bild (oder mehrere) auch auf einem super-riesen-Bildschirm mit extrem hoher Auflösung noch spitze und gestochen scharf aussieht. Dann muss man eben die hohe Auflösung in Kauf nehmen, sollte aber trotzdem mit der Qualitätsoptimierung Experimente machen.
Imagify kann auch hier helfen und optimiert je nach Wunsch mehr oder weniger aggressiv an der Bildqualität. Was in solchen Fällen jedenfalls angesagt ist, ist Lazy-Loading der Bilder. Das bedeutet, dass nicht gleich sichtbare Bilder (z.B. weil sie erst weiter unten im Text vorkommen) erst dann geladen werden, wenn der Besucher zu scrollen beginnt.
Beispiele für Situationen, in denen man super-geniale Bilder sehen will, fallen uns sicher allen ein. Von einem Ferienhotel zum Beispiel. Oder auf der Website eines Profifotografen. Oder eines Designers. Oder … you get the picture.
Fazit und weiterführende Links
Als klares Fazit dieser Diskussion kann ich sagen: Optimieren Sie unbedingt die Bilder auf Ihrer Website (ja, das gilt auch, wenn Sie gar nicht mit WordPress arbeiten). Dabei achten Sie am besten sowohl auf die Größe des Bildes in Pixel als auch auf die Qualität (über Kompression), und Sie verwenden ein geeignetes Format (.jpg oder .webp).
Was Bilder in WordPress betrifft, gibt es allerdings noch wesentlich mehr zu sagen als nur, wie man sie optimiert. Hier auf WebsiteBerater.com finden Sie natürlich auch dazu die entsprechenden Informationen. Ein guter Ausgangspunkt ist mein Artikel Bilder in WordPress, einfach erklärt.
Feedback zu diesem Artikel
Über Feedback zu diesem Artikel freue ich mich, z.B. ob Sie die Bilder auf Ihrer Website bereits optimiert anbieten und wie genau. Falls Ihnen der Artikel nicht geholfen hat, kommentieren Sie bitte unbedingt ein paar Zeilen zu jenen Informationen, die Ihnen hier noch fehlen.
Oder lassen Sie unten einen allgemeinen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!
