Sistema de exportación de imágenes: PNG, JPG y WebP consistentes en toda la marca

La pregunta "PNG o JPG" parece de manual, pero cuando una marca produce cientos de imágenes lo que falla casi nunca es el formato aislado: es la falta de un sistema de exportación. Sin él, cada persona decide a su criterio y el coste aparece todas las semanas. Por ejemplo, un catálogo con imágenes innecesariamente pesadas puede ralentizar la página. Otra exporta su logotipo en JPG y a partir de cierto fondo aparece un halo gris alrededor de las letras. Un tercero convierte capturas de pantalla con texto a JPG y el resultado se ve como si lo hubieran fotografiado a través de un cristal sucio.

No son problemas estéticos. Son decisiones técnicas mal tomadas, y repetidas sin criterio común, porque nadie definió qué formato resuelve qué ni quién decide. Ordenar eso, más que elegir entre dos formatos, es lo que hace que una marca se vea consistente en cada pieza y canal.

JPG (más correctamente JPEG, Joint Photographic Experts Group) y PNG (Portable Network Graphics) no son alternativas equivalentes. Son dos respuestas distintas a dos problemas distintos. Esta guía explica cuál resuelve qué, por qué, y cuándo conviene saltarse los dos para usar algo más moderno.

Dos formatos, dos problemas distintos

El JPEG habitual comprime fotografías con pérdida: reduce información para obtener archivos más pequeños. PNG conserva los datos de píxel codificados sin pérdida y admite transparencia. Ninguno garantiza por sí solo una entrega correcta: también importan dimensiones, color, contenido y compatibilidad del destino.

PNG distingue imágenes indexadas, con una paleta de hasta 256 entradas, de imágenes de color verdadero; los 16,7 millones de colores de RGB de 8 bits por canal no son una paleta indexada. La especificación del W3C describe esa distinción.

Cómo comprime cada uno (y por qué importa)

Entender la mecánica de compresión es lo que separa a quien elige formato por intuición de quien lo elige bien.

JPEG y la transformada del coseno

JPEG usa la DCT (Discrete Cosine Transform) sobre bloques de 8×8 píxeles. Traduce cada bloque a una representación en frecuencias, desde tonos grandes y suaves hasta detalles finos y contrastes, y luego descarta las frecuencias altas que el ojo humano percibe peor. Eso reduce el peso enormemente, pero introduce los artefactos clásicos: bloques visibles en zonas planas, halos alrededor de bordes nítidos, "ruido" en transiciones de color.

En una fotografía de un atardecer, el ojo no nota la pérdida. En un texto negro sobre fondo blanco, esos artefactos aparecen como manchas grises alrededor de cada letra. Por eso el JPG destruye capturas de pantalla y favorece fotografías.

El control de calidad JPEG depende del exportador: un valor 85 no representa la misma calidad en todas las herramientas ni equivale a 85 en WebP o AVIF. Compara detalle, texto y degradados en el archivo resultante, además de su tamaño. Conserva el original para nuevas exportaciones.

PNG y la compresión sin pérdida

PNG comprime sin pérdida los píxeles que se le entregan al codificar. Eso no deshace cambios anteriores: reducir una paleta, recortar, redimensionar o convertir el color durante la edición puede eliminar información aunque el resultado se guarde como PNG.

PNG tiene tres variantes prácticas:

• PNG-8: nombre habitual para una imagen indexada de hasta 256 colores; puede incluir transparencia. Reducir una imagen a esa paleta puede cambiar sus colores.
• PNG-24: nombre habitual para RGB de 8 bits por canal, sin un canal alfa completo.
• PNG-32: PNG-24 más canal alpha de 8 bits (256 niveles de transparencia). Es el PNG que usa la mayoría de la gente cuando habla de "PNG con fondo transparente."

La transparencia es la ventaja decisiva de PNG. GIF también tiene transparencia, pero binaria (un píxel es transparente o no lo es). PNG permite transparencia gradual, que es lo que hace posible los bordes suaves de un logotipo sobre cualquier fondo.

La decisión real, por caso de uso

El árbol de decisión no es "PNG o JPG" sino una secuencia más larga.

Fotografía sin transparencia

JPEG es una opción habitual para fotografías sin transparencia. WebP y AVIF también pueden ser adecuados cuando el destino los admite. Evalúa la exportación con la imagen concreta; un ajuste de calidad no garantiza un resultado indistinguible del original.

Si la fotografía va a vivir en un archivo maestro que se reeditará varias veces, el original conviene guardarlo en TIFF o PSD y exportar a JPG solo al final. Cada exportación JPG sucesiva añade artefactos.

