JPG vs PNG para la web - cuando usar cada formato de imagen

Publicado el 20 de abril de 2026

---

JPG y PNG fueron los dos formatos de imagen web dominantes desde 1996 hasta los anos 2010, y siguen siendo los formatos que todo navegador, toda biblioteca de imagenes y todo sitio de fotos soportan sin reservas. La division es simple en principio - JPG para fotos, PNG para cualquier cosa con bordes nitidos o transparencia - pero las decisiones reales hoy involucran tamano de archivo, una cadena de fallback moderna WebP/AVIF, y si un screenshot PNG es demasiado pesado para enviar. Esta guia cubre la mecanica de codificacion, las reglas de decision que se mantienen en 2026, y la ruta de actualizacion a formatos modernos.

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

Las reglas de decision que se mantienen en 2026

Fotografia, full bleed, sin necesidad de transparencia. → JPG (calidad 80-85) como linea base; WebP/AVIF como variantes mejoradas. Un JPG en q=82 es visualmente indistinguible del original sin perdidas para todos excepto los ojos mas entrenados. El archivo es 5-10× mas pequeno que un PNG de la misma foto.

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

Nuestro verificador de nivel de compresion JPEG inspecciona un JPG existente y reporta su tabla de cuantizacion. Usalo para hacer ingenieria inversa de en que calidad se guardo una foto antes de re-codificar. Regla de mano: una foto re-codificada mas de dos veces a calidad 82 pierde detalle visible; si eres el tercer salto en una cadena, sube la calidad a 90 para preservar margen para un futuro re-save.

La cadena de fallback <picture>

Los sitios modernos sirven una variante AVIF o WebP a navegadores que pueden decodificarla y caen a JPG o PNG para el resto:

<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

Usa nuestra herramienta comprimir imagen para re-codificacion JPG con calidad ajustada por IA. Para conversion de formato en la otra direccion, PNG a SVG traza logos PNG en vectores; SVG a PNG rasteriza un vector a un tamano de pixel explicito. Todas las conversiones corren en navegador - nada se sube.

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.

← Volver a Herramientas de Imagen