Skip to content

Cómo implementar imágenes WebP en un sitio web

La finalidad de esta implementación es hacer que el sitio web cargue con mayor velocidad y mejorar el SEO de nuestro sitio.
Voy a intentar hacer un recorrido lo más detallado y abarcativo del tema. Si ves que hay algo que omito te invito a comentarlo.

¿Qué vamos a ver?

  1. ¿Qué es WebP?
  2. Soporte y compatibilidad
  3. Cómo convertir imágenes a WebP
  4. Implementando WebP en Html
  5. Implementando webP en imágenes de CSS
  6. WebP en HTML y CSS: todo junto y automático mediante .htaccess
  7. WebP en Woprdpress

Ahora si. Comencemos con lo básico…

¿Qué es WebP?

WebP <!– pronunciamos weppy –> es un formato de imagen desarrollado por Google allá por el año 2010. Usa un algoritmo de compresión más agresivo y mejor optimizado que JPG, PNG y GIF por lo que consigue reducir el tamaño (entre 25% y un 35%) de los archivos con la misma calidad que los anteriores y eso se traduce en páginas web mucho más rápidas.

Recordá que la velocidad de carga de tu web es muy importante por dos motivos:
1. Evitar rebotes de visitantes en tu sitio, ya que parte de la tasa de abandono puede estar relacionada con la lentitud, y
2. Hacer feliz a Google y mejorar tu posición en el buscador: SEO

Además WebP logra incluir características de los tres formatos conocidos en uno solo, canal Alfa (transparencia) + Animación:

 WebPPNGJPGGIF
Compresión con pérdida
Compresión sin pérdida
Transparencia
Animación

Soporte y compatibilidad con WebP

A pesar de que WebP ya tiene casi 10 años aún sigue sin ser un formato que pueda reemplazar a JPG o PNG ya que no todos los navegadores web lo soportan, ya que en los navegadores que no se admite este formato de archivo la imagen aparecerá rota.

Esto en los últimos años ha estado cambiando y más del 70% de los navegadores son compatibles.
Hoy, enero de 2020, WebP es soportado por Google Chrome (desktop y mobile), FirefoxOpera Edge; quedando excluído aún <!– no creo que Safari por mucho tiempo más –> solo Internet Explorer Safari, pero como veremos luego, esto no es una limitante para implementarlo, aunque deberemos hacerlo asegurando que, si el navegador no es compatible, muestre su equivalente JPG o PNG.

¿Cómo convertir imágenes a WebP?

Esta pregunta tiene muchas respuestas ya que estos se puede hacer, entre otras, de las siguientes maneras:

1) Usando una aplicación como XnConvert

XnConvert es gratuita y está disponible para Linux, OS X y Windows.
En la pestaña entrada seleccionamos todas las imágenes que queremos convertir y en salida simplemente seleccionamos el formato WebP. Por defecto la calidad es del 80%. En ajustes podemos modificarlo.

2) A través de la consola

cwebp es la herramienta de línea de comandos más utilizada y está disponible en froma gratuita para Windows, Mac o Linux precompiladausando Git o un gestor de paquetes tales como Chocolatey (Windows) o HomeBrew (Mac).
Una vez que la instalemos podremos convertir imágenes, pasándole parámetros de calidad [quality], la imagen origen [input_file] e imagen destino [output_file] de la siguiente manera:

# cwebp -q [quality] [input_file] -o [output_file]

cwebp -q 75 imagen.png -o imagen.webp

3) Si usas node.js

imagemin , y su complemento imagemin-webp es la biblioteca más popular para hacerlo.

ya instalada la biblioteca podés crearte un script como el siguiente que convierta todas las imágenes PNG y JPG de una determinada carpeta a WebP:

/* convert-to-webp.js */

const imagemin = require("imagemin");
const webp = require("imagemin-webp");

imagemin(["*.png", "*.jpg"], "images", {
  use: [
    webp({ quality: 75})
  ]
});

Luego podés usar el script a través de la línea de comandos o compilando previamente.

node convert-to-webp.js

4) Si tenés el prototipo en Sketch

Podés exportarlo directamente en este formato:

5) ¿Photoshop? Veamos cómo hacemos…

Estamos en 2020 y Adobe aún no incluye este formato en sus aplicaciones. Sin embargo podemos resolver esto instalando un plugin en Photoshop, el cual nos va a permitir editar y guardar imágenes en formato Webp.

AdobeWebM plugin: lo probé y funciona genial, respetando incluso el canal alpha de la imagen, dado que algunos no lo hacen.

Descargalo acá: Mac | Win

Para instalarlo simplemente copien el archivo WebP.plugin dentro de la carpeta Plugins de Photoshop y reinicien la aplicación:

Implementando WebP en html

Para poder asegurarnos que si el navegador es compatible muestre la imagen WebP, y sino muestre su JPG o PNG correspondiente, debemos usar el elemento  <picture> de HTML5 que no da la posibilidad de definir múltiples fuentes para la misma imagen.

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

Para brindar una fuente alternativa usamos <source> dentro del elemento <picture>.
 <source>tiene una serie de atributos que podemos usar para definir la imagen y cuándo debe mostrarse ésta:

  • type: El tipo MIME de la imagen: image/jpeg, image/png, image/gif e image/webp.
  • srcset: La ruta al archivo de imagen

Además de las distintas fuentes, también brindamos el elemento<img> de siempre destinado a los navegadores que no admitan las etiquetas <source> del elemento <picture>, asegurándonos así que también se muestre la imagen en Safari e Internet Explorer.

Implementando WebP en imágenes de CSS

