WebP vs PNG vs JPG: ¿qué formato debe usar tu sitio web?

WebP vs PNG depende de a dónde va la imagen. En un sitio web, WebP suele ganar: Google reporta que WebP sin pérdida pesa alrededor de un 26% menos que PNG, admite transparencia y todos los navegadores principales actuales lo muestran. Para archivos que mandas por correo, subes a formularios o envías a otras personas, PNG y JPG son más seguros, porque la compatibilidad fuera de los navegadores todavía es irregular.

¿Qué es el formato WebP?

WebP es un formato de imagen desarrollado por Google y anunciado por primera vez en 2010. Un solo formato cubre varios trabajos que antes requerían archivos distintos:

• Compresión con pérdida para fotos, similar a JPG.
• Compresión sin pérdida para gráficos y capturas de pantalla, similar a PNG.
• Transparencia (un canal alfa) en ambos modos.
• Animación, como reemplazo más ligero del GIF.

Los archivos terminan en .webp. Chrome, Edge, Firefox y Safari los muestran todos; Safari se sumó en la versión 14. Cualquier visitante con un navegador actualizado ve las imágenes WebP sin que tengas que hacer nada especial.

Seguramente ya te has topado con WebP. Muchos sitios lo sirven automáticamente, y por eso una imagen que guardas de una página web a veces se descarga como .webp aunque pareciera una foto normal. Nuestra guía sobre qué es un archivo WebP explica cómo abrirlos y editarlos.

WebP vs PNG: cuál pesa menos y cuándo usar cada uno

Según las cifras de Google, WebP sin pérdida pesa alrededor de un 26% menos que PNG. Ambos son sin pérdida, así que obtienes los mismos píxeles en menos espacio. Para gráficos con transparencia, WebP con pérdida puede ir mucho más lejos: Google dice que suele dar archivos unas tres veces más pequeños que el PNG equivalente.

Usa WebP en lugar de PNG cuando:

• La imagen está en tu propio sitio web, como un logo, una ilustración, un producto recortado o una captura de pantalla.
• Quieres transparencia sin el peso de un PNG.
• La velocidad de la página importa y la imagen es grande.

Quédate con PNG cuando:

• Vas a enviar el archivo a otra persona, adjuntarlo a un documento o subirlo a un formulario que indica los tipos aceptados.
• Necesitas una copia maestra para editar en un software que puede no abrir WebP.
• El gráfico es un logotipo o ícono que podrías servir como SVG, que a menudo pesa aún menos y se mantiene nítido con cualquier tamaño.

WebP con pérdida y transparencia va bien con productos recortados e ilustraciones de bordes suaves. Para capturas de pantalla y maquetas de interfaz que deben ser exactas al píxel, WebP sin pérdida mantiene el texto nítido, igual que PNG. Conoce más sobre las fortalezas de PNG en qué es un archivo PNG.

WebP vs JPG para fotos

En fotos, Google midió que WebP con pérdida pesa entre un 25 y un 34% menos que JPG comparables con la misma puntuación de calidad SSIM. En una página con una docena de fotos de productos o una imagen principal grande, eso se traduce en una carga más rápida, sobre todo con datos móviles.

JPG todavía tiene dos ventajas. Abre en todas partes, desde visores de fotos viejos hasta impresoras, y es la respuesta segura para cualquier portal de carga. Además, los codificadores JPG modernos son buenos, así que un JPG bien comprimido y con las dimensiones correctas se acerca bastante. Si solo puedes hacer una cosa, darle a la foto el tamaño correcto vale más que cambiar de formato. Una foto de 4000 píxeles mostrada a 800 píxeles de ancho desperdicia muchos más bytes que la elección de formato.

Un enfoque práctico para un sitio: conserva los originales en JPG o PNG y publica versiones WebP con el tamaño del ancho en que se muestran. La comparación general de PNG vs JPG ayuda cuando eliges el formato maestro.

Comparación rápida