Logotipo, icono, gráfico vectorial rasterizado

Para una entrega rasterizada, elige PNG con alfa si necesitas transparencia. Un PNG indexado puede servir si su paleta reproduce los colores y bordes necesarios. Evita aplanar el logo sobre un fondo que no será el de su uso final.

Si tienes un original vectorial, conserva ese archivo. SVG escala sin pixelar sus elementos vectoriales y puede ser adecuado para web, pero no siempre pesa menos que PNG: depende de su complejidad y de si incluye imágenes rasterizadas. Comprueba el tamaño y la compatibilidad.

Captura de pantalla con texto

PNG suele ser una buena opción para capturas con texto porque evita artefactos de compresión con pérdida. También puedes evaluar WebP sin pérdida si el destino lo admite. Comprueba el texto al tamaño real de lectura.

Imagen con transparencia (sobre fondo no plano)

Para conservar transparencia puedes usar PNG con alfa, WebP o AVIF si el destino lo admite. El JPEG habitual no incluye canal alfa: una exportación que aplana sobre blanco no servirá como recorte transparente sobre otro fondo.

Ilustración digital con grandes áreas planas

PNG-8 si la paleta es limitada (estilo flat, ilustración corporativa). PNG-24 si hay degradados sutiles. JPG solo si la ilustración es muy fotorrealista.

Animación

APNG permite animación y está incluido en la tercera edición de PNG, publicada como recomendación en junio de 2025. También existen WebP animado, GIF y vídeo. Elige según duración, transparencia, reproducción y compatibilidad del destino.

Cómo comparar el peso de una exportación

No se puede deducir el peso de un archivo comprimido solo a partir de sus dimensiones. Influyen el detalle de la imagen, el ruido, la transparencia, el perfil, los metadatos y el codificador. Comparar «calidad 85» entre formatos tampoco iguala la calidad visual.

Para una comparación útil, exporta el mismo original con las mismas dimensiones y color de destino. Registra formato, herramienta, ajustes y bytes; compara bordes, texto, degradados y detalle al tamaño de uso. Conserva el original separado de los derivados. Sin ese ensayo, una tabla de pesos es una estimación, no un resultado medido.

Lo que cambió desde 2010: WebP, AVIF, JPEG XL

Tratar el debate como "PNG vs JPG" es una conversación de 1998. En 2026 hay tres formatos más nuevos que conviene entender porque cambian qué es razonable usar.

WebP admite compresión con y sin pérdida, transparencia y animación. Puede reducir el peso frente a otros formatos, pero el ahorro depende de la imagen y del codificador. Comprueba la compatibilidad del canal antes de entregarlo.

AVIF admite transparencia y contenido HDR. Puede ofrecer una buena relación entre calidad y tamaño, con costes de codificación y compatibilidad que debes evaluar. No presupongas un ahorro fijo ni que el mismo número de calidad equivale al de JPEG.

JPEG XL es otra opción para flujos compatibles. Su aceptación varía entre navegadores, editores y canales; comprueba el destino real antes de usarlo como única entrega. La guía de formatos de MDN sirve de referencia para los formatos web y sus usos.

Para web, compara formatos modernos y conserva un respaldo cuando tu audiencia o canal lo necesite. Para intercambio, edición y archivo, elige según las capacidades que debes preservar; JPEG y PNG no quedan limitados a plataformas antiguas.

Cómo comprobar el archivo en el destino

Las plataformas pueden redimensionar, recomprimir o servir variantes. No deduzcas su formato de distribución a partir de la extensión que subiste, ni supongas que todas procesan igual cualquier imagen. Revisa el resultado publicado y las especificaciones vigentes del canal.

Miniaturas de YouTube. La ayuda oficial admite distintos formatos, incluido PNG. Elige un formato admitido y comprueba tamaño, recorte y legibilidad después de la subida.

Mensajería y entrega al cliente. Para entregar un original, utiliza un método que conserve el archivo y comprueba lo recibido. La vista previa no demuestra que resolución, metadatos y bytes se hayan preservado.

Imprenta y diseño profesional. Solicita la especificación del proveedor: formato, perfil de color, tamaño final y resolución efectiva en ppp. JPEG puede formar parte de un flujo de impresión o de un PDF; no queda descartado por ser habitual en web. Adobe documenta compresión JPEG en formatos de fotografía, TIFF, PDF y PostScript.

Errores que cuestan dinero

Logo en JPG sobre fondos variables. El halo gris-blanco aparece en cuanto el fondo no es exactamente el que tenía la imagen al exportarse. En cuestión semanas, el equipo de marketing tiene veinte versiones del logo con halos de distintos tonos circulando. Solución: exportar siempre el logo en PNG-32 con fondo transparente, y mejor aún en SVG si el destino lo acepta.

