Probablemente hayas oído que optimizar las imágenes hace que los sitios carguen más rápido, y con razón: es verdad. Si quieres que los visitantes permanezcan en tu sitio y que los motores de búsqueda lo posicionen mejor, la velocidad debe ser una prioridad. Las páginas que cargan despacio frustran a los usuarios, hacen que se marchen y, en última instancia, perjudican tus tasas de conversión.
Las imágenes influyen mucho en el rendimiento de un sitio, especialmente si dependes en gran medida de los elementos visuales. Por eso es tan importante optimizarlas. Aun así, comprimir las imágenes para reducir el tamaño de los archivos puede degradar su calidad. Por suerte, el formato de imagen WebP ofrece una solución a este problema.
En esta guía, hablaremos del impacto de WebP en el rendimiento del sitio y de cómo usar las funciones gratuitas incluidas en Jetpack Boost para convertir las imágenes a este formato.
¿Qué es WebP?
WebP son las siglas de Web Picture y es un formato moderno de archivo de imagen presentado por el equipo de Google. Considerado a menudo una opción de nueva generación, WebP mejora el rendimiento de los sitios web al reducir el peso de los archivos visuales. Ofrece una compresión mejor que las imágenes JPEG y PNG tradicionales, al tiempo que conserva la calidad original.
En cuanto a la compresión, las imágenes WebP ocupan bastante menos que las de formato JPEG o PNG, aproximadamente un 25-34 % menos que JPEG y un 26 % menos que PNG.
Las imágenes WebP ofrecen métodos de compresión con pérdida y sin pérdida. Veamos cada uno con más detalle:
Compresión con pérdida
Este formato elimina datos de imagen innecesarios para conseguir el menor tamaño de archivo posible, aunque con cierta pérdida de calidad. Utilizado con imágenes JPEG, este método funciona mejor para la gran mayoría de los sitios web, pero en portafolios de fotografía o sitios donde se necesitan fotos con mucho nivel de detalle, cualquier pérdida de calidad supone un inconveniente importante.
Compresión sin pérdida
El formato sin pérdida comprime los datos y elimina los metadatos de la imagen. La reducción del tamaño del archivo no es tan drástica como con la compresión con pérdida, pero la imagen conserva una mayor calidad.
Con un método menos destructivo como este, incluso puedes revertir los cambios realizados.
Sin embargo, en sitios web con grandes cantidades de imágenes, la compresión sin pérdida podría no tener un impacto positivo suficiente en el rendimiento.
Convertir las imágenes a WebP funciona con ambos métodos de compresión y mejora los resultados de cada uno. En un estudio, el formato WebP produjo sistemáticamente una calidad de imagen similar (medida mediante SSIM —índice de similitud estructural—) con menos bits por píxel (es decir, un tamaño de archivo menor).
Ventajas de usar WebP
Ya hemos hablado de cómo WebP conserva la calidad de las imágenes al tiempo que reduce el tamaño de los archivos. Pero eso es solo una parte de la historia. Otras ventajas de usar imágenes WebP en WordPress son:
- Amplia compatibilidad con navegadores: WebP es compatible con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.
- Imágenes de alta calidad: WebP admite compresión con pérdida y sin pérdida, lo que te permite mantener la calidad visual mientras reduces el tamaño del archivo.
- Mayor velocidad del sitio: Este formato de nueva generación, recomendado por PageSpeed Insights de Google, ayuda a que las páginas carguen más rápido al reducir los tiempos de carga de las imágenes.
- Mejores posiciones en los resultados de búsqueda: Las imágenes WebP optimizadas mejoran Core Web Vitals (un factor de posicionamiento), especialmente First Contentful Paint (FCP) y Largest Contentful Paint (LCP).
- Rastreo más rápido por parte de los motores de búsqueda: La búsqueda de imágenes de Google puede rastrear e indexar tus elementos visuales de forma más eficaz gracias a WebP, lo que aumenta su visibilidad.
- Menor necesidad de ancho de banda: Las imágenes más pequeñas utilizan menos ancho de banda, lo que resulta especialmente útil si tu plan de alojamiento tiene límites de datos.
- Menor espacio de almacenamiento: Las imágenes comprimidas generan archivos de copia de seguridad más pequeños, lo que ayuda a reducir los costes de almacenamiento.
Por qué es importante convertir automáticamente las imágenes a WebP
Hasta hace poco, la mayoría de los sitios web se basaban en formatos populares como JPEG y PNG. WordPress no ofrecía compatibilidad nativa con imágenes WebP hasta la versión 5.8, publicada en julio de 2021. Antes de eso, tenías que usar un plugin o código personalizado para subir y mostrar archivos WebP.
Ahora puedes subir imágenes WebP directamente a WordPress, pero la mayoría de las cámaras y herramientas de edición de imágenes siguen exportándolas en formatos JPEG o PNG. Entonces, ¿cómo conviertes esas imágenes a WebP?
Usar una herramienta para convertir manualmente tus imágenes a WebP antes de subirlas a WordPress funciona, pero no sirve para las imágenes que ya están en tu biblioteca de medios.
Una solución mejor consiste en usar una herramienta que convierta automáticamente las imágenes a WebP. Este tipo de herramienta te ahorra tiempo, mantiene uniforme la calidad de las imágenes y garantiza que todas las imágenes que uses estén optimizadas.
Presentamos Jetpack Boost para la conversión automática a WebP
Jetpack Boost ofrece herramientas para mejorar la velocidad de tu sitio web sin necesidad de un desarrollador ni de código personalizado. Puedes medir y supervisar activamente el rendimiento en dispositivos móviles y ordenadores, y activar mejoras con unos pocos clics. Entre sus principales funciones de rendimiento se incluyen:
- Caché: Esto indica a los navegadores que almacenen copias de tu sitio y se las entreguen a los visitantes que vuelvan a acceder, lo que hace que su experiencia sea mucho más rápida
- Optimizaciones específicas para Core Web Vitals: Mejora tus puntuaciones de Core Web Vitals con opciones para generar CSS crítico, aplazar JavaScript y mucho más
- Una guía de imágenes: Descubre de un vistazo qué imágenes deben cambiar de tamaño
- Una CDN de imágenes: Cambia automáticamente el tamaño de tus imágenes, conviértelas a WebP y distribúyelas desde una red global de servidores
¿Te has fijado en el último? La potencia de Jetpack, concretamente la de su CDN de imágenes no se puede exagerar. Convierte automáticamente las imágenes a WebP, lo que te ahorra muchísimo tiempo y reduce drásticamente el peso de tu sitio. También ofrece las imágenes a los visitantes desde su red de servidores distribuidos por todo el mundo, lo que reduce la carga de tu proveedor de hosting y ayuda a que tu sitio cargue más rápido para los visitantes (y los motores de búsqueda).
Además, cambia automáticamente el tamaño de las imágenes para dispositivos móviles, de modo que todo el mundo pueda ver siempre la opción más adecuada para su situación.
Jetpack Boost es un acierto inmediato para casi cualquier sitio. Veamos más de cerca las funciones principales relacionadas con el rendimiento de las imágenes:
1. Una CDN de imágenes
Al activar la función de CDN de imágenes en Jetpack Boost, las imágenes de tu sitio se convierten automáticamente al formato WebP, lo que mejora los tiempos de carga y reduce el uso de ancho de banda.
En lugar de servir las imágenes desde tu servidor, la CDN de Jetpack las sirve desde una red de servidores de datos de alta velocidad distribuidos geográficamente.
La CDN de imágenes de Jetpack no altera las imágenes originales de tu biblioteca de medios. En su lugar, genera copias optimizadas que se sirven desde los servidores en la nube más cercanos a tus visitantes. Si en el futuro desactivas Jetpack, las imágenes de tu sitio seguirán funcionando correctamente, ya que las originales permanecen en tu biblioteca de medios.
2. Conversión automática a WebP
Como se ha explicado anteriormente, la función de CDN de imágenes de Jetpack Boost ya libera a tu servidor de gran parte del trabajo al alojar las imágenes en una red global. Sin embargo, va un paso más allá al convertir automáticamente tus imágenes al formato WebP, más rápido y eficiente.
No necesitas instalar un plugin independiente ni convertir los archivos manualmente. En su lugar, Jetpack se encarga de todo el proceso en tiempo real. Si el navegador de un visitante no es compatible con WebP, la CDN lo detecta y sirve el formato de imagen original para que todo el mundo pueda ver tus imágenes sin retrasos ni problemas de visualización.
3. Control de la calidad de las imágenes
El plan de pago premium de Jetpack Boost ofrece opciones mejoradas para gestionar la calidad de tus imágenes comprimidas. Cuando actives la CDN de imágenes, verás ajustes para la calidad de imagen y la compresión sin pérdidas.
4. Analizador del tamaño de las imágenes
Las imágenes que cargan lentamente ponen en riesgo la retención y la interacción de tus visitantes. Para solucionarlo, utiliza el Analizador del tamaño de las imágenes de Jetpack Boost para identificar las imágenes excesivamente grandes de tu sitio, las que tienen una resolución subóptima o una relación de aspecto incorrecta. Integrar este análisis con las opciones de la CDN de imágenes garantiza una entrega eficiente de las imágenes en formatos optimizados.
Si tienes un plan de pago de Jetpack Boost, aprovecha el Informe de optimización de imágenes, que señala las imágenes demasiado grandes de tu contenido. En este informe, puedes comparar las dimensiones reales y esperadas de cada imagen con el tamaño mostrado.
Para acceder a este informe:
- En tu panel de WordPress, ve a Jetpack → Boost.
- Desplázate hacia abajo hasta encontrar Análisis del tamaño de las imágenes.
- Haz clic en Iniciar análisis de imágenes.
- Una vez completado el proceso, estará disponible una opción para acceder al informe completo.
El informe muestra información y datos importantes que te ayudarán a realizar los cambios necesarios en tus imágenes. El botón Editar página proporciona acceso directo al editor de WordPress, donde puedes aplicar las actualizaciones necesarias.
Cómo convertir automáticamente las imágenes de WordPress a WebP
Como ya sabes, la función de CDN de imágenes de Jetpack convierte las imágenes al formato WebP y después las aloja en la propia red de servidores de Jetpack, reduciendo la carga de tu servidor y acelerando la carga de las imágenes para tus visitantes.
Para acceder a estas funciones, sigue estos pasos:
Desde el panel de administración de WordPress, ve a Plugins → Añadir nuevo. Escribe «Jetpack Boost». Lo encontrarás como Jetpack Boost – Velocidad, rendimiento y CSS crítico del sitio web, como se muestra a continuación:
Haz clic en Instalar ahora, espera a que finalice el proceso y haz clic en Activar. Después de activar el plugin, elige entre las versiones gratuita y de pago. Si empiezas con la versión gratuita, podrás actualizar más adelante.
Una vez seleccionado el plan, se te redirigirá al escritorio de Jetpack Boost. Utiliza esta área para acceder a distintas opciones que mejorarán el rendimiento de tu sitio.
Desplázate hacia abajo hasta encontrar la sección CDN de imágenes. Activa esta opción encendiendo el interruptor verde.
Para comprobar que tus imágenes se han convertido a WebP correctamente, haz clic con el botón derecho en una imagen para abrirla en una pestaña nueva. Deberías ver su extensión WebP en la barra de direcciones.
Consejos de rendimiento adicionales para WordPress más allá de WebP
Jetpack Boost incluye varias opciones para optimizar tu sitio. Considera activar las opciones disponibles, entre ellas:
- Optimización de la carga del CSS crítico
- Almacenamiento en caché de las páginas del sitio
- Aplazamiento del JavaScript no esencial
- Concatenar JavaScript y CSS
Aunque las imágenes desempeñan un papel importante en la optimización de la velocidad del sitio, también debes tener en cuenta otras variables, como utilizar un tema ligero. Los temas diseñados pensando en el rendimiento mejoran los tiempos de carga, reducen los cambios de diseño y ayudan a que tu sitio cumpla los estándares de Core Web Vitals.
La infraestructura de tu alojamiento también determina si tu sitio funciona bien en línea. Cuando selecciones un plan de alojamiento, comprueba las limitaciones de ancho de banda, tráfico y tamaño del sitio, y elige un proveedor que dé prioridad al rendimiento y la velocidad del sitio.
Preguntas frecuentes
Ahora abordaremos algunas preguntas frecuentes sobre el uso de imágenes WebP y Jetpack Boost para ayudarte a sacar el máximo partido al rendimiento de tu sitio.
¿Se sustituirán mis imágenes originales por imágenes WebP en la biblioteca de medios?
No, tus imágenes originales permanecen intactas en tu biblioteca de medios. Jetpack crea una copia optimizada. Si decides eliminar Jetpack, tus imágenes seguirán mostrándose en tu sitio.
¿Tengo que convertir manualmente las imágenes existentes?
No, no necesitas convertir manualmente las imágenes existentes. Jetpack lo hace automáticamente por ti.
¿Qué ocurre con los navegadores antiguos que no son compatibles con WebP?
Para los navegadores que no son compatibles con WebP, Jetpack ofrece una alternativa y utiliza de forma predeterminada el formato original del archivo de imagen. Aunque la mayoría de los navegadores ya son compatibles con WebP, sigue siendo importante asegurarse de que tu sitio funcione para todos tus visitantes.
¿Necesito conocimientos de programación para activar esta función?
No, no necesitas conocimientos de programación para activar la conversión a WebP en Jetpack Boost.
¿Necesito una versión de pago para acceder a la conversión a WebP?
No, la versión gratuita de Jetpack Boost incluye las funciones de CDN de imágenes necesarias para convertir automáticamente las imágenes a WebP.
Jetpack 