El uso de imágenes WebP en WordPress

---

Desde hace ya unos años el formato webp viene con bastante fuerza, presentándose como un estándar en el uso de imágenes para la web, dispuesto a desvancar al formato .jpg y .png por muchas razones que puedes leer aquí en este artículo que escribí presentando el nuevo formato de Google.

Hoy vamos a conocer las opciones que tenemos a la hora de usar este el formato de imagen WebP en WordPress. Con el tiempo WordPress adoptará en su sistema este formato de imagen como otro más, junto a los formatos .jpg y .png, pero mientras tanto debemos hacer uso de ciertos plugins y modificaciones de código que acontinuación vamos a explicar.

Pasos para usar el formato WebP en WordPress

Añade compatibilidad de webP en WordPress

Lo primero es hacer que WordPress reconozca y permita subir archivos webP, para ello hay que añadir algo de código al archivo de configuración de tu servidor para que se permita escribir y re-escribir en archivos webP.

En Apache (.htaccess)


RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]


Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

En NGINX

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}

# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;
}

A continuación hay que permitir a WordPress subir archivos webP, añadiendo un nuevo archivo tipo MIME. Para ello añadiremos el siguiente código a nuestro plugin de personalizaciones o al archivo functions.php del tema activo:

function mi_nuevo_mime_type( $existing_mimes ) {
// añade webp a la lista de mime types
$existing_mimes['webp'] = 'image/webp';
// devuelve el array a la funcion con el nuevo mime type
return $existing_mimes;
}
add_filter( 'mime_types', 'mi_nuevo_mime_type' );

¿Qué hacemos con las imágenes que ya tenemos subidos en el sistema?

Aunque ya tengamos el sistema preparado para aceptar este tipo de archivos a la hora de crear contenido en el sistema, el mejor modo de usar webP en WordPress no es subirlos directamente sino convertir las antiguas y nuevas imágenes JPG y PNG, para así optimizar y facilitar la carga de archivos, que podrás seguir haciendo en tu formato habitual. Para ello haremos uso de varios plugins.

Plugin para convertir imágenes a formato webP

Lo siguiente es instalar un plugin que no solo convierta cada nuevo archivo que subamos a webP, sino que también lo haga con los actuales. Para ello podemos utilizar el plugin gratuito EWWW Image Optimizer, hay otros plugins disponibles, que realizan la misma función como Optimus, elige el que mejor se adapte a tus necesidades.

Con este plugin activo podrás convertir tus imágenes subidas a webP y también podrás hacer conversiones masivas de las imágenes existentes a este formato de imagen, pero nos queda un paso más para terminar de implantar los archivos de imagen WebP en WordPress, ya que actualmente no todos los navegadores cuentan con soporte, así que debemos asegurarnos que el navegador muestra la versión .jpg o .png del archivo .webp en caso de no tener soporte el explorador que el usuario utilice para navegar por internet.

Mostrar imagen en formato WebP o JPG-PNG

Para ello hacemos uso de Cache Enabler, que entre sus ajustes incluye uno para crear una versión de caché específica para que se muestren las imágenes webP a los navegadores compatibles.

Categoría/s: Diseño y desarrollo web Recursos