Lade­ge­schwin­dig­keit opti­mie­ren: 3. Bil­der mit­hil­fe von Word­Press-Plug­ins komprimieren

Ladegeschwindigkeit optimieren: 3. Bilder mithilfe von WordPress-Plugins komprimieren

Lesedauer: 6 Minuten

Spür­bar schnel­ler lädt dei­ne Word­Press-Sei­te, wenn du die ver­wen­de­ten Gra­fi­ken und Fotos in der Datei­grö­ße ent­spre­chend kom­pri­mierst. Die­se Tat­sa­che ver­ges­sen vie­le Blog­ger und laden die Bil­der in Ori­gi­nal­grö­ße in das Word­Press-CMS, ohne sie vor­her ver­klei­nert zu haben. Viel­leicht auch, weil sie kein Gra­fik­pro­gramm verwenden.

Tei­le der Arti­kel­rei­he „Lade­ge­schwin­dig­keit optimieren:

  1. Kos­ten­lo­se Tools zum Tes­ten der Website-Geschwindigkeit
  2. Lade­ge­schwin­dig­keit opti­mie­ren: Vorbereitungen
  3. Bil­der mit­hil­fe von Word­Press-Plug­ins komprimieren

Ers­ter Arbeits­schritt: Bilder/​Grafiken in der Pixel­brei­te verkleinern

Bevor ich mei­ne Gra­fi­ken auf die Web­site hoch­la­de, ver­klei­ne­re ich sie in der Pixel­grö­ße. Ich weiß, wie breit mein Arti­kel­bild sein soll, näm­lich 840 Pixel breit. Auf die­sen Wert set­ze ich alle Gra­fi­ken, die ich in die ein­zel­nen Blog­bei­trä­ge ein­fü­ge. Das soll­te der ers­te Arbeits­schritt der Bil­der­kom­pri­mie­rung sein.

Für die meis­ten Bil­der ver­wen­de ich das Bild­for­mat jpg und kom­pri­mie­re in Pho­to­shop auf die Stu­fe 6 oder 7. In Pho­to­shop selbst (auch in mei­ner recht alten Ver­si­on) gibt es eine Funk­ti­on unter Datei, mit der man Bil­der für das Web spei­chern kann. Unter­halb der ange­zeig­ten kom­pri­mier­ten Bil­der (4fache Kom­pri­mie­rung mög­lich) steht die Datei­grö­ße. Mit einem Klick lässt sich das jewei­li­ge Bild aus­wäh­len und abspeichern.

Neben dem kos­ten­pflich­ti­gen und recht teu­ren Pho­to­shop gibt es noch zahl­rei­che kos­ten­lo­se Gra­fik­pro­gram­me im Inter­net, die du dir auf dei­nen Rech­ner her­un­ter­la­den kannst und mit denen du die Bild­grö­ße eben­falls ver­klei­nern kannst.

Eine gute Online-Alter­na­ti­ve für die Bild­da­tei­kom­pri­mie­rung mit einer Gra­fik­soft­ware fin­det sich auf der Web­site Tinypng. Die­ses Tool habe ich auch schon des Öfte­ren verwendet.

Weni­ger arbeits­auf­wän­dig ist es, wenn du statt Tinypng ein Bild­kom­pri­mie­rungs­plug­in in dei­ner Word­Press-Instal­la­ti­on einbindest.

Du fin­dest eini­ge Bild­kom­pri­mie­rungs­plug­ins für Word­Press im Inter­net, fast alle brin­gen eine gute Leis­tung, was die Ver­klei­ne­rung der Bild­da­tei angeht. Ich habe selbst 4 Plug­ins in der kos­ten­lo­sen Ver­si­on getes­tet, die ich nun näher vorstelle.

#1 Word­Press-Bil­der opti­mie­ren mit dem EWWW Image Opti­mi­zer – Free-Version

EWWW Image Optimizer – Free-Version

