En WPBeginner, siempre estamos evaluando nuevas tecnologías que puedan ayudar a los usuarios de WordPress a crear sitios web más rápidos y con mejor rendimiento. Las imágenes WebP han estado en nuestro radar por un tiempo, y aunque aún no las hemos implementado en nuestro propio sitio, somos conscientes del potencial del formato.
Lo que hace interesante a WebP es su capacidad para reducir el tamaño de los archivos de imagen hasta en un 35% sin ninguna pérdida de calidad perceptible. Hemos visto sitios que usan WebP lograr mejoras significativas en la velocidad de carga y la participación del usuario.
Basándonos en nuestra investigación y proceso de prueba, te mostraremos cómo usar imágenes WebP en WordPress para beneficiarte de las ventajas de velocidad de este formato de imagen moderno.
¿Qué es WebP?
WebP es un formato de imagen moderno desarrollado por Google específicamente para uso web. Lo que lo hace especial es su tecnología de compresión superior. Las imágenes WebP suelen ser un 25-35% más pequeñas que los archivos JPEG y PNG, manteniendo una calidad visual idéntica.
Para ponerlo en perspectiva, si tu imagen PNG actual es de 100 KB, la misma imagen en formato WebP rondaría los 65-75 KB sin una diferencia visible en la calidad. Esta reducción de tamaño se traduce directamente en tiempos de carga de página más rápidos y una mejor experiencia de usuario.
El formato admite compresión con pérdida y sin pérdida, además de características como transparencia y animación, lo que lo convierte en un reemplazo versátil para múltiples formatos tradicionales.
Puedes aprender sobre la compresión de imágenes en nuestra guía sobre cómo optimizar imágenes para la web.
Soporte del navegador: ¿Está WebP listo para tu sitio?
Actualmente, WebP goza de un fuerte soporte en navegadores con más del 95% de cobertura global. Todos los navegadores principales, incluyendo Chrome, Firefox, Safari (desde iOS 14) y Edge, soportan completamente las imágenes WebP.
El 5% restante consiste principalmente en versiones antiguas de navegadores que están disminuyendo rápidamente en uso.
¿Deberías usar imágenes WebP en WordPress?
Para la mayoría de los sitios de WordPress, la respuesta es sí. La implementación de WebP puede acelerar significativamente tu sitio web de WordPress y funciona perfectamente junto con otras optimizaciones de rendimiento como plugins de caché y CDNs.
Desde WordPress 5.8, la plataforma tiene soporte nativo para WebP, lo que significa que puedes subir y usar imágenes WebP directamente sin necesidad de plugins. Sin embargo, este soporte básico no incluye conversión automática ni opciones de respaldo.
Para obtener los mejores resultados, recomendamos usar un plugin dedicado de optimización de imágenes. Estos plugins convierten automáticamente tus imágenes existentes al formato WebP y sirven versiones tradicionales de JPEG o PNG a ese pequeño porcentaje de usuarios con navegadores no compatibles.
WebP es particularmente beneficioso si tu sitio tiene muchas imágenes (como blogs de fotografía, tiendas de comercio electrónico o portafolios) o si tu blog de WordPress actualmente tiene problemas de carga lenta debido a imágenes grandes.
Aquí te mostramos cómo usar imágenes WebP en WordPress. Te mostraremos varios métodos para que puedas elegir el que mejor te funcione:
- Usar imágenes WebP en WordPress con EWWW Optimizer
- Usar imágenes WebP en WordPress con Imagify
- Usar imágenes WebP en WordPress con SG Optimizer
- Guías Expertas sobre el Uso de Imágenes en WordPress
Tutorial en video
Si prefieres instrucciones escritas, sigue leyendo.
Método 1: Usar imágenes WebP en WordPress con EWWW Optimizer
EWWW Image Optimizer es uno de los mejores plugins de compresión de imágenes de WordPress que te permite optimizar tus imágenes de WordPress. También soporta imágenes WebP y puede mostrarlas automáticamente en navegadores compatibles. Consulta nuestra reseña de EWWW Image Optimizer para más detalles.
Lo primero que necesitas hacer es instalar y activar el plugin EWWW Image Optimizer. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activarlo, ve a la página Configuración » EWWW Image Optimizer para configurar las opciones del plugin. Te recibirá un asistente de configuración, pero puedes hacer clic en el enlace 'Sé lo que estoy haciendo' para salir del asistente.
En la siguiente pantalla, verás un montón de opciones del plugin.
Desplázate hacia abajo y marca la casilla junto a la opción 'Conversión a WebP'.
Después de eso, haz clic en el botón 'Guardar Cambios' para almacenar tu configuración.
A continuación, necesitas desplazarte hacia abajo hasta la sección de Conversión a WebP. El plugin ahora te mostrará algunas reglas de reescritura con una imagen de vista previa en rojo.
Necesitas hacer clic en el botón 'Insertar Reglas de Reescritura', y el plugin intentará insertar automáticamente estas reglas de reescritura en tu archivo .htaccess.
Si el plugin tiene éxito al agregar esas reglas, entonces la vista previa de la imagen en rojo se volverá verde con el texto 'WebP'.
A veces, el plugin puede no ser capaz de insertar las reglas. En ese caso, necesitas copiar las reglas de reescritura de la página de configuración del plugin y pegarlas manualmente al final de tu archivo .htaccess.
Una vez que hayas terminado, regresa a la página de configuración del plugin y haz clic en el botón 'Guardar Cambios' nuevamente. Si la imagen de vista previa se vuelve verde, significa que has habilitado con éxito la entrega de imágenes WebP en tu sitio web de WordPress.
Alternativamente, puedes elegir entre los métodos de reescritura de WebP de JS o de reescritura de WebP como tus opciones de entrega de WebP. Estos son un poco más lentos que el método .htaccess, pero harán el trabajo.
Convierte tus imágenes antiguas a versiones WebP en bloque
EWWW Image Optimizer te permite convertir fácilmente tus archivos de imagen subidos previamente a imágenes WebP. Simplemente ve a la página Medios » Biblioteca y cambia a la vista de lista.
A continuación, necesitas hacer clic en el botón 'Opciones de pantalla' y cambiar el 'Número de elementos por página' a 999. Si tienes más de 1000 imágenes, esas imágenes aparecerán en la siguiente página.
De esta manera, podrás seleccionar rápidamente un gran número de imágenes para la optimización en bloque. A continuación, haz clic en la casilla de verificación Seleccionar todo en la parte superior para seleccionar todas las imágenes.
Después de eso, haz clic en el menú desplegable 'Acciones en bloque' y selecciona la opción 'Optimizar en bloque'. Finalmente, haz clic en el botón 'Aplicar'.
En la siguiente pantalla, el plugin te dará la opción de omitir la compresión de imágenes y solo convertirlas a WebP. Puedes marcar esta opción si tus imágenes ya están optimizadas.
Después de eso, haz clic en el botón 'Escanear imágenes no optimizadas' para continuar. El plugin te mostrará entonces el número de imágenes que encontró, para que puedas hacer clic en el botón Optimizar para proceder.
Tus imágenes ahora estarán optimizadas, y EWWW Optimizer generará versiones WebP para tus imágenes.
Probando la entrega de tus imágenes WebP
Una vez que hayas optimizado tus imágenes, puedes ir a una entrada de blog que contenga varias imágenes.
Pasa el ratón sobre cualquier imagen y haz clic derecho para abrir la imagen en una nueva pestaña.
Esto abrirá la imagen en una nueva pestaña del navegador.
Podrás ver que tiene una extensión .webp en la barra de direcciones.
Si el plugin no puede servir la imagen WebP, entonces puedes volver a la página de configuración del plugin. Desde aquí, puedes cambiar la opción de entrega de WebP a los métodos 'Reescritura de WebP de JS' o 'Reescritura de WebP'.
Método 2: Usar imágenes WebP en WordPress con Imagify
Imagify es un plugin de optimización de imágenes para WordPress creado por las personas detrás de WP Rocket, el mejor plugin de caché para WordPress. Te permite optimizar y convertir fácilmente imágenes al formato de imagen WebP. Consulta nuestra reseña de Imagify para obtener más información.
Lo primero que necesitas hacer es instalar y activar el plugin Imagify. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, necesitas visitar la página Ajustes » Imagify para configurar las opciones del plugin. Desde aquí, haz clic en el botón ‘Crear una clave API gratuita’ para continuar.
Se te pedirá que ingreses una dirección de correo electrónico de negocios. Después de eso, puedes revisar tu bandeja de entrada para encontrar un correo electrónico que contiene tu clave API. Copia y pega la clave en la página de configuración del plugin y haz clic en el botón ‘Guardar cambios’.
A continuación, necesitas desplazarte hacia abajo hasta la sección de Optimización. Allí, debes marcar las casillas junto a las opciones ‘Crear versiones webp de las imágenes’ y ‘Mostrar imágenes en formato webp en el sitio’.
Debajo de eso, puedes elegir entre dos métodos de entrega para mostrar imágenes WebP en WordPress. El primero es el método .htaccess, y el segundo es usando una etiqueta.
El método .htaccess es más rápido, pero no funciona si estás utilizando un servicio CDN. El método de etiqueta también funciona con CDNs, pero puede romper algunos temas de WordPress.
Puedes elegir cualquiera de los dos que funcione bien para tu sitio. Después de eso, haz clic en el botón ‘Guardar y ir al optimizador masivo’ en la parte inferior.
Esto te llevará a la página Medios » Optimización masiva.
El plugin comenzará automáticamente a optimizar todas tus imágenes de WordPress en segundo plano.
Si tienes muchas imágenes, esto puede llevar un tiempo. No te preocupes, puedes cerrar la página y volver más tarde, ya que cerrar la página no detendrá el proceso de optimización de imágenes.
Probando tus imágenes WebP en WordPress
Una vez que la optimización esté completa, puedes visitar una página o publicación que contenga algunas imágenes. Coloca el cursor sobre una imagen y luego haz clic derecho para seleccionar 'Abrir imagen en una pestaña nueva'.
Esto abrirá la imagen en una nueva pestaña del navegador.
Podrás ver la extensión .webp en la barra de direcciones.
Método 3: Usando imágenes WebP en WordPress con SG Optimizer
Este método se recomienda si eres usuario de SiteGround.
SiteGround es una de las mejores empresas de hosting de WordPress. Ofrecen un plugin gratuito SG Optimizer a sus usuarios, que te permite optimizar el rendimiento de tu WordPress. También incluye la opción de optimizar imágenes de WordPress.
Primero, necesitas instalar y activar el plugin SG Optimizer.
Tras la activación, el plugin agregará un nuevo elemento de menú a tu barra lateral de administrador etiquetado como 'SG Optimizer'. Al hacer clic en él, te llevará a la página de configuración del plugin.
Desde aquí, puedes activar la configuración de caché si deseas usar el sistema de caché integrado de SiteGround.
Después de eso, puedes cambiar a la pestaña Optimización de Medios y activar la opción 'Generar copias WebP de imágenes nuevas'.
Debajo de eso, verás la opción 'Generar archivos WebP en bloque'.
Al hacer clic en el botón de alternancia de esa opción, se comenzará a generar copias WebP para todos los archivos de imagen en tu biblioteca de medios de WordPress.
Una vez terminado, tu sitio de WordPress comenzará a servir imágenes WebP.
Probando imágenes WebP en SG Optimizer
Para ver si tu sitio web está sirviendo imágenes WebP, necesitas abrir una página en tu sitio con algunas imágenes.
Después de eso, haz clic derecho y selecciona la herramienta Inspeccionar. Esto abrirá la consola del desarrollador, donde necesitas cambiar a la pestaña Red.
Desde aquí, haz clic en la pestaña 'img' y luego recarga la página (CTRL+R en Windows y Command+R en Mac). Mientras tu sitio web se recarga, verás todas las imágenes cargadas en la consola del desarrollador.
Guías Expertas sobre el Uso de Imágenes en WordPress
Esperamos que este artículo te haya ayudado a aprender cómo usar imágenes WebP en WordPress. También podrías querer ver otras guías para usar imágenes en tu sitio de WordPress:
- Cómo agregar imágenes correctamente en WordPress (paso a paso)
- Cómo agregar imágenes destacadas o miniaturas de publicación en WordPress
- WebP vs. PNG vs. JPEG: El mejor formato de imagen para WordPress
- Cómo optimizar imágenes para el rendimiento web sin perder calidad
- Los mejores plugins de compresión de imágenes para WordPress comparados
- Herramientas para crear mejores imágenes para las publicaciones de tu blog
- Grandes plugins de WordPress para administrar imágenes (Actualizado)
- Texto alternativo de imagen vs. Título de imagen en WordPress – ¿Cuál es la diferencia?
- ¿Dónde almacena WordPress las imágenes en tu sitio?
- Cómo cargar imágenes de forma diferida (lazy load) fácilmente en WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Olaf
Cada vez que nos enfrentamos a la pregunta de cómo acelerar un sitio web, los medios son un área donde casi siempre hay espacio para la optimización. Prácticamente todos los usuarios de WordPress, a menos que sean profesionales, suben imágenes al sitio tal como están guardadas en su computadora, a menudo innecesariamente grandes tanto en dimensiones como en tamaño de archivo. Es interesante ver cuánto puede mejorar la velocidad de un sitio web simplemente ajustando los medios, específicamente comprimiendo las imágenes a un formato diferente. Me gusta WebP porque todavía ofrece una calidad suficiente mientras mantiene los tamaños de archivo mucho más pequeños en comparación con el original. Para sitios web existentes con docenas de imágenes, es útil conocer un método para hacer esto en masa, y es entonces cuando tutoriales como estos son increíblemente valiosos.
Paul
He seguido los pasos que indicaste, pero al probar, la nueva pestaña que se abre cuando selecciono "Abrir imagen en una pestaña nueva" no termina en webp, como muestras, sino con la extensión de archivo original. Sin embargo, cuando selecciono "Guardar imagen como...", sí muestra webp. No estoy completamente seguro de lo que esto significa. ¿La imagen es realmente webp y se muestra como tal? El navegador que estoy usando es la última versión de Chrome, por lo que no debería estar mostrando la imagen de respaldo. Uso un plugin de caché, pero borré la caché antes de probar.
Soporte de WPBeginner
Estás usando imágenes WebP si eso es lo que ves al guardar. Dependerá de la herramienta que estés usando, pero hay una redirección WebP para la URL, por lo que mantienes la URL pero muestras la versión WebP de la imagen para evitar errores 404.
Administrador
MOINUDDIN WAHEED
Estaba buscando algún mecanismo para convertir mis imágenes de WordPress a WebP, ya que he visto una gran diferencia en el tamaño de archivo entre las imágenes PNG y JPG y las imágenes WebP.
Tener imágenes WebP definitivamente ayudará a que el sitio web cargue más rápido. Mejorará la velocidad y el rendimiento del sitio web.
Gracias por la guía para convertir las imágenes existentes de WordPress al formato WebP.
Soporte de WPBeginner
You’re welcome, glad you found our guide helpful
Administrador
Jiří Vaněk
Por lo general, genero imágenes WebP en un editor externo. Sin embargo, ¿es una mejor práctica subir imágenes en formato PNG a la web y luego generarlas en WebP? Es decir, ¿es mejor tener ambos formatos para que el navegador elija o no? Me preocupa que alguien todavía esté usando un navegador antiguo que no admita WebP, y entonces esas imágenes no se mostrarán en mi sitio web para ese usuario.
Soporte de WPBeginner
Si deseas específicamente una imagen de respaldo, entonces permitir que los plugins conviertan las imágenes por ti sería la mejor opción. Crear las imágenes WebP con un editor sería la forma recomendada de ahorrar espacio en tu sitio.
Administrador
Jiří Vaněk
Gracias por tu respuesta. Todavía tengo mucho espacio en mi FTP (100 GB), así que, basándome en tu respuesta, prefiero usar un plugin para tener más formatos de imagen en el sitio web, asegurando que funcione bien incluso para navegadores antiguos que no admiten WebP. Sé que quedan muy pocos navegadores de este tipo, pero aún existen. Gracias por el consejo.
emir
Usamos algunas imágenes de WebP en WooCommerce, al hacer una copia de seguridad de WooCommerce en otro servidor, las imágenes WebP no se transfirieron, volvimos al formato JPEG nuevamente.
Soporte de WPBeginner
Gracias por compartir tu experiencia con las imágenes WebP. Si te pones en contacto con el soporte de tu herramienta de copia de seguridad, normalmente hay fragmentos de código u otras formas de solucionar ese problema.
Administrador
Ashikur Rahman
si sigo el paso 1, ¿tendré archivos antiguos en formato jpg/png, verdad? creará un desorden en la carpeta de carga. tienen la opción de eliminar el archivo original, si uso esa opción. ¿romperá las imágenes de mis publicaciones?
y lo más importante, ¿si desactivo/elimino el plugin eww, también se eliminará la imagen webp convertida?
¿qué debo hacer?
Soporte de WPBeginner
El plugin actualmente conserva las imágenes antiguas para los navegadores que no admiten imágenes WebP y solo creará la imagen WebP si tiene un tamaño mejor que el jpg/png. Eliminar el original no romperá tu sitio, pero si la mayoría de tus visitantes usan navegadores antiguos que no admiten WebP, podría romperse para esos usuarios.
Deberás consultar con el soporte del plugin para conocer el estado actual de las imágenes creadas cuando se elimine el plugin.
Administrador
Rebecca
Hola, noto que algunos plugins como wp-optimize permiten una opción para preservar los datos exif para la conversión a webp. ¿Es necesario conservar estos datos?
Gracias de antemano
Soporte de WPBeginner
No es obligatorio, pero es útil para los sitios que usan esa información.
Administrador
Theo
esto es lo que estoy buscando,
Muy útil
Soporte de WPBeginner
¡Nos alegra que nuestra guía te haya sido útil!
Administrador
Kim
¡Muchas gracias por la pronta respuesta!
Soporte de WPBeginner
Glad we could help
Administrador
Kim
Este es un gran consejo, solo 1 pregunta... ¿tendré que ejecutar el optimizador EWWW cada vez que suba una nueva imagen (PNG, JPG)?
Soporte de WPBeginner
The plugin will automate the process for new uploads
Administrador