JPEG, PNG, SVG, GIF: estos formatos de imagen tradicionales seguramente te resultarán familiares.
Estas son las más utilizadas en los sitios web. Detrás de ellas, un competidor está ganando cada vez más popularidad.
Hay que reconocer que tiene lo necesario para resultar atractivo. Este formato de imagen ayuda a acelerar los tiempos de carga de la página. comprimiendo drásticamente tus imágenes JPEG, PNG o GIF.
¿Conoces el formato WebP? Al final de este artículo, no te resultará desconocido. Además, aprenderás a usar y mostrar imágenes WebP en WordPress, con y sin plugin.
¿Qué es el formato WebP?
WebP: un formato ligero para acelerar la web.
WebP es un formato de imagen diseñado por Google que tiene como objetivo crear "Imágenes más pequeñas y ricas" para acelerar la web, los detalles del motor de búsquedaGracias a WebP, Tus imágenes tienen un mayor grado de compresión. (hasta un 30% en promedio en comparación con el
JPG), sin pérdida de calidad.
Además de intentar acelerar la web, el formato WebP, lanzado en 2010, también pretende reemplazar formatos de imagen más tradicionales como:
- JPEG (o JPEG 2000), un formato estándar y universal;
- PNG, que maneja la transparencia;
- Los GIF se utilizan para crear imágenes animadas;
- SVG, un formato de dibujo vectorial.
Al igual que WordPress, WebP es de código abierto. Su código fuente es abierto y modificable. Como indica Google en su sección de preguntas frecuentes dedicada a WebP, "Cualquiera puede usar el formato y sugerir mejoras.".
¿Cuáles son las características del formato WebP?
Si analizamos con más detalle el aspecto técnico, aquí presentamos algunas características clave de WebP.
En primer lugar, WebP permite la compresión de imágenes con (con pérdida) y sin pérdida de calidad (sin pérdida).
"La compresión WebP con pérdida utiliza codificación predictiva para codificar una imagen, el mismo método utilizado por el códec de vídeo VP8 para comprimir fotogramas clave en vídeos, Google lo explica. El código predictivo utiliza los valores de los bloques de píxeles vecinos para predecir los valores de un bloque y luego codifica solo la diferencia.
En con pérdidasReducir el tamaño del archivo es la prioridad, pero la pérdida de calidad será mayor que en sin pérdidas (lo que conservará un archivo de imagen ligeramente más grande).
En el contexto de la compresión sin pérdidas (sin pérdidas), "La compresión WebP sin pérdidas utiliza fragmentos de imágenes vistas previamente para reconstruir píxeles completamente nuevos."Google especifica.
Además, WebP también es interesante porque es capaz de:
- Tomar las riendas de la transparenciaEl tamaño de un archivo PNG convertido a WebP con pérdida es, por ejemplo, 3 veces menor;
- gestión de imágenes animadas, como lo hace el formato GIF, por ejemplo. "Los GIF animados convertidos a WebP con pérdida de calidad son un 64 % más pequeños, mientras que los archivos WebP sin pérdida de calidad son un 19 % más pequeños."explica Google.
¿Por qué usar WebP?
Aunque todavía se utiliza mucho menos en sitios web que formatos más clásicos como JPEG o PNG, WebP está ganando popularidad y experimentando un crecimiento significativo en los últimos meses.
Según las cifras facilitadas por la organización W3Techs, su uso se duplicó entre diciembre de 2021 y diciembre de 2022. :
Cada vez más webmasters se sienten atraídos por la principal ventaja de este formato: gracias a la mayor compresión que permite en las imágenes, las páginas de su sitio web se cargan más rápido.
En este sentido, los resultados de los estudios internos realizados por Google son reveladores:
- Las imágenes WebP son Entre un 25% y un 34% más claros que los de JPG. ;
- WebP permite una tasa de compresión hasta un 23 % superior al formato PNG..
La mejora en la compresión es significativa, todo ello sin que se perciba ninguna diferencia apreciable a simple vista. Una imagen WebP tiene exactamente el mismo aspecto visual que una imagen JPEG o PNG.Mirar:
Con imágenes más pequeñas, las páginas de tu sitio web de WordPress se cargarán más rápido. Este es un aspecto que debes tomar muy en serio.
Las imágenes son el tipo de contenido más utilizado en una página web., por delante de los archivos JavaScript, CSS y HTML. ¡En algunos casos, pueden incluso representar casi la mitad del tamaño total de una página web!
Por lo tanto, es esencial optimizarlos, algo que WebP permite. Gracias a ello:
- Te encargas de la experiencia del usuario.Tus visitantes quieren navegar por las páginas rápidamente; de lo contrario, abandonarán tu sitio rápidamente y aumentarán tu tasa de rebote, lo que envía una mala señal a Google. En promedio Tu tasa de conversión ha disminuido un 4,42%. por cada segundo de tiempo de carga adicional;
- Estás intentando adaptarte (en parte) a Señales Web Esenciales (Elementos fundamentales de la Web), que el algoritmo de Google tiene en cuenta. Las métricas Core Web Vitals se centran especialmente en la velocidad de carga de la página. Si es muy lenta, esto puede afectar a su posicionamiento en los resultados de búsqueda de Google.
Para conocer la velocidad de carga de tu página y obtener sugerencias para mejorarla, utiliza una herramienta de medición del rendimiento como Google Insights Página velocidad, Pingdom Tools ou WebPageTest.
¿Qué navegadores son compatibles con el formato WebP?
Si WebP está ganando cada vez más adeptos, es también porque su compatibilidad con los principales navegadores del mercado ha mejorado enormemente con el tiempo.
Inicialmente, por ejemplo, no era compatible con Safari, el navegador de Apple, lo que pudo haber dificultado su adopción. En el momento de escribir este artículo, esto ya no es así.
Actualmente, las versiones más recientes de la mayoría de los navegadores son compatibles con WebP. Este es el caso, por ejemplo, de:
- Google Chrome (ordenador y dispositivo móvil: teléfono inteligente o tableta);
- Firefox (ordenador y móvil);
- Opera (ordenador y móvil);
- Microsoft Edge;
- Safari.
Según el sitio web Can I Useque proporciona información actualizada sobre la compatibilidad con tecnologías web en diferentes navegadores, El formato WebP es compatible con el 97% de los navegadores utilizados por los usuarios de internet. :
Aún hay algunos detalles que debes saber:
- Internet Explorer no es compatible con WebP. ;
- Safari es totalmente compatible con WebP a partir de la versión 16.0 en ordenadores de escritorio.Para las versiones 14 a 15.6, la compatibilidad es parcial: el usuario debe tener instalado macOS Big Sur o superior en su equipo.
¿WordPress admite de forma nativa el formato WebP?
Acabas de ver la compatibilidad con WebP en los navegadores web, pero ¿qué hay de la adopción de WebP en WordPress?
Desde julio de 2021 y el lanzamiento de la versión 5.8 de WordPress, el CMS (Sistema de Gestión de Contenidos) más utilizado en todo el planeta, es compatible con WebP.
En términos prácticos, esto significa que puedes Descarga y sube imágenes WebP desde tu biblioteca multimedia de WordPress.siempre que se hayan convertido previamente a este formato (su servidoralojamiento (Por cierto, también debería ser compatible con WebP).
Por el momento, WordPress aún no permite generar imágenes WebP de forma predeterminada. tan pronto como el usuario suba imágenes JPEG.
Se suponía que esta función se integraría de forma predeterminada en el núcleo de WordPress con el lanzamiento de WP 6.1 en noviembre de 2022. Pero su desarrollo se detuvo en el último momento.
Los principales desarrolladores del CMS querían que la opción no estuviera activada por defecto, lo cual no ocurría en su estado actual.
Sin embargo, para cuando lea este artículo, es posible que la compatibilidad con el formato WebP ya esté integrada en el núcleo de WordPress.
Si aún no lo has hecho, tendrás que convertir tus imágenes al formato WebP para poder utilizarlas en WordPress.
Descubre ahora cómo hacerlo con y sin un plugin, y las diferencias entre estos dos tipos de uso.
¿Cómo usar imágenes WebP en WordPress sin un plugin?
Para convertir manualmente tus imágenes a WebP en WordPress, tienes dos opciones principales.
Opción n.º 1: Utilizar una utilidad de línea de comandos
La opción n.° 1 es la más técnica. Como explica Google, primero es posible utilizar la utilidad de línea de comandos WebP para convertir tus archivos de imagen personales al formato WebP.
Esto implica que te sientes cómodo con el desarrollo y la escritura de líneas de comando.
La ventaja es que puedes convertir todos tus archivos JPEG de forma masiva, utilizando una sola línea de texto. El procedimiento varía según el sistema operativo que utilices (Windows, Linux/macOS):
Para su información, Google proporciona más detalles sobre el procedimiento en su documentación.
Opción n.º 2: Utilizar una herramienta/software específico.
La segunda solución, más asequible para usuarios principiantes o intermedios, consiste en utilizar un software o una herramienta en línea capaz de convertir los archivos de imagen a formato WebP.
Aquí tienes algunos convertidores de archivos WebP que podrían ayudarte:
- Webponize, una aplicación gratuita para macOS para convertir al formato WebP. Su equivalente para Windows es WebPconv ;
- Convertio (gratis) ;
- EZGIF (gratis) ;
- la extensión Chrome Guardar imagen como tipo (gratis). Permite guardar una imagen en formato WebP;
- Software Adobe Photoshop (pagado) y Gimp (gratis) te permite exportar imágenes en formato WebP para WordPress;
- Convertidor en línea (gratis).
Elige uno de los servicios ofrecidos anteriormente y, a continuación, convierte la imagen que prefieras al formato WebP. El archivo resultante tendrá la extensión .webp (por ejemplo, miimagen.webp).
A continuación, accede a la interfaz de administración de WordPress para subir la imagen convertida a tu biblioteca multimedia. Para ello, ve al menú Multimedia > Añadir nuevo.
Sube tu imagen arrastrándola y soltándola en el área designada:
Tu imagen ya está en tu biblioteca multimedia. Puedes usarla en cualquier tipo de contenido personalizado (artículo, página, etc.). El navegador del usuario la mostrará automáticamente en formato WebP, si lo admite.
Si utiliza El editor Gutenberg en WordPressTambién puedes arrastrar y soltar una imagen directamente en el contenido que elijas, por ejemplo, en una entrada de blog que estés escribiendo. WordPress añadirá automáticamente la imagen a tu biblioteca multimedia. ¡Una excelente manera de ahorrar tiempo!
Si bien este método es funcional y eficaz, tiene dos problemas principales:
- Te "obliga" a salir de la interfaz de WordPress para convertir tus archivos.Hay que manejar varias pestañas a la vez, lo que ralentiza el proceso de edición;
- No permite convertir a WebP las imágenes que ya están presentes en tu sitio web..
Con una prórroga, este tipo de inconvenientes menores son cosa del pasado. La pregunta sigue siendo: ¿cuál elegir y cómo proceder? Más información a continuación.
¿Cómo mostrar imágenes WebP en tu sitio web usando un plugin?
Una extensión WebP para WordPress es capaz de convertir a formato WebP todas las imágenes nuevas que subas, así como las que ya estén presentes en tu biblioteca de medios.
Para ti, nada cambia: sigues añadiendo tus imágenes sobre la marcha, en el formato que prefieras, y el plugin WebP de WordPress se encarga de la conversión automáticamente.
Si el navegador de su visitante es compatible con WebP, se mostrará la versión WebP de la imagen. De lo contrario, se utilizará el formato de imagen original (JPEG, PNG, GIF).
El directorio oficial de plugins de WordPress ofrece alrededor de diez extensiones para empezar. Entre las que cuentan con más de 100.000 instalaciones activas, encontrarás, por ejemplo:
- Optimizador de imágenes EWWW;
- Aplastar;
- Imaginar;
- Optimizador de imágenes ShortPixel;
- Convertidor para medios;
- WebP Express.
Entonces, ¿cuál deberías elegir? ¿Smush? ¿ShortPixel? ¿Imagify? Para los fines de esta prueba, presentaremos la configuración de tres de ellos:
- Imagínatelo, porque es una solución hecha en Francia;
- EWWW Image Optimizer, que es el más popular junto con Smush (más de 1 millón de instalaciones activas);
- Converter for Media, uno de los mejor valorados (4,9 de 5 estrellas).
El equipo dedicado a cargo de la Rendimiento en WordPress También ofrece una extensión, Laboratorio de rendimientopara mejorar el rendimiento de tu sitio. En particular, ofrece un módulo para crear una versión WebP de cada nueva imagen JPEG que subas.
Opción 1: Convertir imágenes WebP en WordPress usando el plugin Imagify.
Desarrollado y mantenido por el equipo de WP Media, que también ofrece el plugin de almacenamiento en caché WP Rocket, Imagify Es una extensión que te permite optimizar tus imágenes comprimiéndolas, sin pérdida de calidad.
Entre sus características, también ofrece una opción para convertir sus archivos a formatos de próxima generación (formatos de próxima generación) como WebP en WordPress.
Para ello, comience por instalar y activar el complemento a través del menú Extensiones > Agregar.
Tras registrar la clave API obtenida en tu cuenta de Imagify (es un proceso muy rápido que solo requiere unos pocos clics), configura los ajustes de optimización para el formato WebP en WordPress.
Ve a Configuración > Optimización. En la sección llamada "Optimización, formato WebP", marca las siguientes casillas:
- "Crea versiones WebP de tus imágenes" para que Imagify pueda encargarse de ello automáticamente por usted;
- "Mostrar imágenes en formato WebP en el sitio web" para indicarle al complemento que ofrezca versiones WebP a los navegadores web que las admitan. Por defecto, Imagify reemplazará sus etiquetas. por etiquetas Esta es la solución que recomienda.
Si esto provoca un error en su sitio, seleccione el botón de opción "Usar reglas de reescritura" en su archivo .htaccess.
Recuerda guardar la configuración. Para ello, haz clic en el botón "Guardar cambios" que se encuentra en la parte inferior de la página.
Posteriormente, también puede optimizar en masa (optimización masivaOptimiza todas las imágenes de tu sitio web accediendo a Medios > Optimización masiva. De esta forma, la configuración WebP de WordPress se aplicará a toda tu biblioteca multimedia con un solo clic.
Imagify es un plugin freemium para WordPress. Su versión gratuita está limitada a la optimización de 20 MB al mes, o aproximadamente 200 imágenes. Los planes premium varían desde 4,99 €/mes (para 500 MB) hasta 9,99 $/mes (ilimitado).
Opción 2: La extensión EWWW Image Optimizer
EWWW Image Optimizador Es uno de los plugins de optimización de imágenes más populares del directorio oficial de WordPress. Al igual que Imagify, comprime y optimiza el tamaño de tus imágenes para que tus páginas carguen más rápido.
No impone ningún límite de tamaño para el procesamiento de sus imágenes. y cuenta con la característica única de comprimir tus imágenes en tu servidor (sin necesidad de clave API).
Tras activar la extensión, diríjase a la pestaña "General" del menú de configuración (en Configuración > EWWW Image Optimizer).
En la opción "Conversión a WebP", marque la casilla correspondiente para convertir sus imágenes a este formato:
De ahora en adelante, cada vez que suba una nueva imagen a tu sitio de WordPressEWWW Image Optimizer lo generará en formato WebP.
Si quieres convertir todos los archivos de tu biblioteca multimedia a la vez, ve a Multimedia > Optimización masiva. Marca la casilla "Solo WebP" y listo.
¿No te convence EWWW Image Optimizer, sobre todo por su interfaz? Prueba la versión gratuita de ShortPixel o Smush, por ejemplo.
Opción 3: Mostrar imágenes WebP en WordPress usando Converter for Media
A diferencia de Imagify y EWWW Image Optimizer, que permiten optimizar el tamaño de las imágenes (WebP es una opción entre otras), Convertidor para medios Está específicamente dedicada a una acción precisa: Reemplace sus archivos de imagen estándar (JPG, PNG, GIF) con sus versiones en formato WebP.en WordPress.
Tras activar esta extensión WebP para WordPress, la conversión a WebP estará activada por defecto.
Sin embargo, puede ajustar la configuración mediante dos pestañas, accesibles en Configuración > Convertidor para medios:
- “Configuración general” La opción (Ajustes generales) permite, por ejemplo, elegir el tipo de compresión (desde compresión con pérdida hasta compresión sin pérdida). También puede seleccionar los directorios donde se convertirán a WebP los archivos que se encuentren allí (por ejemplo, Descargas / Plugins / Temas).
- “Configuración avanzada” (Ajustes avanzados) te permite controlar qué archivos convertir a WebP en tu WordPress, el método de carga de imágenes y funciones adicionales (por ejemplo, la eliminación automática de archivos en formatos de salida mayores que el original).
En su versión Pro, WebP Converter for Media también ofrece conversión a formato AVIFEste formato, que surgió en 2019, ofrece niveles de compresión aún mayores que WebP. Sin embargo, actualmente no cuenta con un amplio soporte por parte de la mayoría del software, incluidos los navegadores web.
¿Cómo se puede verificar que las imágenes se hayan convertido correctamente al formato WebP?
En principio, independientemente del plugin que elijas, tus imágenes se convertirán al formato WebP. Para comprobarlo, realiza una sencilla operación en tu pantalla.
Después de agregar una imagen a una entrada de blog o a una página que describa sus servicios, ábrala en una nueva pestaña del navegador haciendo clic con el botón derecho sobre ella:
Si su extensión termina en webp en la barra de búsqueda, todo ha funcionado correctamente:
WebP y WordPress: un resumen
Utilizar el formato WebP en WordPress es una excelente manera de comprimir las imágenes sin que el usuario note una pérdida de calidad. Además, mejora la velocidad de carga de la página y optimiza la experiencia del usuario.
Dado que los navegadores web ofrecen cada vez más soporte para el formato WebP, este podría incluso integrarse de forma nativa en el núcleo de WordPress durante el lanzamiento de una de sus próximas versiones principales.
Hasta que se produzca dicho desarrollo, utilizar un plugin es la forma más sencilla y rápida de convertir tus imágenes a WebP.
Puedes:
- utiliza un plugin todo en uno como Imagify.Esto te ayudará a habilitar el formato WebP y a optimizar el tamaño y el peso de tus imágenes. Si este plugin no satisface tus necesidades, prueba con alternativas como EWWW, ShortPixel o Smush, por nombrar solo algunas.
- Opta por una extensión específica para WebP en WordPress, como Converter for Media..
Si, a pesar de los consejos y explicaciones presentados en este artículo, aún necesita ayuda para implementar el formato WebP en WordPress, El equipo de expertos de WP Maintenance está a su servicio..
Estamos disponibles los 7 días de la semana para brindarle asistencia personalizada. Contáctenos para más información.
