Inhalt zuletzt aktualisiert: 26. April 2017
Fotos oder Grafiken werten einen Blog oder eine Website deutlich auf, auch wenn man es mit den Bildern nicht unbedingt übertreiben sollte. Denn schließlich müssen sie beim Öffnen der Webseite geladen werden, was die Ladezeit negativ beeinflussen kann.
Mittlerweile beherrschen für Fotos und Grafiken zwei Bilddateiformate das Internet, einmal .jpg und einmal .png. Das .gif-Format wird immer weiter zurückgedrängt, ist aber sehr beliebt in der Animated-GIF-Variante, womit sich sogar kleine Filmchen oder andere Grafikanimationen einbinden lassen. Dieser Artikel beschränkt sich aber auf die zwei wesentlichen Formate JPG und PNG.
Da kommt in den allermeisten Fällen die Frage auf, wann sollte ich ein jpg-Bild und wann ein png-Bild einfügen.
Generell lässt sich feststellen, dass JPG besser für Fotografien und Bilder mit vielen Farben und weichen Farbübergängen verwendet werden sollte, PNG dagegen für Logos, Grafiken mit Text oder Bilder mit harten Farbübergängen.
JPG oder JPEG (Joint Photographic Experts Group): Besonderheiten
- JPG-Komprimierung ist nicht verlustfrei: Bei zu starken Komprimierungen können Ränder verschwimmen und das Motiv wird im Ganzen unscharf. Vor allem rote Flächen bekommen bei hoher Komprimierung unschöne Farbeinlagerungen (sogenanntes Rauschen).
- Es sind kleine Dateigrößen möglich.
- Darstellung bis zu 16,7 Millionen Farben möglich
- Transparenz lässt sich mit JPG nicht darstellen.
- Das Format ist nicht für Darstellungen mit scharfen Kanten zu empfehlen.
- JPG sollte vor allem für Bilder angewendet werden, bei denen die Komprimierung wichtiger ist als die Top-Qualität. Man kann viele Bilder stark komprimieren, ohne dass ein großer Qualitätsverlust sichtbar ist.
PNG (Portable Networks Graphics): Besonderheiten
- PNG ist für große Darstellungen nicht geeignet, da die Dateien zu lange geladen werden.
- PNG-Bilder lassen sich nahezu verlustfrei komprimieren.
- Darstellung bis zu 16,7 Millionen Farben möglich
- Es sind auch kleine Dateigrößen mit PNG möglich.
- Mit PNG lassen sich Transparenz und Semitransparenz darstellen.
- Für Textgrafiken und Logos (die oft freigestellt sind) — also Grafiken mit scharfem Rand — ist PNG das beste Dateiformat.
Wie groß der Unterschied zwischen einer png- und jpg-Grafik ausfallen kann, habe ich vor kurzem selbst festgestellt: Ein Foto der Größe 2200 x 1713 Pixel war in PNG 6,6 MB groß und in komprimierter JPG-Variante nur noch 550 KB. Ich habe darauf geachtet, dass dabei keine Qualitätsverluste (zumindest keine sichtbare) zu erkennen sind.
Bilder in Blogartikel einfügen
Wer viele Bilder (beispielsweise Screenshots) in seine Blogartikel einbindet, der sollte darauf achten, dass die Bildgröße in Pixel schon vorher mithilfe eines Bildbearbeitungsprogramms soweit reduziert wird, dass das Bild oder die Grafik gut in die Textspalte passt. Ist also der Content- bzw. Textbereich ca. 800 Pixel breit, dann sollte das Bild nicht breiter sein.
Zwar kann man in WordPress die Bildgröße auch individuell einstellen, dennoch spart man Speicherkapazität auf dem Server und entlastet das System, wenn man vermeidet, riesengroße Bilder von mehr als 2000 Pixel Breite oder Höhe hochzuladen.
Nützliche Komprimierungsplugins für WordPress
Bevor ich ein paar Plugins vorstelle, mit denen sich Bilder sehr gut komprimieren lassen, will ich für die Komprimierung von PNG und JPG ein praktisches Tool nennen: https://tinypng.com.
Damit lassen sich PNG und JPG sehr schnell und unkompliziert um einige KB bis MB verkleinern. Und es wird einem auch angezeigt, wie groß die Komprimierung ausgefallen ist. Ich nutze dieses Tool jedenfalls sehr oft.
Optimus:
Mit diesem Plugin lassen sich Komprimierungen (JPG und PNG) bis zu 70 Prozent erzielen, dafür muss man sich allerdings die kostenpflichtige Plugin-Version zulegen, die es auf https://optimus.io/en/ für 29 Dollar pro Jahr gibt (eine Lizenz für eine unbegrenzte Zahl eigener Websites).
Das Plugin funktioniert ganz simpel. Schon beim Hochladen in die Mediathek wird das Bild komprimiert. Man muss also selbst nichts weiter beachten. In den Plugin-Einstellungen kann man ein paar Punkte ändern, wie z. B. dass Originalbilder nicht komprimiert werden und noch ein paar andere Dinge.
In der kostenlosen Version werden nur Bilder in der Originalgröße von 100 KB verkleinert, in der kostenpflichtigen Version bis zu einer Größe von 5 MB.
https://de.wordpress.org/plugins/optimus/
Imsanity:
Bei diesem Plugin kann man einstellen, wie groß die Maximalgröße von sehr großen hochgeladenen Fotos sein soll, die Standardeinstellung ist 2048 x 2048 Pixel. Diese Zahl lässt sich noch individuell heruntersetzen. Darüber hinaus kann man noch einstellen, ob PNG-Formate vom Plugin in JPG umgewandelt werden sollen und wie hoch die JPG-Bildqualität sein soll (90 Prozent ist der Standardwert).
Mit der Bulk-Funktion kann man sehr große, schon auf der Website befindliche Fotos in einem Schritt in die neu definierte Maximalgröße umwandeln lassen. Bitte beachten: Ist dieser Prozess einmal durchgeführt worden, kann man ihn nicht mehr rückgängig machen. Am besten testest du vorher an einem ausgewählten Bild, wie sich diese Verkleinerung verhält. Ist sie ok, dann kannst du auch alle anderen Bilder verkleinern lassen. Ist sie nicht ok, hast du nur ein Bild unschön verkleinert, was sich ja schnell wieder ausmerzen lässt.
https://wordpress.org/plugins/imsanity/
WP Smush:
Hast du dieses Bildkomprimierungsplugin installiert, kommt gleich die Meldung, wie viele Bilder in deinem Blog sind, die “gesmusht”, also komprimiert werden sollten. In der kostenpflichtigen Pro-Version können in einem Schritt alle Bilder verkleinert werden, in der kostenlosen Version 50 Bilder mit einem Klick auf den blauen Button.
Mit WP Smush lassen sich JPG- und PNG-Bilder komprimieren. Die Einstellungen sind in der Gratis-Version nicht sehr umfangreich: Du kannst einstellen, ob hochgeladene Bilder automatisch komprimiert werden sollen oder nicht, du kannst wählen, ob EXIF Daten erhalten bleiben sollen und du kannst auch eine Maximalgröße von hochgeladenen Bildern festsetzen, genauso wie bei dem Plugin Imsanity.
https://wordpress.org/plugins/wp-smushit/
Fazit
Die Dateigröße von Bildern wirkt sich sehr stark auf die Ladegeschwindigkeit einer Website aus, die ja auch ein Rankingfaktor bei Google darstellt. Daher solltest du deine Bilder komprimieren, damit nicht allzu große Grafiken und Fotos die Ladezeit unnötig verlängern und möglicherweise Website-Besucher abschrecken.
Die drei genannten Bildkomprimierungsplugins sind nur eine Auswahl von mir. Es gibt sicherlich noch weitere, aber diese hier zählen zu den beliebtesten und sie haben alle nötigen Funktionen.
Um zu sehen, wie sich die Komprimierung auf die Bildqualität auswirkt, empfehle ich, das jeweilige Plugin zu testen und falls du nicht zufrieden damit bist, ein weiteres zu installieren und dessen Funktionen ebenfalls durchzuspielen. Damit dir deine schon hochgeladenen Bilder nicht unnötig verkleinert werden, denke auch unbedingt an eine Datensicherung. So kannst du nicht gewollte Komprimierungen mit den gesicherten Bilddateien wieder rückgängig machen.
