PNG vs JPG vs WebP — Árbol de decisión práctico

La pregunta del formato aparece constantemente y rara vez obtiene respuesta clara. Casi todas las guías se escudan en “depende” y te dejan igual que estabas. Esta no. Aquí tienes un árbol de decisión basado en las dos cosas que de verdad determinan la elección: qué clase de imagen es y a dónde va.

La respuesta corta

Para el 90% de los casos web, la respuesta es WebP. Si necesitas fallback para navegadores muy antiguos, manda además JPG para fotos y PNG para el resto. Para la mayoría, eso es todo.

El 10% restante es donde importan los detalles — impresión, imágenes animadas, iconos, imágenes editadas repetidamente, diagramas técnicos con texto. Esta guía cubre esos.

El árbol de decisión

¿La imagen necesita transparencia?
├── SÍ
│   ├── ¿Es transparencia binaria (recorte con bordes duros)?
│   │   ├── SÍ → PNG-8 o WebP
│   │   └── NO (bordes suaves, pelo, cristal) → PNG-24 (PNG-32 con alfa) o WebP
│   └── ¿Es para impresión o handoff de diseño? → PNG
│
└── NO
    ├── ¿Es una fotografía o render fotográfico?
    │   ├── Para web → WebP (fallback JPG si hace falta)
    │   └── Para impresión o archivo → JPG calidad 95+, o TIFF
    │
    ├── ¿Es captura, diagrama o mockup UI?
    │   ├── Dominada por texto / alto contraste → PNG o WebP sin pérdida
    │   └── Con regiones tipo foto mezcladas → WebP (con pérdida)
    │
    └── ¿Es animada?
        ├── Web → Vídeo WebM o MP4 (no GIF)
        └── Email → GIF animado o APNG (soporte limitado)

Por qué existe cada formato

JPG está construido para fotografía. Usa chroma subsampling y la transformada discreta del coseno para tirar datos que tus ojos no ven — concretamente, pequeños cambios de color en zonas que ya tienen mucha variación. Funciona de maravilla en fotos y mal en todo lo demás. JPG no soporta transparencia, y muestra artefactos en texto nítido y colores planos.

PNG está construido para gráficos. Usa compresión sin pérdida (DEFLATE), lo que significa que cada píxel queda exactamente como lo hiciste. PNG viene en tres sabores:

• PNG-8: paleta de 256 colores, transparencia de 1 bit. Archivos pequeños, colores limitados.
• PNG-24: 16.7 millones de colores (true color a 24 bits), sin transparencia.
• PNG-32: PNG-24 más canal alfa de 8 bits. El “PNG con transparencia” al que la gente se suele referir.

PNG es excelente para logos, iconos, diagramas, capturas y cualquier imagen con bordes nítidos o regiones de color plano. Es un derroche para fotografía.

WebP está diseñado para reemplazar a los dos, y en gran medida lo hace. Tiene modo con pérdida que compite con JPG (y normalmente le gana) y modo sin pérdida que compite con PNG (y normalmente le gana). Soporta alfa de 8 bits en ambos modos. Ha estado soportado en todos los navegadores evergreen desde 2020.

Comparación concreta de tamaños

Misma fotografía 1600×1067:

Formato	Calidad	Tamaño
PNG-24	N/A (sin pérdida)	3.8 MB
JPG	90	280 KB
JPG	82	175 KB
WebP con pérdida	82	125 KB
WebP sin pérdida	N/A	2.9 MB

Misma foto de producto 1200×1200 sobre fondo transparente:

Formato	Calidad	Tamaño
PNG-32	N/A (sin pérdida)	420 KB
WebP sin pérdida (con alfa)	N/A	340 KB
WebP con pérdida (con alfa)	82	110 KB

Conclusión: WebP con pérdida es dramáticamente más pequeño para fotos y recortes. WebP sin pérdida es modestamente más pequeño que PNG. Casi no hay caso donde PNG gane a WebP en tamaño.

Cuándo mantener JPG

JPG sigue siendo la elección correcta cuando:

• Necesitas máxima compatibilidad con sistemas heredados — instalaciones antiguas de Windows, algunos servicios de impresión, algunos sistemas de gestión documental.
• Produces archivos nativos de cámara (la mayoría disparan JPG o RAW, no WebP).
• Distribuyes imágenes a fotógrafos que esperan JPG.
• Usas un CMS o plataforma que no maneja WebP.