La situación se pone un poco más complicada en este caso. CSS no tiene una solución integrada para resolverlo.
Pero aprovechando las bondades de Modernizr, que es una popular biblioteca en javascript que detecta las funciones disponibles en los distintos navegadores podremos resolverlo.
Si sabemos que nuestro navegador soporta ciertas capacidades de CSS3 o de HTML5, vamos a poder usarlas sin problemas. De lo contrario, si no es compatible alguna funcionalidad, tendremos la posibilidad de brindar una solución alternativa para ese navegador.
El soporte de WebP es una de esas detecciones que hace Modernizer. Aún mejor, podemos compilarlo de manera personalizada con sólo esa característica en https://modernizr.com/download, y así evitar aumentar el peso de nuestro sitio <!– que es justamente lo que queremos mejorar implementando WebP –>.

¿Cómo funciona Modernizr con WebP?

Cuando incluimos el script en nuestro sitio automáticamente se agregará una de dos clases alternativas: .webp o .no-webp.
La primera que hace referencia a que el navegador es compatible con Webp, y la segunda que no lo es. Esto se agrega automáticamente tanto a la clase del elemento en el HTML (que en su css hace referencia a una imagen), como a su clase dentro del código css propiamente dicho:

.webp .elemento-con-imagen{
  background-image: url("image.webp");
}
.no-webp .elemento-con-imagen {
  background-image: url("image.jpg");
}

Así, por clases de CSS, los usuarios con un navegador compatible accederán a la imagen WebP, y el resto accederá a la JPG / PNG.

Hasta ahora todo genial, pero Modernizr es javascript.
¿Y si el navegador del usuario no tiene javascript habilitado?
No se preocupen. Para evitar esto, comenzaremos agregando una clase de no-jsa la etiqueta <html>:

<html class="no-js">

Luego, agregaremos el siguiente código javascript <!– antes que cualquier otro –>:

<script>
  document.documentElement.classList.remove("no-js");
</script>

Y por último simplemente agregamos una tercer clase en nuestro CSS:

.no-js .elemento-con-imagen {
  background-image: url("image.jpg");
}

Ahora sí, ¿Cómo funciona esto? Cuando JavaScript esté desactivado, este pequeño script <!– que lo que hace es eliminar la clase no-js del elemento html –> no va a ejecutarse, por lo que la clase no-js quedará en el elemento y las clases de los elementos de la página serán los .no-js.
En nuestro ejemplo «.no-js .elemento-con-imagen«, que está definida con imágenes JPG y PNG.

WebP en HTML y CSS: todo junto y automático mediante .htaccess

Si usas Apache, una solución cómoda puede ser seguir trabajando el HTML y CSS con el código y los formatos habituales, y activar una regla en el servidor, subiendo el archivo .htaccess con el siguiente script:

< IfModule mod_setenvif.c>
   # Variar: Aceptar todas las solicitudes para jpeg y png 
  SetEnvIf Request_URI " \. (Jpe? G | png) $ " REQUEST_image
</ IfModule >

< IfModule mod_rewrite.c>
   RewriteEngine On

  # Compruebe si el navegador admite imágenes WebP 
  RewriteCond  % {HTTP_ACCEPT}  image / webp

  # Compruebe si existe la imagen de reemplazo de WebP 
  RewriteCond  % {DOCUMENT_ROOT} /$1.webp  -f

  # Servir imagen WebP en 
  su  lugar RewriteRule (. +) \. (Jpe? G | png) $  $ 1.webp  [T = image / webp] 
</ IfModule >

< IfModule mod_headers.c>
   Encabezado adjuntar Variar Aceptar env = REQUEST_image
</ IfModule >

< IfModule mod_mime.c>
   AddType image / webp .webp
</ IfModule >

Este fragmento de código detecta si el navegador admite imágenes WebP, y si es así, en lugar de servir JPG / PNG muestra este formato, siempre y cuando exista un .webp disponible con el mismo nombre y en la misma ubicación que el jpg / png a reemplazar.

WebP en WordPress

Lo primero que tendremos que hacer es modificar WordPress para que admita el formato WebP ya que a enero de 2020, la última versión<!– 5.3.2 –> aún no da soporte.

Para hacerlo deberíamos modificar el archivo .htaccess con nuevas reglas y modificar el archivo functions.php para habilitar el formato webP.
Pero puede ser más fácil gracias al plugin Webp Express. <!– hay varios plugins para esto, yo probe algunos pero el único que funcionó con mi versión de WordPress 5.3.2 es éste –>


Sólo tendremos que instalarlo <!– podés descargarlo y subirlo para instalar, o bien instalarlo desde wordpress buscando dentro de los plugins –> y este plugin realizará todas las modificaciones necesarias dentro de WordPress que podamos subir archivos WebP y además mostrará la versión JPG/PNG en el caso de que el navegador no sea compatible.

Una vez instalado sólo tendrás que entrar a la configuración del plugin, presionar Bulk convert para convertir todas las imágenes a WebP y guardar. Si no funciona marcá el check «Alter HTML«.

Esto es todo. Seguramente en poco tiempo más mucho de esto ya no será necesario y simplemente usemos WebP y nos olvidemos de los formatos JPG, PNG, y GIF para la web.
Esperemos que Safari se sume al equipo lo más pronto posible! 🙂 <!– Sé que ya se están haciendo testeos de weppy en Safari –>

¡Gracias por leer! 
Si te gustó y te sirvió este artículo podés seguirme en las redes.
También te invito a comentar lo que quieras!

Hacé el primer comentario!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *