Nicht optimierte Bilder gehören zu den größten Ärgernissen, wenn es darum geht herauszufinden warum eine Website schlechte oder nicht so gute Performance-Werte aufweist. Sie sind deswegen ein Ärgernis, weil nicht optimierte Bilder als Ursache für schlechte Performance-Werte vergleichsweise einfach vermieden werden können. Die Antwort darauf lautet nämlich:
Bitte immer die Bilder optimieren.
Die Anschlussfrage daran ist natürlich: Was bedeutet das eigentlich und wie geht das mit dem Optimieren? Die Frage ist nicht ganz neu und so haben auch wir uns hier auf perun.net schon öfter mit diesem Thema beschäftigt. Grundsätzlich sollten Bilder, die im Web eingesetzt werden, immer optimiert werden. Das betrifft zum einen deren Größe, aber auch den Bildausschnitt. Größe meint hier sowohl die Pixelgröße oder Ausmaße, wie auch die Speichergröße.
Die Pixelgröße bzw. die Dimension der Bilder sollte mindestens so groß sein wie die in den Einstellungen maximal eingestellte Bildgröße. Sie sollte gleichzeitig aber auch nicht zu groß sein, da das Bild sonst bedingt durch seine Pixelgröße unnötigen Speicherplatz belegt.
Die Speichergröße wiederum sollte immer nur maximal so groß sein, dass die Qualität des Bildes nicht (zu stark) leidet.
Es gilt also immer eine Abwägung zu treffen zwischen Größe und Qualität. Was aber unbestritten ist, ist dass sich optimierte Bilder positiv auf die Performance einer Website auswirken, wie Vladimir in seinem Beitrag WordPress-Performance verbessern: Bilder optimieren schon eindrucksvoll gezeigt hat.
Um also eine Optimierung hinsichtlich der Pixelgröße wie auch der Bildgröße vorzunehmen, bedarf es Werkzeug. Und dieses Werkzeug kann man grob in lokale Programme (Photoshop, Irfanview etc.), Online-Dienste, wie etwa TinyPNG, TinyJPG oder das von Vladimir vorgestellte Photopea und Plugins wie EWWW Image Optimizer, Smush oder ShortPixel Image Optimizer aufteilen.
Angepasst an den Arbeitsablauf (Workflow) kann man sich im Prinzip aussuchen, welche Variante man wählt, wobei die kostenfreien Online-Dienste nicht ganz so gute Ergebnisse liefern. Wenn man aber die Wahl hat zwischen “Handarbeit” mit einem lokal installierten Programm und einem Plugin ist Vladimirs Meinung eindeutig:
Ich selbst nutze solche Plugins nicht, weil meiner Meinung nach die Bildbearbeitung – das Bild zuschneiden und komprimieren – zum redaktionellen Arbeitsablauf bzw. Workflow gehört. Daher sollte meiner Meinung nach der Autor auch über grundlegende Kenntnisse der Bildbearbeitung verfügen: den passenden Ausschnitt wählen, evtl. kleine Effekte hinzufügen und wenn man schon da ist, kann man auch das Bild für den Webeinsatz komprimieren bzw. abspeichern.
Dann ist es auch nicht mehr notwendig, dass man dafür zusätzliche Tools einbindet, die ggfl. Ressourcen des eigenen Servers in Anspruch nehmen.
Vladimir
Grundsätzlich stimme ich Vladimir zu, denn unsere Devise hinsichtlich eingesetzter Plugins lautet schon immer: “Weniger ist mehr.” Jedes zusätzliche Plugin ist eine “Belastung” und auch ein potenzielles Sicherheitsrisiko für eine WordPress-Installation.
Ich kann mir aber natürlich vorstellen, dass es Situationen gibt, in denen ein Plugin das Mittel der Wahl ist, um Bilder vor dem Einsatz auf der Website zu optimieren. Zum Beispiel dann, wenn Redakteure wenig Erfahrung in der Bildbearbeitung haben und die Bilder schon “zugeschnitten” sind.
In diesem Sinne. Wie macht ihr das? Optimiert ihr die Bilder vor dem Upload oder nutzt ihr ein Plugin dafür?
Wer noch mehr zum Thema lesen möchte, dem empfehle ich die Beiträge:
- WordPress: Die Ladezeit-Optimierung sollte am Anfang stehen
- WordPress 5.9: optimiertes Lazy Loading verbessert Performance
Image(s) licensed by Ingram Image/adpic.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Ich nutze Imagify.io – das macht Kompression und Umwandlung in webp automatisch. Kostet halt bisschen was, aber so bin ich sicher, dass meine Kunden immer reduzierte Bildgrössen ausgeben 😀
Bald soll ja WP selbst webp bereitstellen …
Ich bearbeite Bilder immer zuvor mit Gimp. Meist beschränkt sich das auf eine Verkleinerung mit 1024 Pixel für die lange Seite des Bildes. Aber Zuschnitt kommt insbesondere für Artikelbilder vor, und je nach Qualität auch mal ein Weißabgleich oder ähnliches zur Auffrischung der Farben.
Onlinedienste, gerade die kostenlosen, setzten gerne noch ein Wasserzeichen als Werbung, das setzt ich mittels Image Watermark per Plugin lieber selbst, als rudimentären Kopierschutz.
Moin zusammen,
ich habe sehr viele Fotos im Einsatz. Plugin´s & Dienste sind an sich interessant, aber wo landen die Fotos dann gegebenfalls bei denen, da die Umwandlung nicht lokal bei mir erfolgt (so meine bisherige Wahrnehmung)?
Bis jetzt komme ich prima zurecht via XnView (wie Irfanview) immer zahlreiche Fotos per Stapelverarbeitung auf einmal auf 1024px Breite zu verkleinern und die Metadaten zu löschen.
Nicht dieser Arbeitsschritt ist der vermeintlich zeitraubende bzw. anstrengende als vielmehr die vorherige Auswahl der Fotos!
Vom WebP Dateiformat habe ich auch schon gelesen, aber bei mir zeigen sich in Versuchen bislang keine kleineren Dateigrößen oder eine bessere Qualität, leider. Vielleicht ist das Thema noch früh und zu hipp für mich 😉
Eine erste Vorbearbeitung in “Vorschau” inklusive Reduzierung der Breite/Höhe. Den Rest der Arbeit darf dann ShortPixel erledigen 🙂
Ich habe sehr gute Erfahrungen mit dem “WebP Converter for Media” von Mateusz Gbiorczyk gemacht. Einfach Plugin installieren und aktivieren, einmal den Bildbestand konvertieren und von dem Moment werden alle Bilder ohne weiteres Dazutun im WebP-Format ausgeliefert. Bei einer meiner Installation Installation bekomme ich damit 40% kleinere Bilddateien (entspricht hier 20MB), was ich ziemlich beeindruckend finde. Der Autor bietet auch eine kostenpflichtige Version an, die das noch modernere AVIF-Format unterstützt, aber die habe ich noch nicht getestet.