No he usado el código que muestra el compañero @tuadmin por lo que no tengo idea si funciona, pero he de hacerle una corrección.
carga desde el inicio las imágenes con extención webp
<img src="path/imagen.webp" data-jpg="path/imagen.jpg" />
para que desde el inicio se usen en caso de ser soportada, que sera en la mayoría de los casos.
el javascript le hago este ajuste
Código Javascript
:
Ver originalModernizr.on('webp', function (result) {
if (!result) {
$('.img-webp').each(function () {
this.src = $(this).data('jpg');
});
}
});