Fotos oder Gra­fi­ken wer­ten einen Blog oder eine Web­site deut­lich auf, auch wenn man es mit den Bil­dern nicht unbe­dingt über­trei­ben soll­te. Denn schließ­lich müs­sen sie beim Öff­nen der Web­sei­te gela­den wer­den, was die Lade­zeit nega­tiv beein­flus­sen kann.


Mitt­ler­wei­le beherr­schen für Fotos und Gra­fi­ken zwei Bild­da­tei­for­ma­te das Inter­net, ein­mal .jpg und ein­mal .png. Das .gif-For­mat wird immer wei­ter zurück­ge­drängt, ist aber sehr beliebt in der Ani­ma­ted-GIF-Vari­an­te, womit sich sogar klei­ne Film­chen oder ande­re Gra­fik­ani­ma­tio­nen ein­bin­den las­sen. Die­ser Arti­kel beschränkt sich aber auf die zwei wesent­li­chen For­ma­te JPG und PNG.

Da kommt in den aller­meis­ten Fäl­len die Fra­ge auf, wann soll­te ich ein jpg-Bild und wann ein png-Bild einfügen.

Gene­rell lässt sich fest­stel­len, dass JPG bes­ser für Foto­gra­fien und Bil­der mit vie­len Far­ben und wei­chen Farb­über­gän­gen ver­wen­det wer­den soll­te, PNG dage­gen für Logos, Gra­fi­ken mit Text oder Bil­der mit har­ten Farbübergängen.

JPG oder JPEG (Joint Photographic Experts Group): Besonderheiten

  • JPG-Kom­pri­mie­rung ist nicht ver­lust­frei: Bei zu star­ken Kom­pri­mie­run­gen kön­nen Rän­der ver­schwim­men und das Motiv wird im Gan­zen unscharf. Vor allem rote Flä­chen bekom­men bei hoher Kom­pri­mie­rung unschö­ne Farb­ein­la­ge­run­gen (soge­nann­tes Rauschen).
  • Es sind klei­ne Datei­grö­ßen möglich.
  • Dar­stel­lung bis zu 16,7 Mil­lio­nen Far­ben möglich
  • Trans­pa­renz lässt sich mit JPG nicht darstellen.
  • Das For­mat ist nicht für Dar­stel­lun­gen mit schar­fen Kan­ten zu empfehlen.
  • JPG soll­te vor allem für Bil­der ange­wen­det wer­den, bei denen die Kom­pri­mie­rung wich­ti­ger ist als die Top-Qua­li­tät. Man kann vie­le Bil­der stark kom­pri­mie­ren, ohne dass ein gro­ßer Qua­li­täts­ver­lust sicht­bar ist.

PNG (Portable Networks Graphics): Besonderheiten

  • PNG ist für gro­ße Dar­stel­lun­gen nicht geeig­net, da die Datei­en zu lan­ge gela­den werden.
  • PNG-Bil­der las­sen sich nahe­zu ver­lust­frei komprimieren.
  • Dar­stel­lung bis zu 16,7 Mil­lio­nen Far­ben möglich
  • Es sind auch klei­ne Datei­grö­ßen mit PNG möglich.
  • Mit PNG las­sen sich Trans­pa­renz und Semi­trans­pa­renz darstellen.
  • Für Text­gra­fi­ken und Logos (die oft frei­ge­stellt sind) — also Gra­fi­ken mit schar­fem Rand — ist PNG das bes­te Dateiformat.
Lesen  Mit WooCommerce PDF-Rechnungen generieren und verschicken

Wie groß der Unter­schied zwi­schen einer png- und jpg-Gra­fik aus­fal­len kann, habe ich vor kur­zem selbst fest­ge­stellt: Ein Foto der Grö­ße 2200 x 1713 Pixel war in PNG 6,6 MB groß und in kom­pri­mier­ter JPG-Vari­an­te nur noch 550 KB. Ich habe dar­auf geach­tet, dass dabei kei­ne Qua­li­täts­ver­lus­te (zumin­dest kei­ne sicht­ba­re) zu erken­nen sind.

Bilder in Blogartikel einfügen

Wer vie­le Bil­der (bei­spiels­wei­se Screen­shots) in sei­ne Blog­ar­ti­kel ein­bin­det, der soll­te dar­auf ach­ten, dass die Bild­grö­ße in Pixel schon vor­her mit­hil­fe eines Bild­be­ar­bei­tungs­pro­gramms soweit redu­ziert wird, dass das Bild oder die Gra­fik gut in die Text­spal­te passt. Ist also der Con­tent- bzw. Text­be­reich ca. 800 Pixel breit, dann soll­te das Bild nicht brei­ter sein.

Zwar kann man in Wor­d­Press die Bild­grö­ße auch indi­vi­du­ell ein­stel­len, den­noch spart man Spei­cher­ka­pa­zi­tät auf dem Ser­ver und ent­las­tet das Sys­tem, wenn man ver­mei­det, rie­sen­gro­ße Bil­der von mehr als 2000 Pixel Brei­te oder Höhe hochzuladen.

Nützliche Komprimierungsplugins für WordPress

Bevor ich ein paar Plugins vor­stel­le, mit denen sich Bil­der sehr gut kom­pri­mie­ren las­sen, will ich für die Kom­pri­mie­rung von PNG und JPG ein prak­ti­sches Tool nen­nen: https://​tinypng​.com.

Damit las­sen sich PNG und JPG sehr schnell und unkom­pli­ziert um eini­ge KB bis MB ver­klei­nern. Und es wird einem auch ange­zeigt, wie groß die Kom­pri­mie­rung aus­ge­fal­len ist. Ich nut­ze die­ses Tool jeden­falls sehr oft.

Opti­mus:

