„WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.“ – Wikipedia
As the WebP is not widely supported, you need to use polyfills or workarounds to actually use it. But it makes a lot of sense when you are building image heavy applications for the web. It decreases file-sizes immensely and supports transparency as PNG does.
To allow WebP upload in WordPress, add this to your functions.php:
1 2 3 4 5 6 7 8 9 10 11 |
add_filter('upload_mimes','webp_mime_type'); function webp_mime_type($mimes){ return array_merge($mimes,array ( 'webp' => 'image/webp' )); } |
Browsers with native support will show WebP images natively, for browsers without support deploy WebPJS developed by Google. Download and add it to your theme functions.php
1 2 3 4 5 6 7 8 9 |
function webp_script() { // Loads JavaScript file for webp image support in all browsers wp_enqueue_script( 'webpjs-script', get_template_directory_uri() . '/js/webpjs-0.0.2.min.js'); } add_action( 'wp_enqueue_scripts', 'webp_script' ); |
This should do the trick and enable WebP for all modern browsers, see browser support on the WebPJS development page.
Here another little nice trick to check for WebP using Javascript and replace webp with png images.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
window.testWebP = function(callback) { var webP = new Image(); webP.onload = webP.onerror = function () { callback(webP.height == 2); }; webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; }; window.testWebP(function(support) { if(!support){ $('img[src$=".webp"]').each(function(index,element) { element.src = element.src.replace('.webp','.png'); }); } }); |
Enjoy
Alex
Ich bin ein Full-Stack-Entwickler. Meine Expertise umfasst:
Ich liebe die Entwicklung, das Design und kenne mich auch mit Serverarchitekturen aus. Ich würde mich nie vollständig fühlen, wenn einer der Bereiche fehlen würde.
Ich habe ein breites Interessengebiet, deshalb tauche ich ständig in neue Technologien ein und erweitere mein Wissen, wo immer es nötig ist. Die Technologien entwickeln sich schnell und ich genieße es, die neuesten Technologien zu nutzen.
Abgesehen davon bin ich ein friedliebender Kerl, der versucht, Leute um sich herum zu haben, die dasselbe denken. Ich glaube wirklich an das Prinzip: "Wenn man jemandem hilft, wird einem jemand helfen, wenn man es braucht."