Imágenes WebP

Todos hemos pasado por eso. Es cuando miras un sitio web con toneladas de imágenes de comida deliciosa o el nuevo aparato que has estado codiciando. Estas imágenes webp son esenciales para que los creadores de contenidos consigan que la gente pase a la acción.

Sin embargo, estas imágenes son muy grandes. Son muy grandes. Con una conexión móvil deficiente, casi puedes ver las imágenes extendidas como una sombra frente a ti. Me recuerda a los viejos tiempos de la conexión telefónica.

Guardar para web en photoshop

Esto es un problema. Al fin y al cabo, las imágenes constituyen la mayor parte de los contenidos que se descargan de un sitio web típico, y por una buena razón. Las imágenes son herramientas expresivas y tienen la capacidad de decir mucho más que el texto. El problema radica en la dificultad de conciliar un contenido visualmente rico con una entrega rápida.

Hay más de una manera de resolver este dilema. Hay muchas tecnologías que pueden agilizar las imágenes desordenadas y ofrecerlas de forma que se ajusten al rendimiento de los dispositivos más exigentes. Estos temas podrían ser objeto de un libro propio, pero en este artículo vamos a ser muy concretos. En este artículo, vamos a ver el formato de imagen WebP de Google y cómo puede utilizarlo para ofrecer imágenes con la misma fidelidad visual que sus imágenes actuales, pero con una fracción del tamaño del archivo. Así que empecemos.

La diferencia de aspecto entre JPEG Y WebP es apenas perceptible, pero la diferencia de tamaño del archivo es bastante significativa. La versión JPEG de la izquierda ocupa 60 KB, mientras que la versión WebP de la derecha ocupa 30 KB, casi un tercio menos. No está mal, sobre todo teniendo en cuenta que la calidad de imagen de ambos es equivalente.

Ahora, el siguiente problema es, naturalmente, «la situación del soporte del navegador». No es tan pequeño como podría pensarse: como WebP es una tecnología de Google, su compatibilidad está reservada a los navegadores basados en Blink. Sin embargo, estos navegadores constituyen una parte importante de los usuarios de todo el mundo, lo que significa que, en el momento de escribir este artículo, casi el 70% de los navegadores en uso son compatibles con WebP. Si existiera la posibilidad de que su sitio web fuera más rápido para más de dos tercios de sus usuarios.

Pero recuerde que WebP no es un sustituto de las imágenes JPEG o PNG; WebP es un formato que puede ofrecerse a los navegadores que pueden utilizarlo, pero es necesario mantener los formatos de imagen más antiguos para otros navegadores. Esta es la naturaleza del desarrollo web. Plan A para los navegadores que pueden usarlo, y Plan B (y quizás Plan C) para los navegadores que no pueden.

Convierte tus imágenes a WebP

Si estás familiarizado con Photoshop, la forma más fácil de aprender sobre WebP es probar el plugin de Photoshop WebP. Una vez que instales el plugin, verás la opción «Guardar como» (¡no «Guardar para la web»!). ), podrá seleccionar «WebP» o «WebP Lossless» en la lista desplegable de formatos.

Piense en la diferencia entre una imagen JPEG y una imagen PNG: JPEG tiene pérdidas y PNG no. Si quiere convertir una imagen JPEG, utilice WebP Normal; si quiere convertir una imagen PNG, utilice WebP Lossless.

Hay dos quejas sobre el plug-in WebP de Photoshop: el plug-in WebP no tiene una interfaz de «Guardar para la web» que le permita previsualizar cómo quedará la imagen con los ajustes elegidos. Si quieres guardar un gran número de imágenes, tienes que procesarlas por lotes. La segunda queja es que si te gusta el procesamiento por lotes en Photoshop, puede que no sea un obstáculo, pero yo soy más bien un codificador y quiero convertir un gran número de imágenes a la vez usando algo como Node. Me gustaría poder hacerlo.

WebP sin photoshop

Si no dispones del photoshop puedes guardar las imágenes en la página web photopea, una fantástica web donde podrás guardar tus imágenes en formato Webp.

¿Por qué utilizar el formato WebP para tus imágenes?

WebP es un formato de imagen versátil que puede utilizarse en lugar de las imágenes PNG y JPEG (si son compatibles). El uso de WebP puede reducir significativamente el tamaño de las imágenes en su sitio web.

¿Hay algún inconveniente? Hay algunos. El mayor inconveniente es que hay que mantener dos conjuntos de imágenes para un soporte óptimo. También tendrás que lidiar con algo de JavaScript cuando uses imágenes WebP con CSS. Además, es posible que los usuarios que guardan las imágenes en el disco no tengan un programa configurado por defecto para mostrar las imágenes WebP.

Sin embargo, con algunos pasos relativamente sencillos, puede mejorar la velocidad de carga de las imágenes WebP y mejorar la experiencia del usuario de su sitio web. Esto es especialmente beneficioso para los usuarios que están en redes móviles. Ahora, disfruta de WebP a tu antojo.

Añade el siguiente código para poder subir imágenes WebP en tu WordPress

Introduce el siguiente código en el funtions.php del editor de temas de WordPress (Apariencia / editor de temas)

function agrega_mime_type ( $mime_types ) {
 $mime_types['webp'] = 'image/webp';
 return $mime_types;}
add_filter('upload_mimes', 'agrega_mime_type', 1, 1);