Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Bilder automatisch in Base64 umwandeln

Bilder automatisch in Base64 umwandeln

Base64 in WordPress

Vor kurzem hatte ich euch in einem etwas längeren Artikel bereits erklärt was Base64 ist, wann es hier und da Sinn macht es zu nutzen, was es für die Performance bringt und wie es eingesetzt werden sollte. Innerhalb von WordPress gibt es noch viele weitere Möglichkeiten Base64 zu nutzen, zum Beispiel mit einer automatischen Umwandlung aller Bilder. Die ist nur temporär, die Originale bleiben also erhalten, doch mit wenig Bildern kann das kleine Snippet eine Menge Performance einbringen. Das wandelt, wie schon erwähnt, vorhandene Bilder direkt in Base64 um, sodass kein extra Bild mehr geladen werden muss, keine Anfrage gesendet wird und somit die Komplexität einzelner Aufrufe sinkt. Weniger Anfragen sind theoretisch immer gut, aber das Thema hatten wir ja schon im Artikel über Base64. Heute geht es darum, dass alle Bilder innerhalb von Beiträgen und auch die Thumbnails in Base64 konvertiert werden, um so die Performance zu verbessern. Vollautomatisch versteht sich, denn sonst würde das Ganze wieder in Arbeit ausarten. Natürlich lässt sich das Snippet auch schnell wieder deaktivieren und alles ist wie gehabt.

Folgendes in die Functions.php eures Themes eintragen:

class base64_encode_images{ function parse($content = ''){ return preg_replace_callback( '|<img(.*)src=["\'](.*?)["\'](.*)/>|i', create_function( '$matches', 'return "<img$matches[1]src=\'".(base64_encode_images::fetchurl($matches[2]))."\'$matches[3]/>";' ), $content ); } public function fetchurl($url = null, $ttl = 86400){ if($url){ $option_name = 'base64_encode_images_'.md5($url); $data = get_option($option_name); if(isset($data['cached_at']) && (time() - $data['cached_at'] <= $ttl)){}else{ $ch = curl_init(); $options = array( CURLOPT_URL => $url, CURLOPT_RETURNTRANSFER => true, CURLOPT_CONNECTTIMEOUT => 10, CURLOPT_TIMEOUT => 10 ); curl_setopt_array($ch, $options); $data['chunk'] = @base64_encode(curl_exec($ch)); $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); $data['mime'] = curl_getinfo($ch, CURLINFO_CONTENT_TYPE); curl_close($ch); if($http_code === 200){ $data['cached_at'] = time(); update_option($option_name, $data); } } } return 'data:'.$data['mime'].';base64,'.$data['chunk']; } }
 
add_filter('the_content', array('base64_encode_images','parse'));
add_filter('post_thumbnail_html', array('base64_encode_images','parse'));

Base64 kann Nitro und Bremse sein

Das Snippet für WordPress wandelt nun alle Bilder automatisch in Base64 um. Das kann nützlich sein, kann sich aber auch als Performance-Bremse erweisen, denn Base64 generiert eine Menge Code und somit sinken zwar die Requests, gleichzeitig wird der HTML-Code aber immer größer und braucht somit auch länger zum laden. All das hatte ich im oben verlinkten Artikel zum Thema Base64 noch genauer ausgeführt. Base64 ist eine gelungene Möglichkeit die Performance spürbar zu verbessern, falsch eingesetzt kann die Performance innerhalb von WordPress aber auch massiv leiden. Es gilt wie immer eine saubere Balance zu finden und somit ist das Snippet nicht pauschal eine Empfehlung. Es ist eine Möglichkeit, die richtig eingesetzt eine Menge bringen kann. Falsch eingesetzt, etwa auf Blogs mit vielen großen Bildern, wird Base64 aber eher als Bremse, nicht als Nitro funktionieren. Probiert es einfach mal aus. Die Änderungen sind nicht permanent und das Löschen des Snippets macht alles wieder rückgängig und wie gehabt. Auch nicht vergessen: Base64 wird von Google nicht indexiert. Das stört die Meisten nicht großartig, wer aber auf die Google Bildersuche angewiesen ist, verzichtet lieber auf das Snippet.



Wordpress Performance eBook