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
Artículos Relacionados
(5 votos, promedio: 4,40 de 5)
Cargando...
Gracias!!! Muy buen dato!!! (para los que consideramos que “Menos (plugins) es Más”!!!
Aun no me sube, que crees que pueda ser?
Tal vez tengas algún conflicto con algún plugin o con el theme, prueba ir desactivando plugins y verifica.
Hola, soy nuevo configurando páginas. Quiero subir estás imágenes sin plugin, uso el menú de WordPress. Dónde puedo añadir este código o como puedo seguir está instrucción desde este menú? Gracias
Hola, el código se agrega en el archivo functions.php o usando algún plugin de snippets, revisa el video. También puedes revisar: https://decodecms.com/agregar-codigo-a-tu-sitio-sin-usar-functions-php/
Hola
Agregué dicho código a FUNCTIONS y no pasa nada, esta igualito.
Gracias