Convertir un JPG de cámara a WebP para entrega web siempre es una buena decisión — mira JPG a WebP. El camino inverso, WebP a JPG, es útil para compatibilidad con herramientas que rechazan WebP.

Cuándo mantener PNG

PNG sigue siendo la elección correcta cuando:

• La imagen se va a editar repetidamente. Cada guardado con pérdida acumula artefactos; PNG no.
• Necesitas la copia archivística de máxima fidelidad, previa a la compresión.
• Produces assets para impresión o handoff de herramienta de diseño.
• Entregas a plataforma sin soporte WebP (raro, pero pasa con algunos clientes de email y sistemas empresariales).
• La imagen es favicon o icono de sistema (PNG, ICO y SVG son los formatos soportados).

Para iconos web en navegadores modernos, SVG gana a PNG en escalabilidad. Para iconos raster a un único tamaño, PNG y WebP valen los dos.

PNG-8 vs PNG-24 vs PNG-32

Confusión frecuente. PNG-8 usa paleta de 256 colores con transparencia opcional de 1 bit. Es sorprendentemente bueno para iconos simples y UI plana — a menudo más pequeño que la misma imagen en PNG-24 y más pequeño que WebP sin pérdida para esos contenidos concretos.

PNG-24 es true color (16.7M colores) sin transparencia. Es lo que obtienes de la mayoría de editores al exportar PNG sin alfa.

PNG-32 es PNG-24 más un canal alfa de 8 bits — 256 niveles de transparencia por píxel. Esto es lo que necesitas para recortes con bordes suaves (pelo, pelaje, cristal, cualquier región semitransparente).

Guardar un icono plano de 256 colores como PNG-32 derrocha espacio. Guardar un recorte de pelo como PNG-8 produce bordes dentados con difuminado. Ajusta el sabor al contenido.

Calidad por tipo de contenido

Guía aproximada, igual en JPG y WebP con pérdida:

Contenido	Calidad	Notas
Foto hero	85-90	Imagen insignia
Foto en cuerpo de texto	80-85	Posts de blog, artículos
Miniatura	75-80	Vistas en rejilla y lista
Foto de producto	85-90	E-commerce, el detalle importa
Captura con texto	90+	El texto necesita bordes nítidos
Foto con texto superpuesto	85-90 + revisar	El texto halonea primero

Para contenido con mucho texto dentro de la imagen, cambia a chroma subsampling 4:4:4 (no el 4:2:0 por defecto) o usa PNG. El texto coloreado en JPG con ajustes por defecto se ve notablemente peor que en PNG.

Errores comunes

Un puñado de equivocaciones recurrentes:

• Guardar capturas como JPG. Las capturas son gráficos, no fotos. JPG a cualquier calidad razonable produce ringing alrededor del texto y halos de color. Usa PNG o WebP sin pérdida.
• Guardar fotos como PNG. PNG es sin pérdida, perfecto para archivo pero produce archivos 10× mayores de lo necesario para entrega. Usa JPG o WebP con pérdida para fotos en web.
• Convertir un JPG con pérdida a PNG esperando mejorar calidad. Convertir a sin pérdida no recupera detalle ya descartado. El PNG solo es un archivo grande con los mismos artefactos.
• Usar GIF para cualquier cosa. GIF es un formato de 1987. Para fotos, cualquier otra cosa le gana. Para animación, el vídeo gana. El único nicho que le queda a GIF son los clientes de email que eliminan los <video>.

La recomendación práctica

Para un proyecto nuevo en 2026:

1. Envía WebP para todo (fotos, gráficos, UI).
2. Envía JPG como fallback para contenido fotográfico en un <picture> si te importa <3% del tráfico.
3. Envía PNG como fallback para imágenes críticas de transparencia si te importa ese mismo caso borde.
4. Guarda los originales en PNG para gráficos y JPG calidad 95+ (o TIFF) para fotos. Re-codifica al formato web en build time, no a mano.

Una herramienta más que merece la pena conocer: Conversión por lotes gestiona la migración de formato en una carpeta en una sola pasada, lo cual importa cuando pasas un sitio legacy a WebP. Todo corre en local en el navegador, así que migrar mil fotos de producto no necesita tocar un servidor de terceros.

La cuestión del formato no es complicada si separas dos decisiones: “qué es la imagen” y “a dónde va”. Responde las dos, y el formato suele ser obvio.