Mit über 700.000 akti­ven Instal­la­tio­nen gehört EWWW Image Opti­mi­zer zu den belieb­tes­ten Bild­kom­pri­mie­rungs­plug­ins. Es unter­stützt die For­ma­te jpg, png, gif und pdf. In der kos­ten­lo­sen Ver­si­on fin­det die Bild­kom­pri­mie­rung auf dei­nem Ser­ver statt, dafür muss die exec()-Funktion frei­ge­schal­tet sein, das ist nicht bei allen Hos­tern der Fall. Ich hat­te da mit mei­nem Hos­ter kei­ne Probleme.

Wer die kos­ten­pflich­ti­ge Ver­si­on ver­wen­det, kann die API des Online-Ser­vices nutzen.

In der kos­ten­lo­sen Ver­si­on kannst du nur die los­sless Kom­pri­mie­rung durch­füh­ren, in der Pro-Ver­si­on ist auch los­sy möglich.

Mein Test:
Ich habe für den Kom­pri­mie­rungs­test ein jpg-Foto hoch­ge­la­den, das die Pixel­grö­ße 1600×800 auf­weist, also recht groß ist. Vor der Kom­pri­mie­rung mit EWWW lag die Datei­grö­ße bei 800 KB.

EWWW ver­klei­nert die Datei um gera­de mal 5 Pro­zent (4,9 KB weni­ger als im Ori­gi­nal). Das Online-Tool TinyPng schafft dage­gen 73 Pro­zent: Die Datei ist nun noch 214 KB groß.

Exkurs: Was ist der Unter­schied zwi­schen „los­sy” und „los­sless”?

Die bei­den Begrif­fe tau­chen bei den Plug­in­be­schrei­bun­gen auf. Bei der Bild­kom­pri­mie­rung gibt es ein­mal die ver­lust­be­haf­te­te (los­sy) und ein­mal die ver­lust­freie (los­sless) Kom­pri­mie­rung, die bei­den Begrif­fe erklä­ren sich fast von selbst.

Bei einer los­sless Kom­pri­mie­rung erkennst du in der Qua­li­tät zwi­schen dem Bild vor und nach der Kom­pri­mie­rung so gut wie über­haupt kei­nen Unter­schied. Meis­tens wer­den bei die­sem Vor­gang über­flüs­si­ge Meta-Infor­ma­tio­nen der Bild­da­tei gelöscht.

Bei einer los­sy Kom­pri­mie­rung ver­schlech­tert sich durch eine Ver­rin­ge­rung der Far­ben und Auf­lö­sung mög­li­cher­wei­se die Bild­qua­li­tät. Dafür kannst du mit los­sy ein­deu­tig mehr Datei­grö­ße einsparen.

#2 Bil­der in Word­Press opti­mie­ren mit Ima­gi­fy — Free Version

Mit über 100.000 akti­ven Instal­la­tio­nen liegt Ima­gi­fy deut­lich hin­ter EWWW zurück, es unter­stützt die For­ma­te jpg und png, die Kom­pri­mie­run­gen los­sy und los­sless sind möglich.

In der kos­ten­lo­sen Ver­si­on darf die Bild­grö­ße maxi­mal 2 MB betra­gen, die monat­li­chen Uploads dür­fen 25 MB (ca. 250 Bil­der) nicht über­schrei­ten. Bevor du das Plug­in instal­lierst, soll­test du dich auf Ima­gy anmel­den und dei­ne API abho­len. Die­se wird nach­her in das Plug­in ein­ge­tra­gen. Bei der Anmel­dung wer­den dir zusätz­lich ein­ma­lig 25 MB auf dein Upload-Kon­tin­gent gutgeschrieben.

Das Plug­in ver­fügt über drei Komprimierungsstufen:

  • Nor­mal:Eine ver­lust­freie Kom­pri­mie­rung, die die sicht­ba­re Qua­li­tät des Bil­des nicht verändert
  • Aggres­si­ve: Los­sy Kom­pri­mie­rung mit nur gerin­gen Qualitätseinbußen
  • Ultra:Sehr star­ke Kom­pri­mie­rung mit hohen Qua­li­täts­ver­lus­ten, dafür wird das Bild deut­lich klei­ner in sei­ner Größe

Mein Test:
Das glei­che Bild wie oben wird in der Kom­pri­mie­rungs­stu­fe Aggres­si­ve um 92,39 Pro­zent! ver­klei­nert und ist nun noch 56,83 KB groß. Da kann sogar Tiny­P­ING mit 73 Pro­zent nicht mithalten.