Mit die­sem Plugin las­sen sich Kom­pri­mie­run­gen (JPG und PNG) bis zu 70 Pro­zent erzie­len, dafür muss man sich aller­dings die kos­ten­pflich­ti­ge Plugin-Ver­si­on zule­gen, die es auf https://​opti​mus​.io/​en/ für 29 Dol­lar pro Jahr gibt (eine Lizenz für eine unbe­grenz­te Zahl eige­ner Websites).

Das Plugin funk­tio­niert ganz sim­pel. Schon beim Hoch­la­den in die Media­thek wird das Bild kom­pri­miert. Man muss also selbst nichts wei­ter beach­ten. In den Plugin-Ein­stel­lun­gen kann man ein paar Punk­te ändern, wie z. B. dass Ori­gi­nal­bil­der nicht kom­pri­miert wer­den und noch ein paar ande­re Dinge.

Lesen  Plugin-Vorstellung: Mit wp-events Termine und Events verwalten

In der kos­ten­lo­sen Ver­si­on wer­den nur Bil­der in der Ori­gi­nal­grö­ße von 100 KB ver­klei­nert, in der kos­ten­pflich­ti­gen Ver­si­on bis zu einer Grö­ße von 5 MB.

https://​de​.wor​d​press​.org/​p​l​u​g​i​n​s​/​o​p​t​i​m​us/

Imsa­ni­ty:

Bei die­sem Plugin kann man ein­stel­len, wie groß die Maxi­mal­grö­ße von sehr gro­ßen hoch­ge­la­de­nen Fotos sein soll, die Stan­dard­ein­stel­lung ist 2048 x 2048 Pixel. Die­se Zahl lässt sich noch indi­vi­du­ell her­un­ter­set­zen. Dar­über hin­aus kann man noch ein­stel­len, ob PNG-For­ma­te vom Plugin in JPG umge­wan­delt wer­den sol­len und wie hoch die JPG-Bild­qua­li­tät sein soll (90 Pro­zent ist der Standardwert).

Mit der Bulk-Funk­ti­on kann man sehr gro­ße, schon auf der Web­site befind­li­che Fotos in einem Schritt in die neu defi­nier­te Maxi­mal­grö­ße umwan­deln las­sen. Bit­te beach­ten: Ist die­ser Pro­zess ein­mal durch­ge­führt wor­den, kann man ihn nicht mehr rück­gän­gig machen. Am bes­ten tes­test du vor­her an einem aus­ge­wähl­ten Bild, wie sich die­se Ver­klei­ne­rung ver­hält. Ist sie ok, dann kannst du auch alle ande­ren Bil­der ver­klei­nern las­sen. Ist sie nicht ok, hast du nur ein Bild unschön ver­klei­nert, was sich ja schnell wie­der aus­mer­zen lässt.

https://​wor​d​press​.org/​p​l​u​g​i​n​s​/​i​m​s​a​n​i​ty/

WP Smush:

Hast du die­ses Bild­kom­pri­mie­rungs­plugin instal­liert, kommt gleich die Mel­dung, wie vie­le Bil­der in dei­nem Blog sind, die “ges­musht”, also kom­pri­miert wer­den soll­ten. In der kos­ten­pflich­ti­gen Pro-Ver­si­on kön­nen in einem Schritt alle Bil­der ver­klei­nert wer­den, in der kos­ten­lo­sen Ver­si­on 50 Bil­der mit einem Klick auf den blau­en Button.

Mit WP Smush las­sen sich JPG- und PNG-Bil­der kom­pri­mie­ren. Die Ein­stel­lun­gen sind in der Gra­tis-Ver­si­on nicht sehr umfang­reich: Du kannst ein­stel­len, ob hoch­ge­la­de­ne Bil­der auto­ma­tisch kom­pri­miert wer­den sol­len oder nicht, du kannst wäh­len, ob EXIF Daten erhal­ten blei­ben sol­len und du kannst auch eine Maxi­mal­grö­ße von hoch­ge­la­de­nen Bil­dern fest­set­zen, genau­so wie bei dem Plugin Imsanity.

Lesen  Mit WooCommerce German Market einen Online-Shop rechtssicher erstellen

https://​wor​d​press​.org/​p​l​u​g​i​n​s​/​w​p​-​s​m​u​s​h​it/

Fazit

Die Datei­grö­ße von Bil­dern wirkt sich sehr stark auf die Lade­ge­schwin­dig­keit einer Web­site aus, die ja auch ein Ran­king­fak­tor bei Goog­le dar­stellt. Daher soll­test du dei­ne Bil­der kom­pri­mie­ren, damit nicht all­zu gro­ße Gra­fi­ken und Fotos die Lade­zeit unnö­tig ver­län­gern und mög­li­cher­wei­se Web­site-Besu­cher abschrecken.

Die drei genann­ten Bild­kom­pri­mie­rungs­plugins sind nur eine Aus­wahl von mir. Es gibt sicher­lich noch wei­te­re, aber die­se hier zäh­len zu den belieb­tes­ten und sie haben alle nöti­gen Funktionen.

Um zu sehen, wie sich die Kom­pri­mie­rung auf die Bild­qua­li­tät aus­wirkt, emp­feh­le ich, das jewei­li­ge Plugin zu tes­ten und falls du nicht zufrie­den damit bist, ein wei­te­res zu instal­lie­ren und des­sen Funk­tio­nen eben­falls durch­zu­spie­len. Damit dir dei­ne schon hoch­ge­la­de­nen Bil­der nicht unnö­tig ver­klei­nert wer­den, den­ke auch unbe­dingt an eine Daten­si­che­rung. So kannst du nicht gewoll­te Kom­pri­mie­run­gen mit den gesi­cher­ten Bild­da­tei­en wie­der rück­gän­gig machen.