PNG vs JPG vs WebP

Tres formatos, tres trabajos distintos. La regla general cabe en una línea; las excepciones son donde la gente pierde calidad o desperdicia megabytes.

La regla en una línea

Las fotografías van en JPG o WebP. Las capturas, los logotipos, el dibujo lineal y todo lo que necesite transparencia van en PNG o WebP. Si solo recuerdas una cosa: la pregunta no es «qué formato es mejor», sino «¿esta imagen tiene degradados suaves o zonas planas de color sólido?».

Qué hace realmente cada formato

JPG (JPEG)

Con pérdida. Convierte la imagen en una representación de frecuencias, descarta el detalle al que tu ojo es menos sensible y guarda el resto. Por eso es tan pequeño en fotos y tan malo con el texto: los bordes nítidos entre dos colores sólidos son justo la información de alta frecuencia que descarta, y eso aparece como esa pelusa gris alrededor de las letras en una captura comprimida. JPG no admite transparencia, y cada vez que lo vuelves a guardar la pérdida se acumula.

PNG

Sin pérdida y con transparencia alfa completa. Comprime buscando repeticiones, lo que lo hace excelente con el color plano: una captura de interfaz o un logotipo pueden salir muchísimo más pequeños que el JPG equivalente y perfectamente nítidos. En una fotografía, donde casi no hay dos píxeles vecinos idénticos, ese mismo enfoque produce un archivo varias veces mayor que el JPG sin ninguna ventaja visible.

WebP

Los dos, en un mismo contenedor: un modo con pérdida pensado para fotos y un modo sin pérdida pensado para gráficos, más transparencia en ambos. El propio estudio comparativo de Google sitúa el WebP sin pérdida en torno a un 26 % por debajo de PNG, y el WebP con pérdida entre un 25 % y un 34 % por debajo de JPG con calidad equivalente (WebP compression study). Todos los navegadores actuales —Chrome, Firefox, Safari, Edge— lo descodifican.

Cómo elegir, según qué sea la imagen

ImagenMejor opciónPor qué
Foto de cámara para una webWebP, con JPG como alternativaLos degradados suaves comprimen bien; nadie ve el detalle descartado.
Captura de una app o de un textoPNG o WebP sin pérdidaLos bordes nítidos sobreviven; JPG los emborrona.
Logotipo, icono o cualquier cosa transparentePNG o WebPJPG no tiene canal alfa y rellena la transparencia con blanco.
Adjunto de correo a un desconocidoJPGLa compatibilidad con programas de escritorio antiguos importa más que ese último 30 % de tamaño.
Envío a imprenta o copia maestra de archivoPNG (o el RAW/TIFF original)Sin pérdida: no se degrada en cada edición sucesiva.

Cuatro errores que cuestan calidad de verdad

  • Guardar una foto como PNG «para conservar la calidad». Sin pérdida conserva lo que le des. Si el origen ya era un JPG, convertirlo a PNG no restaura nada y multiplica el tamaño del archivo.
  • Volver a guardar el mismo JPG una y otra vez. Cada guardado vuelve a cuantizar la imagen. Edita desde el original y exporta una sola vez.
  • Comprimir cuando lo que toca es redimensionar. Una foto de 6000 px de ancho mostrada en una columna de 600 px tiene 100 veces más píxeles de los necesarios. Redimensiona primero y comprime después, en ese orden. Redimensionar la imagen, then comprimirla.
  • Perseguir la calidad 100. La parte alta del rango de calidad de JPG no compra casi ninguna mejora visible y cuesta mucho tamaño. Alrededor de 80 es donde la mayoría de las fotos dejan de distinguirse del original.

Pruébalo con tu propio archivo

Los consejos sobre formatos son generales; tu imagen es concreta. Una ilustración plana y una foto nocturna con ruido no se comportan igual. La forma más rápida de salir de dudas es pasar el mismo archivo por ambos y comparar las cifras: convertir a WebP, convertir a JPG, convertir a PNG. The compresor también incluye una escala de calidad que codifica tu archivo con varios ajustes a la vez e informa de los tamaños reales, medidos sobre tu imagen y no sobre el banco de pruebas de otro.

Todo ocurre en tu navegador, así que puedes hacerlo con imágenes que nunca subirías a una web de pruebas. De eso va exactamente Kobra IMG.

Revisado por última vez el . ¿Algo está desactualizado o es incorrecto? Avisa a Kobra IMG.