Has exportado tu logo en JPG, se lo envías al cliente, y te responde preguntando por qué tiene un recuadro blanco alrededor. O todo lo contrario: guardas una foto de un producto en formato PNG, y ahora tu página web tarda una eternidad en cargar. Misma imagen, diferente formato, y dos problemas que no tienen nada que ver.
Esto pasa porque JPG y PNG fueron creados para resolver problemas muy distintos. Usar el equivocado no solo hace que el archivo pese de más, sino que activamente arruina tu trabajo.
El JPG sacrifica calidad por peso, y normalmente está bien
El formato JPG utiliza compresión con pérdida (lossy). Cuando guardas un archivo en JPG, el codificador descarta algunos datos de la imagen de forma permanente. Ataca directamente a los detalles que tus ojos difícilmente notarán: cambios suaves de color, o texturas casi invisibles. En la foto de una calle o de una cordillera, es literalmente imposible notar la diferencia entre el original y un buen JPG guardado a un 80% de calidad.
Sin embargo, el archivo puede llegar a ser entre cinco y diez veces más ligero que su equivalente en PNG.
El precio a pagar se hace evidente en dos situaciones concretas. La primera: cualquier cosa con bordes afilados y limpios. Texto, logotipos o formas de color sólido. El algoritmo de compresión genera unos artefactos en forma de bloques alrededor de esos bordes duros que saltan a la vista. La segunda: los guardados repetidos. Cada vez que vuelves a exportar un JPG, el archivo se comprime sobre lo que ya estaba comprimido, y la degradación se acumula. Mantén tus archivos de trabajo en un formato sin pérdida y guárdalos en JPG únicamente al final del todo.
El PNG conserva todo, pero a un coste
El PNG es sin pérdida (lossless). Cada píxel se guarda exactamente como era. Puedes guardar el mismo PNG cien veces y seguirá siendo exactamente idéntico. Esa fiabilidad absoluta es la razón por la que el PNG es el formato predeterminado para cualquier cosa que necesite estar nítida: capturas de pantalla, prototipos de interfaces (mockups), diagramas, y cualquier imagen que contenga texto.
La otra cosa que el PNG puede hacer y que el JPG ni siquiera imagina es la transparencia. Y no solo como un interruptor de encendido o apagado, sino con un soporte completo del canal alfa: cualquier píxel puede ser parcialmente transparente. Por eso los logotipos, iconos y elementos de interfaz siempre van en PNG. Coloca un PNG con fondo transparente sobre cualquier color y quedará impecable. Haz lo mismo con un JPG y aparecerá ese recuadro blanco, porque el JPG no sabe qué es la transparencia y rellena cualquier vacío con color blanco.
La principal desventaja es el peso. Una foto guardada en PNG puede pesar fácilmente el 150% o el 200% de lo que pesaría en JPG, sin que ganes absolutamente nada de calidad visual. En páginas web, este peso extra te saldrá muy caro.
La pregunta que lo decide todo
¿Es esta imagen una fotografía del mundo real?
Si la respuesta es sí, usa JPG. La compresión se creó exactamente para este tipo de contenido. Los artefactos de compresión se camuflan dentro de la complejidad visual de la foto, y vas a ahorrar muchísimo espacio en disco. (Si has cometido el error, puedes convertir el PNG a JPG fácilmente usando nuestra herramienta).
Si la respuesta es no, usa PNG. Logos, iconos, capturas de pantalla, ilustraciones, cualquier cosa con texto incorporado y cualquier cosa que necesite fondo transparente. Estas imágenes tienen bordes duros y áreas planas que el JPG degradará de forma muy notoria. Y si, por si fuera poco, requieres transparencia, el PNG es directamente tu única opción dentro de los formatos clásicos.
Esta separación cubrirá la inmensa mayoría de los casos.
Los errores que conviene conocer
Guardar una fotografía en PNG para subirla a una página web es el error más frecuente de todos. Un PNG de 4 MB y un JPG de 400 KB pueden verse idénticos en tu pantalla, pero uno de ellos tardará diez veces más en cargar. Al navegador le da igual que tus píxeles estén perfectos.
Usar JPG para un logotipo es el otro gran clásico. Ese halo blanco alrededor del logo, el texto borroso y el ruido de compresión en las áreas de color sólido. Utiliza siempre PNG o SVG para cualquier gráfico que deba verse nítido sobre un fondo.
Luego está el fallo a la hora de archivar. Si te dedicas a la edición fotográfica, no uses el JPG como formato de trabajo, porque cada guardado irá comiéndose poco a poco la calidad de tu imagen. Mantén tus archivos originales en formatos como TIFF, PNG o RAW, y usa el JPG solo cuando vayas a entregarlo al cliente.
¿Qué pasa con el WebP?
El formato WebP hace lo mismo que el JPG y el PNG juntos, pero ocupando menos espacio. Admite compresión con y sin pérdida, y también permite la transparencia. Los navegadores actuales lo cargan sin problemas. Si estás optimizando imágenes exclusivamente para internet, pasar de JPG a WebP suele recortar el tamaño final del archivo en otro 25 o 30% manteniendo la misma calidad visual.
Vale la pena tenerlo muy en cuenta para cualquier contenido que vaya a ser público, especialmente fotos de productos y las típicas imágenes grandes de cabecera.
Resumen rápido
| Característica | JPG | PNG |
|---|---|---|
| Compresión | Con pérdida (Lossy) | Sin pérdida (Lossless) |
| Transparencia | No | Sí |
| Ideal para | Fotografías | Logotipos, gráficos, capturas de pantalla |
| Calidad si se re-guarda | Empeora progresivamente | Se mantiene idéntica |
| Tamaño para fotos reales | Pequeño | Muy grande |
Aunque la tabla no recoja todos los casos raros que puedan darse, cubre los escenarios más comunes. Cuando tengas dudas, el PNG es el punto de partida más seguro. Siempre tendrás tiempo de convertir un PNG a JPG más adelante sin perder la calidad original. Hacerlo al revés implica tener que lidiar con los restos de información que el JPG ya ha descartado definitivamente.