• Peso en la web: WebP suele ser el más ligero, luego JPG para fotos o PNG para gráficos.
• Transparencia: WebP y PNG sí, JPG no.
• Animación: WebP sí, PNG y JPG no (en su lugar, GIF o video).
• Compatibilidad fuera de los navegadores: JPG la mejor, PNG muy cerca, WebP la más débil en apps antiguas y formularios de carga.
• Edición sin pérdida: PNG o WebP sin pérdida.

Cómo convertir PNG o JPG a WebP

Para unos cuantos archivos, una herramienta en el navegador es la vía más rápida. El convertidor de imagen a WebP funciona localmente en tu navegador, así que las imágenes no se suben a ningún lado.

1. Si la imagen es más grande de lo que se mostrará, cambia su tamaño primero. La herramienta Cambiar tamaño de imagen fija un ancho exacto y mantiene la proporción.
2. Abre el convertidor a WebP y agrega tus archivos JPG o PNG.
3. Convierte y descarga. Comprueba que las zonas transparentes sigan siendo transparentes y que el texto de las capturas de pantalla esté nítido.
4. Si el WebP sigue pesando más de lo que quieres, vuelve a comprimirlo con un tamaño objetivo en KB.
5. Sube el WebP a tu sitio y actualiza las referencias a la imagen.

Para fotos, un ajuste de calidad con pérdida de alrededor de 75 a 85 es un punto de partida razonable. Compara el resultado con el original a tamaño completo y baja más la calidad solo si no ves diferencia.

Muchos sistemas de gestión de contenido y CDN de imágenes crean copias WebP automáticamente. Si el tuyo lo hace, quizá solo necesites subir un buen JPG o PNG y dejar que se encargue del resto.

Cómo comprobar que tu sitio sirve WebP

Tu CMS o CDN puede decir que crea WebP, pero vale la pena confirmarlo. En Chrome o Edge, abre la página, presiona F12 para abrir las herramientas para desarrolladores y cambia a la pestaña Red. Recarga la página y filtra por Img. La columna Tipo muestra el formato en que llegó cada imagen, y la columna Tamaño muestra cuántos bytes ocupó.

Si todavía ves archivos JPG o PNG pesados ahí, las copias WebP no se están sirviendo. Las causas comunes son un plugin de caché que sirve HTML viejo, imágenes agregadas con código personalizado que se salta el CMS, o un tema que tiene las URL de las imágenes fijas en el código. Corrige esas páginas primero, empezando por las imágenes más pesadas.

¿Todas las imágenes de tu sitio web deberían ser WebP?

La mayoría pueden serlo. Conviene conocer algunas excepciones:

• Los logotipos e íconos simples suelen quedar mejor como SVG.
• Los archivos que la gente debe descargar, como la foto de un kit de prensa o un gráfico imprimible, son más amigables como JPG o PNG.
• Las imágenes para compartir en redes (la imagen Open Graph que aparece cuando se comparte un enlace) son más seguras en JPG o PNG, porque no controlas todas las apps que las leen.
• Si tienes que dar soporte a un navegador muy antiguo, sirve un JPG o PNG de respaldo con el elemento HTML picture .

Quizá también veas que se menciona AVIF. Es un formato más nuevo que puede pesar todavía menos que WebP y tiene amplia compatibilidad en los navegadores actuales. WebP sigue siendo la opción predeterminada más fácil porque más herramientas y plataformas lo aceptan.

Cómo abrir o convertir un archivo WebP que descargaste

Las versiones actuales de Fotos de Windows y Vista Previa de Mac abren archivos WebP, y cualquier navegador muestra uno si lo arrastras a una pestaña. Los problemas empiezan cuando subes el archivo a un lugar que solo acepta JPG o PNG, o lo editas en un programa antiguo.

La solución es una conversión rápida. El convertidor de WebP a PNG o JPG maneja archivos sueltos o por lotes. Elige PNG si la imagen tiene transparencia o texto nítido, y JPG para una foto en la que quieres un archivo más ligero. Cambiar la extensión no convierte nada, así que siempre exporta una copia real.

Preguntas frecuentes