Cómo usar imágenes WebP en WordPress: La guía completa paso a paso

¿Tienes problemas para conseguir que tu sitio web WordPress no supere el umbral mágico de los dos segundos? Si sospecha que las imágenes pesadas son las culpables, puede probar a utilizar imágenes WebP en lugar de las habituales PNG o JPG.

Las imágenes WebP son un formato de imagen moderno introducido y recomendado por Google para mejorar la velocidad de carga. En esta guía, te mostraremos cómo utilizarlas en WordPress.

La velocidad de carga de las páginas siempre ha sido algo que preocupa a Google y a otros motores de búsqueda, pero ahora, más que nunca, no puede permitirse tener un sitio web que cargue lentamente.

En primer lugar, Está demostrado que los sitios web lentos ahuyentan a los usuarios su sitio web (sobre todo para los usuarios móviles).

Y lo que es más importante, Google El algoritmo de experiencia de página se actualizará en junio de 2021. Cuando lo haga, enviará muy poco tráfico a los sitios web de carga lenta.

Las imágenes suelen representar sólo una pequeña parte del contenido de la mayoría de las páginas web. Sin embargo, representan la mayor parte del tamaño de los archivos. Por eso, si quiere aumentar la velocidad de carga de su sitio webPresta atención a tus imágenes.

¿Cómo ayudan exactamente los archivos WebP?

Los archivos WebP son un formato de imagen especialmente ligero y pueden reducir el tamaño de los archivos hasta en un 25-34% en comparación con otros formatos de archivo como PNG y JPG.

WebP vs. JPG vs. PNG para la Web - Comparación

Para ayudarle a entender qué hace que las imágenes WebP sean tan especiales, vamos a realizar una comparación detallada de las imágenes WebP en comparación con las imágenes PNG y JPG.

En primer lugar, repasemos un poco la jerga.

Cuando los archivos de imagen se comprimen, o bien se con o sin pérdidas.

La compresión sin pérdidas produce imágenes que pierden muy poca o ninguna calidad en comparación con las imágenes con pérdidas. Además, pueden descomprimirse y volver a su estado original.

La razón de que esto sea posible es que el proceso de compresión de imágenes sin pérdidas funciona eliminando sólo los bits irrelevantes de los datos codificados en las imágenes. Los archivos PNG suelen ser archivos sin pérdidas.

Las imágenes con pérdida se alteran fundamentalmente y se les quitan permanentemente fragmentos de información básica. Esto da como resultado archivos de menor tamaño que las imágenes sin pérdidas, pero con una reducción visible de la calidad cuando se intenta ampliarlas.

Un buen ejemplo de imágenes con pérdidas son Archivos JPG/JPEG.

Luego están las imágenes WebP.

Las imágenes WebP son una gran opción porque pueden someterse a compresión con o sin pérdidas. En ambos casos, proporcionan una compresión superior pero sin la pérdida proporcional de calidad en comparación con los archivos PNG y JPG.

Un Estudio de Google ha demostrado que las imágenes WebP sin pérdidas pueden ser hasta 26% más pequeñas que los archivos PNG comprimidos. Las imágenes WebP con pérdida suelen ser entre 25 y 34% más pequeñas que los archivos JPG.

Si se tiene en cuenta que estas enormes ventajas se obtienen sin comprometer la calidad de la imagen, tiene sentido utilizar imágenes WebP siempre que sea posible.

Antes de pasar a mostrarle cómo utilizar las imágenes WebP, hay algo más que debe saber sobre ellas.

Ventajas y desventajas de los archivos WebP

Como ya hemos dicho, los archivos WebP suelen ser mucho más ligeros y, por tanto, se cargan más rápido que los archivos JPG o PNG.

Para un sitio web medio con pocas imágenes, el aumento de los tiempos de carga será marginal. Pero estos efectos se multiplican en los sitios web con muchas imágenes, como las tiendas de comercio electrónico.

Las imágenes WebP presentan algunos problemas. Te explicaremos algunas soluciones sencillas, pero debes tenerlas en cuenta antes de empezar.

En primer lugar, los archivos WebP no son compatibles con todos los navegadores.

En 91% penetración del mercado de navegadores, esto no supone demasiado problema. La mayoría de los principales navegadores, como Chrome, Firefox, Edge y Opera, admiten por defecto imágenes WebP.

Otros navegadores, como Safari, no lo hacen.

Esto no significa que tenga que elegir entre un sitio web más rápido o servir contenidos poco atractivos a los lectores que utilizan navegadores no compatibles.

Todo lo que tienes que hacer es mantener tanto las versiones PNG/JPG como WebP de tus imágenes y servir diferentes versiones a diferentes grupos de usuarios dependiendo del navegador que estén utilizando.

Por ejemplo, utilizando un plugin de WordPress, su sitio web podría mostrar una versión WebP de una imagen a los navegadores que las admitan, mientras que mostraría automáticamente versiones PNG o JPG de la misma imagen a los que no las admitan.

También solía ocurrir que WordPress no ofrecía soporte nativo para imágenes WebP, por lo que había que utilizar un plugin o escribir algo de código para que funcionaran en WordPress. 

