PNG vs WEBP

Dos formatos sin pérdidas pero de generaciones distintas

PNG (1996) es el estándar lossless universal: imagen perfecta, transparencia completa, soportado en absolutamente todo. WebP (Google, 2010) es el formato moderno lanzado para reemplazar PNG/JPG con eficiencia muy superior usando técnicas heredadas del codec de vídeo VP8.

Para la web moderna, WebP es la elección óptima: ahorra ancho de banda 25-35% sobre PNG, mejora Core Web Vitals (LCP), soporta transparencia, animación y opcionalmente compresión con pérdidas. Soportado en todos los navegadores modernos desde 2020 (incluyendo Safari 14+). PNG sigue siendo imprescindible para fallback de compatibilidad antigua, edición no destructiva y ecosistemas que aún no soportan WebP.

Cuándo elegir PNG

1. Compatibilidad universal absoluta: PNG funciona desde 1996 en cualquier dispositivo, software, sistema operativo. WebP requiere navegadores/lectores modernos (97%+ cobertura en 2026 pero no 100%).

2. Edición continua no destructiva: PNG lossless preserva calidad bit-perfect en cada save. Usar PNG durante el flujo de edición evita degradación. WebP también soporta lossless pero el ecosistema de edición es menos universal.

3. Software de diseño legacy: Photoshop pre-CS6 (2012), GIMP antiguo, paint.net, MS Paint. Todos manejan PNG; WebP requiere plugins en versiones antiguas.

4. Impresión profesional: PNG es estándar gráfico imprenta; WebP no es soportado por la mayoría de software RIP de impresión profesional.

5. Fallback obligatorio para usuarios pre-2020: navegadores antiguos como IE11 o Safari pre-14 (relevantes en algunos contextos enterprise). PNG garantiza visualización para todos.

6. Iconos pequeños donde el ahorro es marginal: para iconos <5KB, la diferencia entre PNG y WebP es despreciable. PNG simplifica el flujo sin penalización visible.

7. Archivado a largo plazo con máxima certeza: PNG tiene 30 años de soporte garantizado. WebP es más joven y vinculado a un consorcio (Google).

Cuándo elegir WebP

1. Imagen para web moderna: páginas, blogs, e-commerce, apps web. WebP es el estándar de facto desde 2020 en sitios web optimizados.

2. Te importan Core Web Vitals: WebP reduce 25-35% el peso → mejora LCP (Largest Contentful Paint) → mejor ranking SEO Google.

3. Transparencia alfa en web: WebP RGBA pesa significativamente menos que PNG RGBA con misma calidad.

4. Animación corta: WebP animado pesa hasta 64% menos que GIF, soporta millones de colores y transparencia alfa real.

5. Optimización ancho de banda: especialmente importante para usuarios móviles con datos limitados. Cada KB ahorrado importa multiplicado por miles de visitas.

6. CDN modernos (Cloudflare, Fastly): sirven WebP automáticamente con fallback. Pre-converir a WebP elimina overhead de conversión en runtime.

7. SEO crítico: cualquier página donde Google ranking importe debe servir WebP para boost de Core Web Vitals.

8. Distribución masiva web: donde cada KB ahorrado se multiplica por miles/millones de visitas.

Por qué WebP es 25-35% más pequeño que PNG

WebP usa predicción intra-frame (técnica heredada del codec VP8 de vídeo): predice el color de cada bloque basándose en bloques vecinos y solo codifica la diferencia. PNG en cambio usa DEFLATE puro (LZ77 + Huffman) sobre los píxeles raw.

Resultado típico:

• Screenshot UI 1920×1080: PNG 350 KB → WebP lossless 230 KB (ahorro 34%)
• Logo con transparencia 512×512: PNG 45 KB → WebP lossless 28 KB (ahorro 38%)
• Foto compleja 1920×1080: PNG 2.8 MB → WebP lossy Q80 180 KB (ahorro 94%)

Soporte de navegadores en 2026

WebP tiene soporte universal moderno:

• Chrome / Edge / Opera: desde 2010
• Firefox: desde 2019
• Safari (macOS Big Sur+, iOS 14+): desde 2020
• Android: desde 2010

Quedan fuera solo: IE11 (descontinuado), Safari < 14 (macOS Catalina, iOS 13), Android < 4. Cobertura >97% global en 2026.

Estrategia <picture> con fallback

Para máxima compatibilidad, usa el elemento HTML <picture> con WebP + PNG fallback:

<picture>
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.png" alt="Descripción">
</picture>

Navegadores modernos cargan WebP (más rápido). Navegadores antiguos cargan PNG (compatibilidad). Es la mejor estrategia mientras existan usuarios con navegadores antiguos.

Conversión PNG → WebP: cuándo y cómo

KaijuConverter convierte PNG a WebP preservando:

• Transparencia alfa: completa
• Profundidad de color: 8 bits por canal
• Metadatos EXIF: preservados
• Lossless por defecto: misma calidad PNG, archivo más pequeño
• Lossy opcional: control de calidad 0-100 (similar a JPEG) para máxima compresión

Para web masiva, lossy Q80-90 produce archivos hasta 80% más pequeños que PNG con calidad visualmente indistinguible.

Cuando NO conviertas PNG a WebP

• Iconos pequeños (<5 KB): el ahorro es marginal y añade complejidad
• Material para imprenta: WebP no es estándar imprenta; mantén PNG
• Software legacy que no soporta WebP (algunos editores antiguos)
• Edición continua: si vas a editar repetidamente, PNG es más estable como formato de trabajo
• Fallback obligatorio para usuarios IE11 (cada vez menos relevante)

Migración de biblioteca PNG existente a WebP

Para sitios considerando migrar PNGs existentes:

1. Greenfield content: por defecto WebP para todo nuevo contenido lossless
2. High-traffic existing content: convierte top 100 PNGs más servidos a WebP primero (regla 80/20: 80% del ahorro de ancho de banda viene de 20% de imágenes)
3. Static archives: deja sin tocar. El esfuerzo de migración no compensa para contenido raramente servido
4. Pipeline CMS: integra generación WebP en tu build pipeline (Eleventy, Hugo, Next.js Image todos tienen plugins)
5. Conversión a nivel CDN: Cloudflare Polish, Cloudinary, servicios similares auto-convierten PNG a WebP y sirven según soporte de navegador, eliminando el paso de build

Las mejoras de ancho de banda y Core Web Vitals de migración WebP típicamente devuelven el esfuerzo de implementación en semanas para sitios con tráfico significativo de imágenes.

Recomendación práctica

• Sitios web modernos: WebP por defecto con PNG fallback vía <picture>
• Apps web responsive: WebP optimiza experiencia móvil dramáticamente
• E-commerce: convierte fotos producto a WebP — ahorro 25-35% en peso impacta directamente velocidad y conversión
• Iconos UI estáticos: PNG sigue bien para casos pequeños donde el ahorro es marginal
• Material legacy o imprenta: mantén PNG como formato de trabajo
• Dudas sobre soporte navegador: usa cascada <picture> que da lo mejor de ambos mundos sin riesgo