Catálogo sin comprobar peso y calidad. Servir fotografías demasiado pesadas puede ralentizar la carga. Compara alternativas y mide la página con sus imágenes reales. El formato por sí solo no permite afirmar un tiempo de carga ni una caída de posiciones en Google.

Capturas de pantalla en JPG. El soporte de la herramienta envía manuales con capturas en JPG. Los textos pequeños se ven borrosos, los usuarios no entienden las instrucciones, el ticket promedio se alarga. Solución: PNG para todo lo que tenga texto.

Reexportar JPG sobre JPG. Volver a codificar con pérdida puede acumular artefactos; abrir o copiar el archivo no lo recomprime. Conserva originales y editables, y genera los derivados desde ellos en lugar de encadenar exportaciones de entregas anteriores.

Exportar sin revisar el resultado. Un compresor puede reducir el tamaño, pero no hay un porcentaje de ahorro garantizado. Comprueba calidad, transparencia, color y metadatos antes de sustituir una entrega; conserva el original.

Confundir píxeles con bytes. 4000×4000 tiene cien veces los píxeles de 400×400, pero no necesariamente cien veces los bytes comprimidos. Ajusta las variantes a las dimensiones de visualización y a la densidad de pantalla, utilizando srcset o picture cuando corresponda.

La pregunta que va detrás

Cuando un equipo se pelea con PNG vs JPG, lo que normalmente falla está antes: no hay un sistema de exportación. Cada persona exporta a su criterio, los archivos viven en carpetas distintas, las versiones se mezclan, y cuando hay que actualizar la imagen de un producto se duplica el trabajo cinco veces.

En Polimake, puedes almacenar, buscar y recuperar originales y variantes de tu biblioteca. Los ajustes de exportación se aplican en la herramienta que prepara cada archivo; conservar el material y su contexto permite encontrarlo para el siguiente uso.

Documentar formato, dimensiones, color y nombre ayuda a repetir una entrega. La comprobación sigue siendo necesaria: una configuración que funciona para una fotografía puede no servir para otra con texto o transparencia.

Esta lógica conecta con cómo se mide el rendimiento web, cómo se trabaja la optimización para buscadores, donde el peso de imagen afecta directamente Core Web Vitals, y cómo se gestiona la coherencia visual de marca a través de cientos de piezas.

Una checklist rápida

Antes de exportar, tres preguntas:

1. ¿Es fotografía o gráfico? Fotografía → JPG/WebP/AVIF. Gráfico → PNG/SVG.
2. ¿Necesita transparencia? Sí → PNG-32, WebP, AVIF, o SVG. No → cualquiera de los anteriores.
3. ¿Para qué destino? Web moderno → AVIF/WebP con respaldo. Email → JPG/PNG seguros. Imprenta → seguir la especificación del proveedor, incluido el formato y el perfil de color.

Y antes de subir:

• ¿El tamaño en píxeles es el correcto para el destino, o estás sirviendo 4000×4000 donde solo se ven 400×400?
• ¿Pasaste el archivo por un compresor como Squoosh, TinyPNG o ImageOptim?
• ¿El nombre del archivo es descriptivo (logo-polimake-rgb-transparent.png) y no genérico (Untitled-1.png)?

Para cerrar

PNG y JPG no son competidores. Son herramientas que resuelven problemas distintos, fotografía con peso bajo, gráfico con bordes limpios y transparencia, y la decisión es casi siempre evidente cuando se identifica el problema correcto. La conversación moderna ya no es "uno u otro" sino cuándo conviene saltar a WebP o AVIF, qué formatos acepta cada destino, y cómo asegurar que cada activo se exporta de forma coherente.

Lo que distingue una marca cuidada de una desordenada no son los formatos en sí. Es el sistema que decide qué formato, en qué tamaño, con qué nombre, para qué uso, y se asegura de que esa decisión se aplica en cada pieza, no quince veces a criterio de quien tenga el archivo abierto en ese momento.

Referencias rápidas

• Fotografía web → comparar JPEG, WebP y AVIF con la imagen y el destino reales.
• Logo → SVG si es posible, PNG-32 si no.
• Captura con texto → preferir compresión sin pérdida y comprobar legibilidad.
• Imagen con transparencia → PNG-32, WebP, AVIF.
• Imprenta → especificación del proveedor; JPEG no está excluido por definición.
• Tamaño → exporta al tamaño real de uso, no a 4000 píxeles "por si acaso."
• Compresión → siempre, mediante Squoosh, TinyPNG o pipeline automático.