Die Bild­qua­li­tät ist tat­säch­lich noch sehr gut, auch das kannst du dir über den Link „Ori­gi­nal mit opti­mier­tem Bild ver­glei­chen“ anschau­en (sie­he Bild unten). Ultra habe ich nicht getestet.

Der Kom­pri­mie­rungs­vor­gang dau­ert etwas, weil er auf den Ser­vern von Ima­gi­fy abläuft.

komprimiertes-Beispielbild
Bild: Links ist die Ori­gi­nal­da­tei, rechts die opti­mier­te Datei. Mir fällt kaum ein Unter­schied auf.

#3 Word­Press-Bil­der opti­mie­ren mit WP Smush- Free Version

WP Smush

Mit über 1 Mil­li­on akti­ver Instal­la­tio­nen und meh­re­ren Tau­send Bewer­tun­gen ist WP Smush wohl das belieb­tes­te Bild­kom­pri­mie­rungs-Plug­in. Es ist in einer kos­ten­lo­sen als auch kos­ten­pflich­ti­gen Ver­si­on ver­füg­bar. Es unter­stützt die For­ma­te jpg, png und gif.

Wer WP Smush kos­ten­los nutzt, darf nur Bil­der von 1 MB Grö­ße hoch­la­den, bei Bulk-Kom­pri­mie­run­gen kannst du maxi­mal 50 Bil­der opti­mie­ren. Wenn du das Plug­in kos­ten­los nutzt, steht dir als Kom­pri­mie­rung nur los­sless zur Ver­fü­gung, in der Pro-Ver­si­on ist auch los­sy einsetzbar.

Was mich bei der kos­ten­pflich­ti­gen Ver­si­on stört, ist, dass man bei WPMU DEV (dem­Entwick­ler des Plug­ins) Mit­glied wer­den muss, was mit $49 monat­lich zu Buche schlägt, ande­re Kauf­op­tio­nen exis­tie­ren nicht. In die­sem Paket sind noch wei­te­re Pre­mi­um-Plug­ins von WPMU DEV ent­hal­ten, wie z. B. das Secu­ri­ty-Plug­in Defen­der oder das Per­for­mance-Plug­in Hummingbird.

Die kos­ten­lo­se Vari­an­te von WP Smush hat natür­lich Beschrän­kun­gen: Die Grö­ße der zu opti­mie­ren­den Bil­der darf maxi­mal 1 MB betra­gen, bei der Pro-Ver­si­on sind bis zu 32 MB drin. Außer­dem wird die Bild­op­ti­mie­rung in der kos­ten­pflich­ti­gen Ver­si­on deut­lich schnel­ler durchgeführt.

Mein Test:
Mit der kos­ten­lo­sen Ver­si­on von Smush fällt die Kom­pri­mie­rung mei­nes Test­bil­des sehr dürf­tig aus, gera­de mal 4 Pro­zent sind drin. Das hat mich nicht überzeugt.

#4 Bil­der opti­mie­ren mit Short­Pi­xel- Free Version

Shortpixel

Mit mehr als 100.00 akti­ven Instal­la­tio­nen reiht sich das Bild­op­ti­mie­rungs­plug­in Short­Pi­xel in die Top-Liga die­ser Plug­in­ka­te­go­rie ein. Es unter­stützt die For­ma­te jpg, png, gif und pdf.

In der kos­ten­lo­sen Ver­si­on kannst du 100 Bil­der maxi­mal pro Monat kom­pri­mie­ren, da aller­dings jedes Bild von Word­Press in meh­re­ren Grö­ßen abge­spei­chert wird (und man­che The­mes gene­rie­ren auch noch wei­te­re Grö­ßen­va­ri­an­ten), ist die­ses Kon­tin­gent schnell auf­ge­braucht. Los­sy und los­sless Kom­pri­mie­rung sind auch in der Gra­tis-Aus­ga­be möglich.

Neben los­sy und los­sless gibt es noch die Kom­pri­mie­rung „glos­sy“, ein hoch­qua­li­ta­ti­ver, ver­lust­be­haf­te­ter Opti­mie­rungs­al­go­rith­mus, der vor allem für Foto­gra­fen geeig­net ist.