Esto ya no es cierto, ya que la última actualización de WordPress, WordPress 5.8incluye soporte nativo para imágenes WebP. 

Aún así, vas a necesitar una manera de lidiar con los navegadores que todavía no se han dado cuenta de este desarrollo. Hay varias formas de evitarlo, como verás en breve.

Cómo añadir imágenes WebP en WordPress - 3 métodos

Existen 3 métodos diferentes para añadir imágenes WebP en WordPress. Estos son

• Método 1: Utilizar una CDN
• Método 2: Utilizar un plugin de optimización de imágenes
• Método 3: Añadir imágenes WebP a WordPress manualmente

Ahora que WordPress permite subir archivos WebP de forma nativa, esta es la mejor forma de empezar. 

Pero, como ya hemos dicho, tendrás que tener en cuenta los navegadores que aún no admiten imágenes WebP. 

Los métodos que veremos a continuación le ayudarán a conseguirlo. 

Cabe señalar que ningún método es necesariamente mejor que otro, por lo que puede elegir el que más le convenga.

Lo son:

Método 1: Utilizar una CDN

Redes de distribución de contenidos (CDNs) son una forma efectiva de utilizar imágenes WebP en WordPress. Las CDN son una red de servidores que ayudan a redistribuir la carga de entrega de contenidos desde los servidores de tu sitio web. 

Por lo general, si utiliza una CDN, ésta almacenará en caché el contenido de su sitio web y lo servirá a los usuarios de forma más rápida y eficaz. 

Una CDN puede utilizarse fácilmente para convertir sus archivos PNG/JPG en archivos WebP y servirlos a públicos seleccionados en función del tipo de navegador.

Algunas de las CDN más populares son CDN máximo, Sucuri, Sendero, Cloudflarey KeyCDN.

Método 2: Utilizar un plugin de optimización de imágenes

Aunque WordPress ahora permite subir imágenes en formato WebP, no necesariamente tienes que subir tus imágenes en formato WebP. De hecho, creemos que es mejor subir primero las imágenes en formato PNG/JPG y luego convertirlas a WebP.

Esto se debe a que, como hemos dicho, no todos los navegadores admiten actualmente imágenes WebP.

Para que esto funcione, deberá disponer de las mismas imágenes en formato PNG/JPG para mostrarlas en navegadores que no admitan archivos WebP.

Existen plugins que le permitirán conseguirlo con bastante facilidad.

Estos son algunos de los plugins más populares que puede utilizar:

1. Imagify

Imagify es un plugin de optimización de imágenesy que le recomendamos para convertir sus imágenes a WebP.

Aunque Imagify es gratis para empezar, tiene un límite en la cantidad de optimización que puedes hacer. Actualmente, los usuarios pueden utilizar hasta 20 MB de optimización de forma gratuita sobre una base mensual. Para empezar, primero instala el plugin desde el repositorio de WordPress y actívalo.

Se le pedirá que cree una cuenta (todo lo que tiene que hacer es proporcionar su correo electrónico), después de lo cual, se le enviará una clave de API. Introduzca la API y proceda a configurar el plugin.

Por defecto, la mayoría de las opciones que necesita ya están configuradas. Sin embargo, debes acordarte de activar la opción de mostrar imágenes WebP.

Verás que el plugin tiene dos formas de hacerlo. Primero, permitiéndole crear reglas de reescritura, y segundo, usando <picture> en lugar de <img> tags.

En la mayoría de los casos, el segundo método es el preferido, sin embargo, esto no funcionará con todos los temas. Imagify es gratuito, fácil de usar y eficaz, lo que lo convierte en un plugin recomendable.

Sin embargo, sigue leyendo para ver algunos plugins alternativos de optimización de imágenes, así como otras formas de realizar el trabajo.

2. Smush

Smush es un plugin multipropósito de optimización de imágenes para WordPress. Puede utilizar Smush para comprimir archivos PNG y JPG o convertirlos en archivos WebP.

Smush tiene un montón de otras características útiles, tales como la carga lenta, así como una imagen de 45 puntos CDN, todo lo cual ayuda a aumentar la velocidad de su sitio web.

Aunque muchas de estas increíbles funciones están disponibles de forma gratuita, la conversión a WebP sólo está disponible en la versión Pro. Dependiendo del número de sitios web con los que vaya a trabajar, los paquetes Smush Pro tienen un precio mensual de $6, $14 y $29, respectivamente.

3. Optimole

Optimole es un plugin de compresión de imágenes que ofrece conversión WebP y la posibilidad de servirlas dinámicamente usando Amazon CloudFront.

Además, el plugin proporciona una experiencia de visualización óptima para cada visitante de su sitio web, redimensionando automáticamente las imágenes para adaptarlas a su pantalla.

La experiencia del usuario es un Google Core Web Vitals por lo que es una gran característica a aprovechar.

Puede empezar con el plan gratuito de Optimole que le permitirá servir hasta 5.000 visitantes mensuales, u optar por un plan de pago que le permitirá hasta 25.000 visitantes mensuales.

Para utilizar el plan gratuito, basta con instalar y activar el plugin. Se te pedirá que abras una cuenta para recibir una clave API.

