JPG vs PNG para la web - cuando usar cada formato de imagen
freetoolonline.com Editorial TeamJPG es ideal para fotografias - la compresion con perdida los hace de 5 a 10 veces mas pequenos que PNG sin perdida de calidad visible. PNG es ideal para capturas de pantalla, logos e imagenes con transparencia - sin perdida, por lo que los bordes de texto permanecen nitidos. WebP da cualquier formato con un 25-35% menos.
Como cada formato comprime pixeles
JPG (tambien escrito JPEG) es un formato con perdidas. El codificador convierte pixeles al dominio de frecuencia (DCT), cuantiza coeficientes de alta frecuencia, y descarta el detalle que el ojo humano tiene menos probabilidad de notar. El dial de calidad (0-100, donde mas alto es mejor) controla cuan agresivamente esa cuantizacion elimina detalles. JPG es brillante en fotos y terrible en bordes nitidos - texto, cromo de UI, y arte lineal adquieren artefactos de halo visibles en ajustes tipicos de calidad web.
PNG (Portable Network Graphics) es un formato sin perdidas. Los pixeles de salida son bit-por-bit identicos a los pixeles de entrada. PNG comprime encontrando patrones en la cuadricula de pixeles (DEFLATE en scanlines filtradas) - excelente en areas grandes de color plano, mediocre en gradientes fotograficos. PNG tambien soporta transparencia via el canal alfa, lo que JPG no.
Comparacion de tamano de archivo para la misma imagen
| Tipo de imagen | JPG (calidad 82) | PNG | WebP (lossy q=82) | AVIF (q=50) |
|---|---|---|---|---|
| Fotografia 1920×1080 | ~320 KB | ~3,2 MB | ~220 KB | ~160 KB |
| Screenshot 1920×1080 (UI) | ~180 KB (halos visibles) | ~130 KB | ~90 KB | ~60 KB |
| Logo simple 512×512 (colores planos) | ~40 KB | ~18 KB | ~10 KB | ~7 KB |
| Icono 64×64 con transparencia | No soportado | ~2 KB | ~1 KB | ~0,8 KB |
Las reglas de decision que se mantienen en 2026
Las reglas de decision que se mantienen en 2026 en JPG vs PNG para web: usa JPG (o WebP) para fotos; usa PNG cuando necesitas bordes UI nitidos o transparencia que los formatos foto aun manejan mal.
Fotografia con transparencia (sujeto recortado sobre fondo transparente). → PNG - JPG no puede representar alfa. Prefiere WebP si tu audiencia excluye clientes de correo legacy y WebViews antiguos de Android.
Screenshot de UI, codigo o texto. → PNG como canonico; WebP lossless como mejorado. Bordes de pixel nitidos (anti-aliasing de texto, bordes de UI) revelan artefactos de compresion JPG en cualquier calidad bajo 90, y JPGs de calidad 90 son mas grandes que el PNG equivalente.
Logo o grafico simple. → SVG si tienes la fuente vectorial (ver guia PNG vs SVG). Si solo existe un raster, PNG gana en nitidez; WebP lossless como mejorado.
Encabezado de newsletter por correo. → Solo JPG o PNG. Muchos clientes de correo no renderizan WebP/AVIF. Usa el formato universal incluso cuando un codec moderno ahorraria bytes.
Puntos dulces calidad-vs-tamano
JPG calidad 82 es el default web que funciono por una decada. Bajo 75, los artefactos de compresion se vuelven visibles en fotos ricas en detalle; sobre 90, el tamano del archivo crece rapido con minima ganancia visual.
JPG progresivo es una reordenacion de los mismos datos de imagen - misma calidad, mismo tamano, pero el navegador puede mostrar una vista previa en baja resolucion en cuanto baja el primer grupo de scanlines. Usa codificacion progresiva para cualquier foto hero above-the-fold.
Optimizadores PNG (pngquant, oxipng, zopflipng) pueden recortar 30-70% de una exportacion PNG por defecto sin perdida de calidad - buscan mejores parametros de filtro/compresion que los que intento el codificador. Siempre corre optimizacion antes de enviar un PNG grande a produccion.
Eligiendo calidad: un objetivo concreto
Eligiendo calidad: un objetivo concreto para JPG vs PNG para web - empieza JPG cerca de calidad 75-85 para heroes, luego compara bytes y artefactos antes de enviar un archivo mas pesado.
La cadena de fallback <picture>
La cadena de fallback picture en JPG vs PNG para web sirve WebP o AVIF primero, luego JPG o PNG, para que navegadores viejos sigan viendo una imagen legible sin hueco vacio.
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Descripcion" width="1920" height="1080">
</picture>El navegador elige la primera source que puede decodificar. El <img> es el fallback universal. Siempre incluye width y height para evitar layout shift acumulativo.
Cuando actualizar PNG a WebP o AVIF
WebP lossless es un reemplazo directo de PNG con ahorros de tamano de archivo de ~25-35% en la mayoria del contenido. El soporte de navegador es universal desde Safari 14 (2020). Si tu audiencia es solo-navegador (no pesada en correo), un solo archivo WebP lossless reemplaza al PNG sin diferencia visual. AVIF lossless comprime mas pero tiene tiempos de codificacion mas lentos y solo se agrego a Safari en 16 (2022).
Para fotografias, AVIF en calidad 50-60 tipicamente iguala JPG calidad 85 a la mitad del tamano de archivo. El trade-off es el tiempo de codificacion (AVIF es 10-30× mas lento que JPG para codificar) y soporte de decodificacion por hardware en dispositivos mas antiguos.
Convertir entre formatos
Convertir entre formatos para JPG vs PNG para web: abre Image Converter, elige el destino y revisa transparencia - aplanar un logo PNG a JPG puede pintar una caja blanca no deseada.
Herramientas relacionadas
- Comprimir Imagen - reduce tamano de archivo JPG/PNG con ajuste de calidad por IA.
- Verificador de Nivel de Compresion JPEG - inspecciona la calidad guardada de cualquier JPG.
- Redimensionar Imagen - define dimensiones exactas en pixeles con interpolacion bicubica.
- Optimizador de Imagen Insights - auditoria de imagen orientada a PageSpeed.
- Formato de foto iPhone explicado - HEIC, JPG, PNG, RAW - cuando los iPhones usan cada formato y como convertir para publicacion web.
- Como convertir 100 fotos HEIC a JPG - flujo de conversion por lotes para bibliotecas de fotos de iPhone.