PNG vs. JPG: cuándo usar cada formato (con ejemplos)
La diferencia clave: cómo gestiona la compresión cada formato
PNG y JPG no son intercambiables. Resuelven problemas diferentes. JPG (o JPEG) usa compresión con pérdida, lo que significa que reduce el tamaño del archivo desechando datos de píxeles de forma permanente. Cada vez que guardas un JPG, un algoritmo busca píxeles de colores similares, los agrupa y calcula un promedio entre ellos. Obtienes un archivo más pequeño, pero te arriesgas a que aparezcan artefactos visibles si llevas la compresión demasiado lejos. En Photoshop, una configuración de calidad de 80 (Archivo > Exportar > Exportar como) puede darte una reducción de tamaño del 60–70 % sin casi ninguna pérdida visible en las fotos. Pero si bajas esa calidad a 40, verás cuadrados pixelados —llamados macrobloques—, especialmente alrededor de zonas de alto contraste como texto sobre un fondo. PNG es lo contrario: usa compresión sin pérdida. Cada píxel se conserva, exactamente como era. El algoritmo de compresión DEFLATE simplemente encuentra patrones repetitivos en los datos y los almacena de forma más eficiente sin descartar nada. Abre un PNG, guárdalo, vuelve a abrirlo... los píxeles son idénticos. Esto convierte a PNG en la única opción cuando una fidelidad perfecta no es negociable. Esta es la conclusión práctica: una foto de 4000×3000 de un paisaje de montaña podría pesar entre 3 y 5 MB como un JPG de alta calidad. Como PNG, esa misma imagen podría dispararse a 25–40 MB. Para una fotografía, ese tamaño extra no te aporta prácticamente ningún beneficio visible. Pero toma una captura de pantalla de 1200×800 de una hoja de cálculo. Como JPG, incluso con calidad 75, el texto se verá borroso y notarás bordes de color alrededor de las celdas. Como PNG, se mantiene perfectamente nítido y podría pesar solo 300–500 KB. La elección del formato siempre debe ser una decisión deliberada basada en el contenido, no una simple costumbre.
Cuándo JPG es la opción correcta
JPG se creó para las fotografías, y ese sigue siendo su terreno. La compresión con pérdida del formato explota inteligentemente una peculiaridad de la visión humana: nuestros ojos son mucho más sensibles a los cambios de brillo que a los sutiles cambios de color. Las fotografías están llenas de cambios tonales graduales —un cielo que pasa de azul oscuro a pálido, o tonos de piel que cambian con una luz suave. JPG comprime estas áreas de forma agresiva y, la mayoría de las veces, ni siquiera nos damos cuenta. Usa JPG para: **Fotos de cámara para la web.** Piensa en fotos de productos en un sitio de e-commerce, imágenes de cabecera en un blog o tus fotos de vacaciones en Instagram. Con una calidad de 75–85, una foto típica de una DSLR se reducirá a menos de 500 KB y se verá idéntica a la original en tamaños de pantalla normales. **Cualquier imagen donde el tamaño del archivo sea la máxima prioridad.** Esto incluye archivos adjuntos de correo electrónico, imágenes incrustadas en PDF para su distribución y miniaturas. Las directrices de PageSpeed de Google recomiendan mantener las imágenes por debajo de 200 KB si es posible. Para las fotos, JPG es la forma más rápida de conseguirlo. **Imágenes que son verdaderamente finales.** Como la compresión JPG tiene pérdida, cada ciclo de guardado degrada el archivo. Si estás trabajando en una imagen de forma iterativa, te estás buscando problemas si la guardas una y otra vez como JPG. Mantén tu archivo maestro en un formato sin pérdida (como PNG, TIFF o el formato RAW de una cámara) y exporta a JPG solo como el último paso. La gran limitación no negociable de JPG es la transparencia. No la admite. Si necesitas poner una foto de un producto sobre fondos de diferentes colores, JPG no es la herramienta adecuada. Tendrás que usar PNG o WebP.
Cuándo PNG es la opción correcta
PNG brilla justo donde JPG tropieza, gracias a su compresión sin pérdida y su soporte total para transparencias. **Capturas de pantalla y grabaciones de pantalla exportadas como imágenes fijas.** Cualquiera que haya intentado leer texto borroso en la captura de pantalla de un tutorial conoce el dolor de usar JPG para la tarea equivocada. El texto en una pantalla es de alto contraste y tiene bordes nítidos. La compresión JPG lo destroza, creando bordes de color y desenfoque incluso con ajustes de alta calidad. Una captura de un editor de código, un mockup de interfaz de usuario o un panel financiero debe ser un PNG. **Logotipos, iconos e ilustraciones con colores planos.** Si tienes el logo de una empresa que necesita colocarse sobre fondos de diferentes colores, necesitas un PNG transparente. Exportar una ilustración vectorial desde Illustrator (Archivo > Exportar > Exportar como > PNG) preserva cada línea nítida. La misma exportación como JPG forzaría un fondo blanco y crearía bordes difusos. **Imágenes destinadas a una edición posterior.** Si vas a pasarle un archivo a un diseñador que necesita componer, enmascarar o ajustarlo, envíale un PNG. Su naturaleza sin pérdida significa que no se pierde calidad a medida que el archivo se abre y se guarda en diferentes programas. **Imágenes con grandes áreas de color sólido.** Las infografías, los gráficos y los diagramas son perfectos para PNG. El algoritmo de compresión DEFLATE es increíblemente eficiente manejando grandes bloques repetitivos de un solo color. En estos casos, un PNG a veces puede ser incluso más pequeño que un JPG, y se ve infinitamente mejor. ¿Cuál es la pega de PNG? El tamaño del archivo, pero solo para contenido fotográfico. Un PNG de 24 bits de una foto detallada casi siempre será mucho más grande que un buen JPG sin ninguna diferencia visible en la calidad. Para las fotos, ese tamaño extra rara vez merece la pena.
Ejemplos comparativos con cifras reales
Las comparaciones abstractas son una cosa, pero los números hacen que las concesiones sean reales. Veamos tres ejemplos concretos con tamaños de archivo reales. **Ejemplo 1: Fotografía de producto (2400×1600 px, foto de cámara de unas zapatillas de correr)** - JPG con calidad 85: 487 KB — nítido, sin artefactos visibles - JPG con calidad 60: 198 KB — ligera pérdida de nitidez en la textura, pero aceptable para una miniatura - PNG (24 bits): 6.2 MB — idéntico al original, pero 12 veces más grande que el JPG con calidad 85 Veredicto: JPG gana de forma decisiva. El PNG no ofrece ningún beneficio visual y sería un desastre para los tiempos de carga de la página. **Ejemplo 2: Captura de interfaz de usuario (1440×900 px, navegador web con una página con mucho texto)** - JPG con calidad 85: 312 KB — bordes de color notables alrededor del texto negro, especialmente en fuentes pequeñas - JPG con calidad 95: 890 KB — los bordes se reducen pero siguen siendo visibles en el texto de 12 px - PNG (24 bits): 418 KB — texto perfectamente nítido, cero artefactos Veredicto: PNG es el claro ganador. De hecho, es más pequeño que el JPG de máxima calidad y se ve mucho mejor. **Ejemplo 3: Logotipo de empresa (800×400 px, diseño plano con fondo transparente)** - JPG con calidad 90: 45 KB — fuerza un fondo blanco, sin transparencia; los bordes son difusos - PNG (24 bits con canal alfa): 38 KB — transparencia perfecta, bordes nítidos Veredicto: No hay debate. El PNG es más pequeño y el único formato que realmente puede hacer el trabajo, ya que JPG no admite transparencia. Estas cifras variarán según el contenido de la imagen, pero los patrones que ves aquí se mantienen para miles de archivos del mundo real.
Convertir entre PNG y JPG: qué puedes esperar
Aclaremos una idea errónea muy común: convertir un JPG a PNG no recupera mágicamente los datos perdidos. Si una foto se guardó como JPG con calidad 70, sus datos se han perdido para siempre. Convertir ese archivo a PNG solo te da una copia perfecta y sin pérdida de una imagen ya dañada. Has conservado los artefactos, no los has eliminado. El archivo se vuelve mucho más grande, pero no mejora en absoluto. Sin embargo, convertir de PNG a JPG es un paso común y útil cuando pasas una fotografía de la fase de edición a la entrega final en la web. Aquí es donde aplicas la compresión JPG por primera vez, lo que te da control sobre la calidad final. El conversor de PNG a JPG de CocoConvert, por ejemplo, te permite elegir un nivel de calidad del 1 al 100. En mi opinión, una calidad de 82 es un excelente punto de partida para la mayoría de las fotos. ¿Cuándo querrías convertir un JPG a PNG? Es raro, pero hay escenarios. Quizás necesites añadir un fondo transparente a una foto existente (aunque necesitarás otra herramienta para crear la máscara). O tal vez estás archivando fotos antiguas y quieres detener cualquier degradación futura. Solo recuerda que el daño de la compresión del guardado original en JPG ya está integrado en la imagen. Donde una herramienta como CocoConvert realmente se convierte en un ahorro de tiempo es con las conversiones por lotes. Si tienes 200 fotos de productos en PNG de un diseñador y necesitas subirlas a un sitio web, convertirlas todas a JPG con calidad 80 de una sola vez es un salvavidas. La carga por lotes de CocoConvert admite 50 archivos en el plan gratuito y 500 en el Pro. Sin embargo, no monitoriza carpetas ni proporciona una API; para ese nivel de automatización, tendrías que recurrir a scripts de ImageMagick o a un servicio como Cloudinary.
¿Y qué hay de WebP, AVIF y otros formatos modernos?
PNG y JPG han dominado la web durante más de dos décadas, pero su reinado está siendo desafiado. WebP, desarrollado por Google, ahora es compatible con todos los navegadores principales (Chrome, Firefox, Safari 14+, Edge). Es un formato flexible con modos tanto con pérdida como sin pérdida. En su modo con pérdida, un archivo WebP suele ser un 25–35 % más pequeño que un JPG de calidad visual equivalente. En el modo sin pérdida, suele ser un 20–30 % más pequeño que un PNG. AVIF es aún más nuevo y lleva la compresión más allá, creando a menudo archivos un 40–50 % más pequeños que un JPG. Se basa en el códec de vídeo AV1 y también maneja contenido HDR de maravilla. La compatibilidad con navegadores ya es sólida en general (Chrome 85+, Firefox 93+, Safari 16+), pero el proceso de codificación es más lento y las herramientas no están tan maduras. Entonces, ¿por qué seguimos tan centrados en PNG y JPG? Primero, la compatibilidad universal. JPG y PNG funcionan en todas partes, incluyendo clientes de correo electrónico antiguos y software sin conexión. Segundo, la familiaridad. La mayoría de los clientes y proveedores esperan un JPG o un PNG y puede que ni siquiera sepan qué hacer con un archivo WebP. Y por último, muchos flujos de trabajo profesionales, desde sitios de fotos de stock hasta servicios de impresión bajo demanda, todavía se basan exclusivamente en la subida de archivos JPG y PNG. CocoConvert permite convertir desde y hacia WebP, lo cual es una gran característica. Mi consejo: si estás desarrollando un proyecto web moderno y controlas toda la pila tecnológica, considera usar WebP como tu formato de entrega mientras mantienes tus archivos fuente maestros como JPGs o PNGs de alta calidad. La conversión a AVIF está en la hoja de ruta de CocoConvert, pero aún no está disponible.
Un marco práctico para tomar decisiones
Vale, han sido muchos detalles técnicos. Vamos a resumirlo todo en un proceso de decisión simple que cubre la mayoría de las situaciones. **Primero, analiza tu contenido:** - ¿Es una fotografía o una imagen fotorrealista? → Usa JPG, a menos que necesites transparencia sí o sí. - ¿Es una captura de pantalla, un diagrama, un logotipo o una ilustración con líneas nítidas? → Usa PNG. - ¿Requiere absolutamente un fondo transparente? → Usa PNG (o WebP si es solo para navegadores). **Luego, considera el destino:** - ¿Una página web donde la velocidad es crítica? → JPG con calidad 75–85 para fotos; PNG para gráficos; considera WebP si es compatible. - ¿Impresión o archivo a largo plazo? → PNG o TIFF. Nunca uses JPG para un archivo que planees volver a editar. - ¿Archivo adjunto en un correo? → JPG para fotos (intenta mantenerlo por debajo de 1 MB); PNG para capturas de pantalla. - ¿Redes sociales? → JPG para fotos (lo van a recomprimir de todos modos); PNG para cualquier gráfico con texto. **Y por favor, intenta evitar estos errores comunes:** - Guardar un logo como JPG y preguntarte por qué se ve borroso. - Usar PNGs enormes para todas las fotos de tu web y preguntarte por qué el sitio va tan lento. - Convertir un JPG de baja calidad a PNG esperando que se vea mejor. - Bajar la calidad del JPG por debajo de 70 y sorprenderte por los artefactos pixelados en los bordes nítidos. Si alguna vez te quedas atascado, aquí tienes el desempate: exporta uno de cada, ábrelos y haz zoom al 100 %. Mira la parte más nítida de la imagen. Si el JPG se ve limpio, adelante. Si ves que está difuso o tiene colores raros, necesitas PNG. Una herramienta como el conversor de CocoConvert se encarga perfectamente de la parte mecánica de cambiar de formato. Lo que no puede hacer es tomar la decisión estratégica por ti. Eso requiere saber qué es tu imagen y a dónde va. Este marco debería hacer que esa decisión sea mucho más sencilla.