Usar imágenes WebP en WordPress

[ 27 abril 2021 ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

funcionalidad imagen

Una de las optimizaciones básicas de todo sitio web tiene que ver con el tamaño de las imágenes, WebP es un formato moderno para las imágenes, alternativo a .jpg, .png y que permite reducir el tamaño hasta un 30% sin pérdida apreciable de calidad.

Generalidades

El formato WebP es un formato de imagen desarrollado por Google, en un estudio de compresión de imágenes llevado a cabo por Google se concluyó que .webp tiene una reducción mayor que los formatos .jpg y .png sin pérdida notable de la calidad, debido a esto se esta popularizando su uso para optimizar la carga de sitios web.

WordPress y Webp

A la fecha actual, WordPress aún no soporta por defecto el formato .webp, si tratamos de subir una imagen .webp a WordPress aparecerá un mensaje similar a lo que se muestra en la siguiente imagen:

Habilitar el formato .webp en WordPress

Existen diferentes plugins que te permiten habilitar el formato webp en un sitio web WordPress, sin embargo en este artículo veremos cómo realizarlo a través de código.

En un artículo anterior habíamos visto cómo habilitar el formato .svg en WordPress, el código es similar para habilitar el formato .webp y futuros formatos que puedan aparecer.

function dmc_add_webp_mime_types( $mimes ) {
	$mimes['webp'] = 'image/webp';
	return $mimes;
}
add_filter('mime_types', 'dmc_add_webp_mime_types');

Soporte en Navegadores

Hoy en día las versiones actuales de los principales navegadores, tanto para versiones de escritorio y para móvil ya soportan .webp.

Sin embargo si tienes imágenes específicas en .webp que quieres usar en versiones antiguas de los navegadores, tendrías que cargar también la imagen en un formato .jpg o .png, por ejemplo con el siguiente código:

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

Conclusión

Como has podido comprobar, actualmente WordPress no soporta aún WebP, sin embargo es suficientemente flexible como para agregar el soporte a este nuevo formato a través de código.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Valora este artículo : (5 votos, promedio: 4,40 de 5)

Cargando...