Una vez que haya introducido su clave API, el resto del proceso se hace por usted de forma predeterminada. Optimole optimizará automáticamente sus imágenes y proporcionará soporte WebP por defecto, junto con otros. mejores prácticas de optimización de imágenes.

4. ShortPixel

ShortPixel es un popular plugin de conversión y optimización de imágenes. Al igual que los otros plugins de esta lista, puedes configurar ShortPixel para optimizar o convertir tus imágenes WebP.

También puede servir versiones PNG/JPG de sus archivos WebP a usuarios de Safari y otros navegadores no compatibles. ShortPixel admite la conversión a imágenes WebP tanto en formato con pérdida como sin pérdida y ofrece otras ventajas como su optimizador masivo.

Una característica destacada que ofrece ShortPixel es su exclusivo formato de archivo brillante. Las imágenes brillantes están diseñadas para ofrecer un compromiso entre la depreciación de la calidad de los archivos de imagen con pérdida y el menor tamaño de archivo de las imágenes sin pérdida.

Para empezar a utilizar ShortPixel, descarga y activa el plugin, y obtén una clave API creando una cuenta.

No tendrás que hacer mucho más, ya que la mayoría de las opciones están configuradas para ti. Sin embargo, para habilitar las conversiones WebP, tendrás que ir a la pestaña avanzada y marcar la opción para permitir la conversión WebP.

La conversión a WebP costará un crédito por conversión. ShortPixel ofrece 100 créditos gratuitos al abrir una cuenta y otros 100 mensuales. Si los consumes, puedes comprar más.

Método 3: Añadir imágenes WebP a WordPress manualmente

Puede utilizar un plugin o un CDN, o una combinación de ambos para realizar el trabajo. La tercera opción es evitar cualquiera de los dos métodos y subir tus imágenes WebP a WordPress manualmente.

Estos son los pasos a seguir:

Convierte tus imágenes a WebP

Tendrás que convertir tus imágenes a formato WebP antes de subirlas a WordPress. En general, esto es fácil de hacer y se puede hacer de varias maneras.

1. Utilice un conversor de imágenes en línea

El primer método es utilizar un conversor de imágenes en línea. Hay varios y no hay mucho que los separe en términos de calidad.

Una de las más populares es Online-Convert.com.

Si acabas de crear tu sitio web, puedes convertir fácilmente tus imágenes primero y luego subirlas. Pero, ¿y si ya tienes un sitio web completo o lo has llenado de imágenes?

Para evitarlo, puedes utilizar un plugin que ofrezca una función de conversión masiva. Si quieres hacerlo manualmente, tendrás que ensuciarte las manos, entrar en la sala de máquinas y escribir un poco de código.

Te guiaremos a través de este proceso muy pronto, pero antes, aquí tienes otro método para convertir tus imágenes al formato WebP.

2. Utilice un plugin de Adobe Photoshop

Si utiliza Adobe Photoshop para crear o editar imágenes, es posible que desee guardarlas en formato WebP desde la propia aplicación.

Aunque esto no es posible por defecto, es fácil de hacer mediante la instalación de un Plugin de conversión de imágenes de Photoshop.

Ahora que ya has convertido con éxito tus imágenes al formato WebP, es el momento de hacer el verdadero trabajo duro.

¿Cómo subir imágenes WebP a WordPress manualmente?

Hay diferentes maneras de hacerlo. Si estás familiarizado con el uso del Protocolo Seguro de Transferencia de Archivos (SFTP), puedes simplemente subir tus imágenes directamente a la carpeta de subidas, sin tener que pasar por la mediateca.

También puede escribir un poco de código en el tema de su sitio web WordPress. He aquí cómo:

1. En el backend de su instalación de WordPress, vaya a Apariencia > Editor de WordPress.
2. Abra el archivo denominado " functions.php" y pegue el código siguiente en la parte inferior de la página:

//** *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');

Ya está. Usted puede seguir adelante y subir sus imágenes WebP sin ningún tipo de molestia.

Si prefieres evitar a toda costa trabajar en el editor de WordPress, puedes conseguir el mismo efecto instalando un plugin llamado Fragmentos de código.

Si va a utilizar un plugin, lo mejor sería que utilizara uno dedicado. plugin de compresión de imágenes y evitar por completo el enfoque manual.

Introducción a las imágenes WebP

Ahora ya sabe qué son las imágenes WebP y cómo utilizarlas para acelerar su sitio web WordPress. Tu siguiente paso será probar cualquiera de los métodos que te hemos presentado.

Un último consejo: para optimizar al máximo tu sitio web, deberías empezar por utilizar un tema de WordPress rápido y ligero. Nuestro tema, Astrapor ejemplo, es calificada por muchos expertos del sector como uno de los temas de WordPress más rápidos que existen.

Si realmente le preocupa la velocidad de su sitio web, ¡pruébelo!

¿Utiliza imágenes WebP? ¿Suponen una diferencia en la velocidad de carga de tu página? ¿Tienes algo que quieras compartir con los nuevos usuarios de WebP? Comparte tu opinión a continuación.