{"id":3652,"date":"2013-04-28T08:12:12","date_gmt":"2013-04-28T07:12:12","guid":{"rendered":"https:\/\/www.kolja-engelmann.de\/blog\/?p=3652"},"modified":"2013-04-28T11:20:50","modified_gmt":"2013-04-28T10:20:50","slug":"alle-wordpress-bilder-in-das-webp-format-konvertieren","status":"publish","type":"post","link":"https:\/\/www.kolja-engelmann.de\/blog\/2013\/04\/alle-wordpress-bilder-in-das-webp-format-konvertieren\/","title":{"rendered":"Alle WordPress Bilder in das WebP Format konvertieren"},"content":{"rendered":"

Nachdem ich gestern bei Sergej M\u00fcller<\/a> las, dass sein fantastisches Optimus Plugin<\/a> (\u00fcber das ich hier<\/a> schon einmal schrieb) jetzt auf Wunsch auch alle neu hochgeladenen Bilder zus\u00e4tzlich in das freie (und hoffentlich bald jpeg ersetzende) WebP Format \u00fcberf\u00fchrt, wollte ich das f\u00fcr mein Blog auch umsetzen.<\/p>\n

Zun\u00e4chst ben\u00f6tigt man nat\u00fcrlich das Plugin selbst. Das Feature ist nur in der HQ (also kostenpflichtigen) Variante verf\u00fcgbar, die Investition hat sich aber bereits mehr als gelohnt und kann ich jedem WordPress-Blogger nur empfehlen. In den Settings schaltet man nun die zus\u00e4tzliche Generierung der WebP-Dateien ein.<\/p>\n

\"Optimus<\/a><\/p>\n

Da WebP momentan jedoch noch nicht von allen Browsern unterst\u00fctzt wird, muss eine Fallunterscheidung getroffen werden, welche Version des Bildes an den Client zu liefern ist. Dies macht man mit einem kleinen .htaccess<\/code> Snippet, welches jedem Browser, der WebP bereits unterst\u00fctzt, anstelle einer .jpeg<\/code> oder .png<\/code> Datei das neue .webp<\/code> Format ausliefert, falls dieses bereits auf dem Server liegt.<\/p>\n

<IfModule mod_rewrite.c>\r\n\tRewriteEngine On\r\n\tRewriteCond %{HTTP_USER_AGENT} !(Chrome\\\/[0-8]|Android\\s[0-3])\\.\r\n\tRewriteCond %{HTTP_USER_AGENT} Chrome [OR]\r\n\tRewriteCond %{HTTP_ACCEPT} image\/webp\r\n\t# Hier nach %{DOCUMENT_ROOT} ggf. noch den Unterordner angeben in dem das Blog installiert wurde.\r\n\tRewriteCond %{DOCUMENT_ROOT}\/$1.webp -f\r\n\tRewriteRule ^(wp-content\/uploads.+)\\.(jpe?g|png)$ $1.webp [L,T=image\/webp] <\/IfModule><\/pre>\n
Alle Bilder einer bestehenden WordPress Installation in das Webp Format konvertieren<\/h3>\n
Da ich nat\u00fcrlich die Vorz\u00fcge dieses Formates sofort nutzen wollte, mussten nat\u00fcrlich auch alle bereits bestehenden Bilder konvertiert werden. Hierzu l\u00e4d man sich das gesamte wp-content\\uploads Verzeichnis des Blogs via FTP auf den eigenen PC herunter.<\/p>\n
Nun ben\u00f6tigt man einen Konverter, der die eigenen Bilder konvertiert. Das schnellste Ergebnis erzielte ich mit XNConvert<\/a>, in das ich meinen uploads<\/code>-Ordner einlas, ein neues Ausgabeverzeichnis angab und das Zielformat auf WebP festlegte. Klick – fertig – verwaschene Bilder. Kein mir bekannter Konverter beherrscht die lossless<\/code>-Option von WebP. Gerade die ist jedoch das was wir wollen, da man nicht alle bereits komprimierten Dateien einfach nochmal verlustbehaftet komprimieren sollte. Das Ergebnis kann nur schlechter sein als das, was wir als Ausgangsmaterial hingesteckt haben.<\/p>\n
Also ben\u00f6tigen wir die Precompiled WebP utilities and library<\/a>\u00a0von Google. In der .zip<\/code> Datei findet sich der Konverter cwebp.exe<\/code>, den man benutzt, um alle .jpeg<\/code>, .jpg<\/code> und .png<\/code> nun verlustfrei konvertieren zu k\u00f6nnen. Das Kommandozeilenprogramm beherrscht eine Vielzahl an Optionen, die Ihr euch gern hier<\/a> durchlesen k\u00f6nnt. Wir ben\u00f6tigen nur die Befehlszeile\u00a0cwebp.exe -lossless <eingabedatei> -o <ausgabedatei><\/code> und ein Batchskript, das alle gew\u00fcnschten Bildformate in allen Unterordnern von .\/uploads\/<\/code> sucht und diese in einem neuen Ordner mit gleicher Ordnerstruktur ablegt.<\/p>\n
Ganz ehrlich, ich war kurz davor die paar Zeilen in ein C# Programm zu hacken, damit ich mich nicht mehr mit der Batchprogrammierung herumschlagen muss. Folglich sind die n\u00e4chsten Zeilen Code vermutlich schrecklich, aber sie machen genau was sie sollen und ich mag sie ungern jemals wieder anfassen \ud83d\ude42<\/p>\n
Ihr m\u00fcsst nat\u00fcrlich die Zeilen 2-4 an eure Bed\u00fcrfnisse anpassen. Achtet bei outdir<\/code> unbedingt auf den abschlie\u00dfenden Backslash „\\“ und bringt ein wenig Zeit mit, je nachdem wie gro\u00df euer Blog ist und wie viele Bilder ihr bereits habt. Au\u00dferdem solltet ihr euch meiner Meinung nach bei der lossless-Rekomprimierung auf .png<\/code> Dateien beschr\u00e4nken. In meinen Versuchen wurden .jpg<\/code> Dateien n\u00e4mlich allesamt gr\u00f6\u00dfer als vorher und das ist ja nicht Zweck der \u00dcbung \ud83d\ude09 Passt hierzu einfach Zeile 11 an.<\/p>\n
@echo off\r\nset indir=C:\\Users\\<username>\\Desktop\\uploads\r\nset outdir=C:\\Users\\<username>\\Desktop\\uploads_out\\\r\nset cwebpdir=C:\\Users\\<username>\\Desktop\\libwebp-0.3.0-windows-x86\\cwebp.exe\r\n\r\nif not exist %outdir% mkdir %outdir%\r\n\r\nXCOPY %indir% %outdir% \/t \/e\r\nSETLOCAL ENABLEDELAYEDEXPANSION\r\ncd %indir%\r\nfor %%G in (.png, .jpeg, .jpg) do (\r\n\tfor \/f %%A in ('forfiles \/s \/m *%%G \/c \"cmd \/c echo @relpath\"') do (\t\r\n\t\tset newfile=%%~A:\r\n\t\tset newfile=!newfile:%%G:=.webp!\r\n\t\t%cwebpdir% -lossless %%~A -o %outdir%!newfile!\t\t \r\n\t)\r\n)\r\nENDLOCAL<\/pre>\n
Abschlie\u00dfend ladet ihr den Inhalt des Ausgabeordners einfach via FTP wieder hoch. Fortan liefert der Apache dank des oben genannten .htaccess<\/code> Snippets alle Bilder brav als .WebP<\/code> aus, spart so Traffic und l\u00e4sst eure Webseite schneller laden, was nicht nur eure Besucher, sondern auch Google toll findet.<\/p>\n
Falls ihr einen besseren Weg kennt, egal ob Konverter oder Skript, so bin ich f\u00fcr jede Anregung offen.<\/p>","protected":false},"excerpt":{"rendered":"
Nachdem ich gestern bei Sergej M\u00fcller las, dass sein fantastisches Optimus Plugin (\u00fcber das ich hier schon einmal schrieb) jetzt auf Wunsch auch alle neu hochgeladenen Bilder zus\u00e4tzlich in das freie (und hoffentlich bald jpeg...<\/p>\n","protected":false},"author":1,"featured_media":3654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,10],"tags":[161,13,106],"class_list":["post-3652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apache","category-tools","tag-apache","tag-htaccess","tag-webp"],"jetpack_featured_media_url":"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2013\/04\/webp-logo.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/3652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/comments?post=3652"}],"version-history":[{"count":0,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/3652\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media\/3654"}],"wp:attachment":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media?parent=3652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/categories?post=3652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/tags?post=3652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}