La velocidad de carga de la página puede hacer o deshacer el éxito de tu sitio web empresarial. Cumplir con los vitales básicos del sitio web, como la velocidad de carga de página, te ayuda a clasificar más alto en los resultados de búsqueda, mientras que las páginas lentas pueden hacer que las tasas de conversión del sitio web disminuyan un 4% por cada segundo de tiempo de carga. Dado que las imágenes tienen un efecto importante en el tiempo de carga de la página, optimizar el tamaño de los archivos de imagen puede aumentar significativamente la velocidad del sitio en dispositivos móviles y de escritorio.
Es ahí donde entran en juego las imágenes WebP. Desde que Safari, el navegador web principal del iPhone, comenzó a admitir completamente WebP en 2022, el formato de imagen moderno está más cerca que nunca de convertirse en el formato de foto estándar de la web.
Esta guía te ayudará a decidir si debes utilizar imágenes WebP en tu sitio.
¿Qué es un archivo WebP?
Google desarrolló el formato de archivo WebP en 2010 para ser el tipo de imagen que se carga más rápido en Internet. Combinó las mejores características de los tres tipos de imágenes más populares -JPG, PNG y GIF- en un archivo optimizado de tamaño. Los archivos de imagen WebP admiten características como:
- Transparencia
- Animación
- Compresión de imagen sin pérdida*
- Compresión de imagen con pérdida**
- Metadatos con XMP y EXIF
- Perfil de color (perfil ICC)
*La compresión de imagen con pérdida reduce significativamente el tamaño del archivo disminuyendo la calidad de la imagen. Un algoritmo elimina permanentemente datos de la imagen durante la compresión, empeorando la claridad y los detalles de la imagen. Los JPG son el tipo de archivo con pérdida más reconocible.
**La compresión de imagen sin pérdida reduce mínimamente el tamaño del archivo mientras mantiene la calidad original de la imagen. No se pierde información de la imagen durante la compresión (excepto los metadatos innecesarios de la cámara). Los PNG son el tipo de archivo sin pérdida más reconocible.
Ventajas de los archivos WebP
¿Cuándo y por qué deberías utilizar las características y beneficios de velocidad únicos de WebP? Aquí hay algunas razones y casos de uso óptimo para considerar.
Tipo de archivo nativo de la web
A diferencia de los JPG, que se crearon originalmente para comprimir archivos en cámaras digitales, los WebP se diseñaron específicamente para comprimir gráficos en la web.
Según Oswalt Clemen, director creativo de Embudos Web, «Cualquier cosa que se construya de forma nativa para la web será mejor». Clemen afirma: «Es solo cuestión de tiempo antes de que [WebP] se convierta en el formato predeterminado, especialmente para la fotografía en la web».
Compresión de fotos y capturas de pantalla
Las imágenes WebP comprimidas con pérdida pueden reemplazar a las fotos JPG con tamaños de archivo mejor optimizados gracias a su proceso de compresión con pérdida más avanzado. Esto es especialmente cierto para imágenes más simples con grandes bloques o matices de color y contraste similares.
Un escenario ideal para reemplazar JPG con WebP sería cuando se muestran grupos de imágenes más pequeñas en una página, como fotos de productos, ubicaciones o imágenes no destacadas.
Optimización de imágenes sin pérdida o transparentes
En algunos casos, WebP puede ser una opción de carga más rápida que PNG para gráficos, logotipos e íconos sin pérdida y transparentes.
Los ingenieros de software de Google encontraron que convertir un PNG en WebP resultó en un tamaño de archivo un 45% más pequeño con una calidad de imagen similar. Asegúrate de equilibrar la calidad y los ajustes de esfuerzo para obtener los mejores resultados para tus propósitos.
Reduce el tamaño de archivo de animaciones
Los WebP permiten reducir el tamaño de las animaciones en tu sitio en comparación con los archivos GIF. Un estudio estandarizado de Google afirmó que los GIF animados convertidos en WebP con pérdida fueron un 64% más pequeños, y los WebP sin pérdida fueron un 19% más pequeños.
Además, los WebP ofrecen más profundidad de color y niveles de opacidad que los GIF.
Soporta transparencia en imágenes con pérdida
WebP es el único tipo de imagen que admite imágenes transparentes con compresión con pérdida. Esta característica permite que las fotos, gráficos, GIF y más se compriman a un tamaño más pequeño que los PNG y GIF normalmente permiten.
Otro estudio de Google encontró una disminución del 60-70% en el tamaño del archivo después de reemplazar un PNG transparente sin pérdida con un WebP transparente con pérdida.
Cumple con Google
No es un secreto que Google recompensa a los webmasters que utilizan productos y prácticas recomendadas de Google. Recientemente, los navegadores de Google Chrome comenzaron a guardar automáticamente las descargas de imágenes como archivos WebP.
Este cambio, junto con las recomendaciones comunes de Google Page Speed Insights para «servir imágenes en formatos de próxima generación» como WebP, muestra que Google está impulsando y recompensando la tendencia hacia el uso generalizado de WebP.
Desventajas de los archivos WebP
Las imágenes WebP son una excelente manera de optimizar la velocidad de tu sitio web, pero en algunos casos, es posible que desees optar por un formato de archivo más común.
Puede desdibujar imágenes con alto detalle
Debido a cómo funcionan los diferentes algoritmos de compresión, las imágenes JPG pueden comprimir detalles complejos y colores variados más claramente que los WebP en algunos casos. Por eso, los JPG pueden ser más adecuados para fotos grandes y detalladas de héroe o imágenes destacadas.
Dicho esto, puedes resolver el problema colocando un filtro de color único o en blanco y negro sobre una imagen WebP en Photoshop para estandarizar los colores y el contraste de los píxeles.
No siempre es el tipo de archivo más pequeño
Con cualquier tipo de compresión, debes encontrar un equilibrio entre calidad y tamaño de archivo, ya que afectan inversamente entre sí. A veces, los WebP tienen una peor calidad que un JPG o PNG del mismo tamaño de archivo. En ese caso, mejorar la calidad de la imagen significa que puedes crear un archivo más grande que antes de la compresión.
Cuando te encuentres con este problema, puedes optar por una compresión con pérdida para reducir el tamaño del archivo a expensas de la calidad o simplemente optar por otro tipo de archivo que funcione mejor para esa imagen o gráfico en particular.
Necesita código adicional para ser 100% compatible
«El soporte de navegador para WebP es casi universal ahora, pero la mayoría de nuestra base de usuarios no ha actualizado ni actualizará su navegador hasta que se vean obligados a comprar una nueva computadora», explica Riffner. Esto significa que esos usuarios no podrán ver tus imágenes WebP, por lo que sigue siendo una buena práctica implementar un código de respaldo para WebP para navegadores y dispositivos que no admiten el tipo de archivo.
Los códigos de respaldo utilizan varias variaciones de etiquetas HTML, dando a los navegadores múltiples formas de leer y cargar imágenes. Para una imagen WebP, es mejor agregar una URL de origen de imagen con una versión JPG o PNG del archivo. Si estás utilizando un plugin de optimización de WebP, los códigos de respaldo deben agregarse automáticamente y pueden parecerse al código anterior. Sin embargo, ten en cuenta que múltiples códigos de respaldo podrían anular potencialmente los ahorros de velocidad de página que las imágenes WebP están diseñadas para proporcionar.
No todos los programas de edición admiten WebP
A partir de febrero de 2022, Photoshop puede abrir, editar y exportar archivos WebP, pero aún no convierte fotos no WebP en WebP.
Otros programas populares como GIMP, Picasa y Blender también admiten WebP. Pero ten en cuenta que un software menos común puede no admitir o exportar archivos WebP de forma predeterminada.
WebP vs. Otros Tipos de Archivos de Imagen
Elegir el formato de imagen óptimo para la web depende de muchos factores. Esta tabla compara las características de WebP con otros tipos de archivos populares.
Google ya ha comparado los tamaños de archivo WebP con JPG y PNG anteriormente, pero queríamos realizar nuestra propia prueba de la capacidad de WebP para comprimir archivos de manera eficiente. Así es como diseñamos nuestra prueba para obtener resultados precisos y útiles:
- Seleccionamos cuatro casos de uso clásicos de los dos principales tipos de archivo: una gráfica JPG, una foto JPG, una ilustración PNG y un logotipo PNG transparente.
- Tomamos una medición del tamaño de archivo de la imagen original para cada tipo y nos aseguramos de que todas las imágenes estuvieran en 72 dpi (puntos por pulgada), el estándar web para imágenes.
- Utilizando Sqoosh, comprimimos y convertimos cada imagen original en un WebP con pérdida o sin pérdida, dependiendo de cuál creara el mejor equilibrio entre calidad y tamaño de archivo. Nuestro objetivo era obtener tamaños de archivo finales inferiores a 100 KB, que es el estándar de Google para el tamaño máximo de imagen. Mantuvimos los ajustes de «esfuerzo» en el máximo, lo que significa que la compresión se realizó en su ajuste más lento para obtener mejores resultados.
- Finalmente, analizamos el cambio porcentual del tamaño de archivo para ver los ahorros de velocidad de página que las imágenes WebP proporcionarían para cada caso de uso mientras se mantenía la calidad de la imagen.
Gráfica: JPG vs. WebP
JPG original: 457 KB
WebP con pérdida: 85,9 KB
Resultados: Comprimimos esta gráfica JPG en un WebP con pérdida a una calidad del 90% para una disminución del 81% en el tamaño de archivo con prácticamente ningún cambio en la calidad.
Foto detallada: JPG frente a WebP
Orignal JPG: 1.19MB (1,190KB)
WebP con pérdida: 98,4 KB
Resultados: Utilizamos compresión con pérdida al 22% de calidad para reducir el tamaño de este archivo por debajo de 100 KB para la web, una disminución del 92% en el tamaño de archivo. Logramos esto con una pérdida menor en los detalles de la espuma de las olas, además de un ligero cambio en el color general, ya que el algoritmo WebP redujo el número de variaciones de color en los píxeles.
Ilustración: PNG frente a WebP
PNG original: 9.58KB
WebP sin pérdidas: 3,37 KB
Hallazgos: Hicimos este archivo PNG un 68% más pequeño sin perder ningún detalle utilizando la compresión sin pérdidas de WebP con configuraciones de «esfuerzo» completas.
Logotipo transparente: PNG frente a WebP
Hallazgos: Creamos un tamaño de archivo un 67% más pequeño utilizando compresión WebP sin pérdidas con datos de transparencia conservados para esta imagen
¿Cómo convertir imágenes a WebP?
Puedes utilizar estas herramientas para convertir imágenes WebP a y desde JPG, PNG y otros tipos de archivo:
- Herramientas de compresión y conversión en línea gratuitas como Sqoosh, Cloud Convert o Online Image Converter te permiten convertir imágenes a y desde WebP.
- El software integrado en tu computadora puede convertir de WebP a otros tipos de archivo (ver secciones siguientes para instrucciones).
- La extensión de File Converter para Chrome convierte de WebP a JPG y PNG.
¿Cómo convertir WebP a JPG en Mac?
Después de descargar una imagen WebP a tu computadora Apple, utiliza el botón «Convertir imagen» en Finder para convertir a JPG o PNG en tamaños pequeño, mediano, grande y real.
Para tener más control sobre la calidad de la imagen y el tamaño del archivo, sigue estos pasos para cambiar WebP a JPG o PNG.
- Abre la imagen WebP en la aplicación Preview y haz clic en Archivo > Exportar.
2. En la ventana emergente, selecciona un formato y ajusta la escala de Calidad para cambiar el tamaño del archivo antes de guardar.
¿Cómo convertir WebP a JPG en Windows/PC?
En Windows y PCs, utilizarás el programa Paint para convertir una imagen WebP descargada a JPG. Sigue estos pasos.
1. Encuentra tu imagen WebP en el explorador de archivos y haz clic derecho en Abrir con > Paint.
2. En Paint, haz clic en Archivo > Guardar como > JPEG.
3. Asigna un nombre a tu archivo y guárdalo como tipo de archivo JPEG.
¿Cómo subir archivos WebP a WordPress?
Si estás subiendo imágenes WebP directamente a tu biblioteca de medios de WordPress, el proceso es el mismo que para cualquier otra imagen. Simplemente sube la imagen WebP, agrega un título de imagen y texto alternativo.
Para convertir imágenes JPG y PNG existentes en WebP de forma automática en WordPress, un plugin es la mejor opción. Puedes configurar la calidad de imagen deseada en el plugin WebP y él decidirá qué imágenes optimizar según el tamaño del archivo. También agregará automáticamente un código de respaldo para navegadores que no admiten WebP.
Aquí hay algunos de los plugins de conversión WebP recomendados para WordPress:
- EWWW Image Optimizer (Optimizador de imágenes EWWW)
- Imagify
- ShortPixel Image Optimizer (Optimizador de imágenes ShortPixel)
- Smush
- TinyPNG
¿Cómo probar la velocidad de carga de página?
Utiliza PageSpeed Insights para determinar qué páginas lentas podrían beneficiarse de la optimización de imágenes WebP, o prueba los efectos de velocidad de página de tus WebP recién implementados.
- Ve a PageSpeed Insights e ingresa tu URL en la barra de búsqueda.
- Busca mensajes de error específicos sobre imágenes en la sección «Oportunidades». A continuación, se muestran algunos ejemplos de mensajes de error y su significado:
- Servir imágenes en formatos de próxima generación: Esto muestra qué imágenes podrían convertirse en WebP u otros tipos de archivos de imagen modernos.
- Dimensionar imágenes correctamente: Esto comparte qué imágenes podrían reducirse en ancho y alto para una carga más rápida.
- Diferir imágenes fuera de pantalla: Esto sugiere imágenes que podrían cargarse de forma diferida para una velocidad de página general más rápida.
- Codificar imágenes de manera eficiente: Esto se refiere a imágenes que pueden optimizarse con otras técnicas.
Preguntas Frecuentes sobre WebP
¿Cómo detener que Chrome guarde imágenes como WebP?
Es posible que hayas notado que las imágenes se guardan automáticamente como WebP en los navegadores de Chrome últimamente. Google implementó este estándar después de descubrir que los archivos WebP eran un 25% a 34% más pequeños que otros tipos de archivo comunes. Puedes forzar a Chrome a guardar imágenes WebP como JPG o PNG de tres maneras:
- Obtén una extensión de Chrome como Save Image as Type, que permite a los usuarios guardar imágenes como JPG, PNG, etc. con un clic derecho.
- Descarga la imagen como WebP, luego ábrela en tu aplicación de foto preferida. Vuelve a guardar o exporta la imagen en el tipo de archivo deseado.
- Descarga la imagen como WebP y conviértela a otro tipo de archivo en Sqoosh, Online Image Converter u otro sitio web de conversión de imágenes.
¿Se utiliza ampliamente WebP?
El 7,8% de todos los sitios web utilizan imágenes WebP, y el 96% de los navegadores admiten completamente WebP, con otro 2% de navegadores que admiten parcialmente el tipo de imagen.
¿Qué tipos de archivo admiten transparencia?
Los formatos de archivo de imagen que admiten transparencia de canal alfa incluyen PNG, WebP, GIF, TIFF, TGA y JPEG 2000.
¿Cuál es el ancho y alto máximo de una imagen WebP?
Una imagen WebP puede tener dimensiones de píxeles de como máximo 16383 x 16383.
¿Cuál es el mejor tamaño de archivo de imagen para sitios web?
Se considera una buena práctica mantener los tamaños de archivo de imagen por debajo de 100 KB en la web.