Für das Plug­in benö­tigst du eine API, die du nach der Plug­in-Instal­la­ti­on direkt aus dem Backend bean­tra­gen kannst. Zusätz­lich kannst du mit Short­Pi­xel gro­ße Bil­der auf eine defi­nier­te Pixel­grö­ße ver­klei­nern, auch PDFs kom­pri­mie­ren, dei­ne Ori­gi­nal­bil­der in einem sepa­ra­ten Ord­ner sichern und sogar WP Smush erstellen.

Mein Test:
Ich habe für die Kom­pri­mie­rung „glos­sy“ gewählt, dabei wird das Bild um 43,58 Pro­zent kom­pri­miert, eine sehr gute Rate. Die Qua­li­tät lei­det dar­un­ter nicht, in der Ver­gleichs­an­sicht „Ori­gi­nal“ und „opti­mier­te Datei“ kann ich das überprüfen.

Bei der los­sy-Opti­mie­rung beträgt die Kom­pri­mie­rungs­ra­te sogar 63,9 Pro­zent, beim Bild­ver­gleich fällt mir so gut wie kein Unter­schied zum Ori­gi­nal auf. Das kann aller­dings von Foto zu Foto variieren.

Damit belegt Short­Pi­xel Platz 2 in mei­ner Liste.

Fazit

Mit einem guten Bild­kom­pri­mie­rungs­plug­in für Word­Press kannst du dir die manu­el­le Bild­da­tei-Ver­klei­ne­rung erspa­ren. Um die Lade­zeit dei­nes Blogs bzw. dei­ner Web­site so gut wie mög­lich zu ver­rin­gern, soll­test du die Bild­op­ti­mie­rung kom­plett ausschöpfen.

Auch wenn du ein Bild­kom­pri­mie­rungs­plug­in ver­wen­dest, soll­test du den von mir am Arti­kel­an­fang ers­ten Schritt nicht aus­las­sen. Pas­se dein ver­wen­de­tes Bild an die erfor­der­li­che Pixel­grö­ße an und spei­che­re es in einer gerin­gen Auf­lö­sung. Dann kannst du aus dei­ner Bild­op­ti­mie­rung noch mehr rausholen.

Für wel­ches Bild­kom­pri­mie­rungs­plug­in du dich ent­schei­dest, wird auch davon abhän­gen, wie vie­le Bil­der du monat­lich in dei­ne Media­thek hoch­lädst und wie vie­le nach­träg­lich opti­miert wer­den müssen.

Benö­tigst du nur weni­ge Bil­der, dann dürf­test du mit der Free-Ver­si­on von Short­Pi­xel oder Ima­gi­fy gut zurechtkommen.

Pro­du­zierst du regel­mä­ßig Bei­trä­ge mit vie­len Gra­fi­ken und Fotos, dann kann sich die Pro-Ver­si­on von Short­Pi­xel loh­nen: 5000 Bil­der pro Monat kos­ten $4,99, 12 000 Bil­der $9,99. Und bei mei­nem Kom­pri­mie­rungs­test hat die­ses Plug­in sehr gut abge­schnit­ten. Eine wei­te­re Opti­on für Viel­pro­du­zie­rer wäre WP Smush Pro für $49 pro Monat. Die kos­ten­lo­se Ver­si­on von Smush hat mich aller­dings nicht überzeugt.

Die kos­ten­lo­sen Ver­sio­nen der hier vor­ge­stell­ten Plug­ins haben alle ihre Schwach­stel­len (Mega­byte-Beschrän­kun­gen und Bild­kon­tin­gen­te). Ich habe mich nach dem Test für die Free-Ver­si­on von Ima­gi­fy ent­schie­den, die in mei­nen Tests am bes­ten abschnitt. Soll­te mein Kon­tin­gent von 25 MB im Monat über­schrit­ten wer­den, kom­pri­mie­re ich im zwei­ten Schritt über das Online-Tool Tinypng​.com.

Tei­le die­sen Beitrag:


WordPress Cookie Hinweis von Real Cookie Banner