Usando imágenes WebP


En los últimos años, el peso de las páginas se ha ido incrementando progresivamente. Según las últimas estadísticas de HTTP Archive, el 63% de los datos que se descarga un usuario de un sitio web corresponde a imágenes.

Intentamos optimizar nuestros archivos css o js, uniendo, minificando, arañando bytes de un lado y del otro, sin percatarnos que es mucho más eficiente de cara al rendimiento, la reducción del peso de las imágenes y es ahí donde deberíamos centrar un poco más los esfuerzos.

Ahora, además de herramientas como JPEGmini, ImageOptim o ImageAlpha tenemos un nuevo formato: WebP.

Usando imagenes webp

Qué es WebP?

WebP es un nuevo formato de imagen para web que incluye compresión con y sin perdidas además de un canal alpha de 8-bits para transparencias. Podríamos decir que es una especie de “todo en uno” que reune todas las características incluidas en los formatos actuales GIF, PNG y JPG.

Llega de la mano de Google, cuyos ingenieros, cuando estaban trabajando en un formato de compresión para vídeo (WebM), se dieron cuenta que la misma tecnología se podría aplicar a las imágenes.

Atendiendo a los datos del propio Google, las imágenes sin perdidas WebP son un 26% más ligeras en peso que un PNG. Comparado con un JPG, la misma imagen como WebP con perdidas puede reducir su peso entre un 25% y un 34%.

Su principal “problema” es que el soporte actual solo incluye a Chrome, Opera y los navegadores de dispositivos Android. A pesar de eso, si consultamos Can I use, estos navegadores suponen ya el 61% del acceso actual (mayo 2015).

Es una lástima que Firefox no soporte este tipo de imágenes. La negativa parece estar motivada porque Mozilla está trabajando en su propio “encoder” para reducir el tamaño de los JPG : mozjpeg.

Comparativa

JPG vs. WebP

En las pruebas que he realizado, el porcentaje de reducción del tamaño del archivo es incluso mayor de lo que dice Google, sin apenas perdida de detalle en las imágenes WebP.

jpg_vs_webp

Aquí conviene resaltar que el algoritmo de compresión es distinto y no se pueden igualar las calidades, no es lo mismo un “80” de calidad en un JPG que en WebP. Este detalle nos obliga a hacer un trabajo individual por cada imagen y experimentar con diferentes valores dependiendo del tipo de contenido.

PNG(alpha) vs. WebP

pngalpha_vs_webp

Cuando usamos imágenes sin perdidas y con canal alpha, la reducción del tamaño no es tan significativa como en las imágenes con perdida, pero aun así, lo importante es que estaríamos disminuyendo la carga de datos del futuro usuario.

Cómo crear imágenes WebP?

1) Aplicaciones:

Actualmente contamos con diferentes aplicaciones que pueden exportar a WebP.

Existe también un convertidor online.

2) Plugin para Photoshop

Es el que uso habitualmente para convertir a formato WebP.

webp_photoshop_plugin

Dependiendo del tipo de imagen, podremos guardar con o sin perdidas. Lo que si es recomendable es no marcar la casilla que guarda los metadatos.

Descargar plugin

3) Grunt

Si el volumen de imágenes que necesitamos convertir es muy grande, lo mejor es usar un “task runner” de Javascript para que se encargue de hacer el trabajo de conversión por nosotros.

Yo uso Grunt, pero si prefieres Gulp también existe un plugin para convertir a WebP: gulp-webp.

Necesitas ayuda con Grunt? Echa un vistazo a esto: Primeros pasos con Grunt para diseñadores web

1) Instalamos cwebp-bin.


npm install --save cwebp-bin

2) Instalamos grunt-webp.


npm install grunt-webp --save-dev

3) Configuramos nuestro Gruntfile.js


module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    webp: {
        files: {
          expand: true,
          cwd: 'img/',
          src: ['*.jpg','*.png'],
          dest: 'img/'
        },
    },
  });
  grunt.loadNpmTasks('grunt-webp');
  grunt.registerTask('default', 'webp');

};

Esta es la configuración predeterminada, pero se pueden personalizar las opciones consultando la documentación del plugin. En este ejemplo estariamos convirtiendo a WebP todas las imágenes JPG/PNG de la carpeta img y quedarían guardadas en la misma carpeta.

4) Ejecutamos grunt webp

Usando WebP en un proyecto

Para incluir imágenes WebP podemos usar diferentes técnicas:

1) .htaccess

Si tenemos acceso para modificar el archivo .htaccess, con añadir este código, los navegadores que soporten imágenes WebP usarán este formato siempre y cuando el archivo se encuentre al mismo nivel.


<ifmodule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTP_ACCEPT} image/webp
 RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
 RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</ifmodule>
<ifmodule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</ifmodule>
AddType image/webp .webp

De esta manera, no tenemos que modificar nada de nuestras páginas, tan solo subir las versiones WebP a la misma carpeta donde estén los archivos JPG/PNG.

2) Modernizr

Usando Modernizr podemos mostrar archivos webP a los navegadores que lo soportan mientras que al resto se le mostrará la versión JPG/PNG.

El código para cada imagen sería:


<img src="img/imagen.webp" alt="Imagen" data-src="img/imagen.jpg" />

En este caso tendremos que añadir a todas la imágenes el atributo data-src con el valor de la ruta a la versión JPG/PNG.

Luego usamos el siguiente código:


window.onload  = function () {
  var i, images, soportaWebp;
  soportaWebp = Modernizr.webp;
   if (!soportaWebp) {
     images = document.getElementsByTagName('img');
      for(var i = 0, len = images.length; i < len; i++) {
        if (images[i].hasAttribute('data-src')) {
          images[i].src = images[i].getAttribute('data-src');
        }
      }
   }
}

Puedes ver un ejemplo en CodePen

Hasta que Modernizr 3 sea oficial, tenemos que usar una versión 2 personalizada añadiendo el soporte para img-webp desde la opción “Non core detects”.

3) <picture>

Con el elemento <picture> podemos usar también imágenes WebP.


<picture>
  <source srcset=“img/imagen.webp" type="image/webp">
  <img src=“img/imagen.jpg" alt="Imagen">
</picture>

Puedes ver un ejemplo en CodePen

Por último, si usas WordPress, al intentar subir un archivo WebP a la biblioteca de medios no te dejará,  te saldrá un error junto a un aviso de seguridad. Añade este código a tu archivo functions.php para añadir el mime-type y poder subir archivos WebP sin problemas.


add_filter('upload_mimes','webp_mime_type');

 function webp_mime_type($mimes){
   return array_merge($mimes, array(
     'webp' => 'image/webp'
   )); 
 }

Conclusiones

WebP está siendo utilizado ya por empresas como Facebook, Ebay, Netflix y por supuesto, el propio Google ¿no has visto lo rápido que cargan las miniaturas de los vídeos en la página de Youtube?

Creo que ha llegado el momento de dar una oportunidad a este nuevo formato para empezar a reducir un poco más el peso de las páginas y el tiempo de carga… 6 de cada 10 usuarios te lo agradecerán.