Los formatos de archivo que utiliza en su sitio web tienen un gran impacto en su velocidad, calidad y rendimiento. Sin embargo, averiguar qué tipo de imágenes usar puede llevar un poco de investigación.
Por ejemplo, WebP es un formato de archivo de imagen relativamente nuevo creado por Google. Entender qué es y cómo usarlo en su sitio de WordPress puede ayudarle a mejorar su experiencia de usuario (UX) y a reducir los tiempos de carga en general.
En este post, presentaremos WebP, explicaremos su historia y discutiremos por qué es importante. También le daremos algunos consejos útiles para emplearlo en su sitio de WordPress. Comencemos.
Introducción a WebP
La optimización de las imágenes es un aspecto esencial para la velocidad y el rendimiento del sitio web. Una de las mejores y más eficaces formas de optimizar las imágenes es reducir su tamaño mediante la compresión.
Cuanto más ligeros sean sus archivos, más fácil será para el servidor cargar su sitio, lo que en última instancia redundará en una mayor velocidad.
Hay dos tipos principales de compresión de imágenes: con y sin pérdidas.
La compresión con pérdidas se produce cuando se reduce el tamaño del archivo eliminando parte de los datos de la imagen, reduciendo la calidad en el proceso.
Con la compresión sin pérdidas, los datos se reconstruyen simplemente, manteniendo una mayor calidad.
WebP es un formato de archivo de imagen moderno desarrollado por Google en 2010 que utiliza compresión con y sin pérdidas.
El objetivo es proporcionar imágenes más pequeñas y rápidas para los sitios web, logrando un mayor rendimiento.
De hecho, según Google, las imágenes sin pérdida de WebP son un 26% más pequeñas que las PNG, y las imágenes con pérdida son hasta un 34% más pequeñas que las JPEG.
Por qué es importante WebP
Como hemos dicho, las imágenes juegan un papel importante en el rendimiento de su sitio web. El tamaño de sus archivos afecta a su velocidad, y a su vez a la UX.
Por lo tanto, es fundamental asegurarse de elegir los mejores formatos de archivo de imagen.
WebP es un formato de imagen de trama creado específicamente para las imágenes en línea.
En pocas palabras, es importante conocerlo porque permite mostrar imágenes de alta calidad empleando tamaños de archivo más pequeños que los que se obtendrían utilizando otros formatos.
Gracias al método de codificación predictiva, las imágenes WebP pueden codificarse en función de sus valores de píxel.
Esencialmente, incluye solamente lo necesario sin distorsionar el aspecto de la foto. Como resultado, el tamaño de los archivos se reduce, pero la calidad de la imagen sigue siendo relativamente alta.
La posibilidad de utilizar más imágenes sin preocuparse por los tiempos de carga lentos puede ayudar a mejorar la apariencia general de su sitio de WordPress.
Tener la libertad de emplear el tamaño y la calidad de las imágenes que desee también le da más flexibilidad en el diseño de su sitio.
Cómo utilizar imágenes WebP en su sitio de WordPress
Ahora que entiendes qué es WebP y cuáles son sus ventajas, vamos a discutir algunas de las formas en que puedes usar este formato en tu sitio de WordPress.
En primer lugar, es importante tener en cuenta que no todos los navegadores soportan actualmente las imágenes WebP.
Para obtener un desglose completo de los navegadores y las versiones que son compatibles con WebP (a diferencia de los que pueden requerir el uso de un formato de archivo de imagen de respaldo), puede visitar Can I use:
Si quieres añadir imágenes WebP a WordPress, tienes dos opciones. El primero es un método manual, y el segundo es emplear un plugin. Veamos con más detalle cómo funciona cada proceso.
Cómo añadir manualmente imágenes WebP a WordPress
El método manual no es tan rápido ni sencillo como el uso de un plugin. Sin embargo, si usted tiene al menos algo de experiencia en el trabajo con los archivos de su sitio y quiere evitar la instalación de otro plugin en su sitio, esta puede ser la mejor opción para usted.
Para añadir manualmente imágenes WebP a su sitio de WordPress es necesario convertirlas antes de subirlas a su biblioteca multimedia. La forma más sencilla de hacerlo es utilizar una herramienta basada en el navegador, como Online-Convert:
Para empezar, basta con hacer clic en Elegir archivos, seleccionar la imagen y pulsar el botón Iniciar conversión. Recuerde guardar el nuevo archivo cuando haya terminado.
Para añadir la imagen a su sitio, puede utilizar un cliente FTP (File Transfer Protocol) como FileZilla, o editar su archivo functions.php para permitir la carga de WebP. Puede hacer esto último añadiendo el siguiente fragmento de código al archivo:
//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
$existing_mimes[\'webp\'] = \'image/webp\';
return $existing_mimes;
}
add_filter(\'mime_types\', \'webp_upload_mimes\');Cuando haya terminado, recuerde guardar los cambios y volver a cargar el archivo. A continuación, debería poder cargar imágenes WebP a través de su biblioteca multimedia.
Si esto le parece demasiado complejo, no se preocupe. También tienes la opción de utilizar un plugin.
Cómo servir imágenes WebP en WordPress utilizando un plugin
Gracias a los plugins de WordPress, convertir tus imágenes PNG y JPEG a WebP puede ser rápido y sencillo. Además, no tendrá que editar directamente ninguno de los archivos de su sitio, ya que la extensión hará todo el trabajo por usted.
Aparte de la facilidad de uso, una ventaja de este método es que no tiene que preocuparse de que los visitantes accedan a su sitio desde un navegador que no admita imágenes WebP. Si el navegador que emplean no es compatible con este formato de archivo de imagen de última generación, se servirán los archivos originales, como las imágenes JPEG o PNG.
Si decides optar por la vía de los plugins, el siguiente paso es elegir cuál emplear. Tienes varias opciones. Uno de los más populares y fiables es ShortPixel Image Optimizer:
Este plugin freemium ofrece varias formas de mejorar el rendimiento de su sitio web mediante la optimización de las imágenes. Por ejemplo, además de las conversiones instantáneas de imágenes, la herramienta ofrece compresión con y sin pérdidas.
Para utilizar el plugin, puede instalarlo y activarlo, y luego validar su clave API (que se enviará a su dirección de correo electrónico). A continuación, puede habilitar la conversión automática de imágenes seleccionando esta opción en la pestaña Configuración avanzada:
Otros plugins de optimización de imágenes que puedes considerar son EWW Image Optimizer y Optimole.
Conclusión:
Las imágenes desempeñan un papel fundamental en cualquier sitio web.
Sin embargo, los formatos de archivo que uses afectan a la apariencia de tus imágenes en la página y a la rapidez con la que se cargan. Por lo tanto, es importante elegir la mejor opción posible.
Como ya comentamos en este post, WebP es un moderno formato de archivo de imagen desarrollado por Google, que puedes usar para mostrar imágenes de alta calidad sin perjudicar el rendimiento de tu sitio.
Al emplear la compresión con y sin pérdidas, WebP le permite mantener el aspecto rico de sus imágenes y, al mismo tiempo, aprovechar las ventajas de un tamaño de archivo más pequeño.
¿Tiene alguna pregunta sobre el uso de WebP? Háganoslo saber en la sección de comentarios más abajo.