Bhinish Dhiman
Cómo comprimir un PNG sin perder calidad
Traducido del original en inglés. Leer el original
Pasa el PNG por un optimizador sin pérdida como oxipng: arrástralo al compresor de imágenes, deja el esfuerzo de PNG en Fast (level 2), presiona Compress y descarga. Cada píxel sale idéntico; solo cambia la forma de almacenarlo. En nuestras mediciones, eso bajó un gráfico plano de interfaz de 21 493 a 3 350 bytes y una fotografía un 14% por debajo de su original. Las herramientas que reducen la cantidad de colores tienen pérdida.
“Sin perder calidad” aparece en un montón de herramientas de compresión, y abarca dos promesas que no son iguales. Una se puede comprobar hasta el último bit. La otra es un juicio sobre lo que tus ojos van a notar. Esta guía hace la primera y es precisa sobre dónde termina.
Qué puede significar honestamente “sin perder calidad”
La compresión de imágenes sin pérdida consiste en reescribir cómo se almacena una imagen, es decir, el filtro que se aplica a cada línea de barrido, la paleta, la profundidad de bits y el orden del flujo comprimido, sin alterar ni un solo valor de píxel. La prueba es mecánica: decodificas el original y el resultado, comparas cada canal de cada píxel, y coinciden. Un PNG tiene mucho margen para esto, porque el formato admite muchas codificaciones válidas de la misma imagen y un codificador de uso general no intenta encontrar la más pequeña.
La otra promesa se suele llamar “visualmente sin pérdida”. Significa un resultado con pérdida cuyo daño se supone que no vas a ver al tamaño de visualización normal. Puede ser un buen intercambio, pero es una opinión sobre una imagen en una pantalla, no una propiedad que una comprobación byte por byte pueda confirmar. Un método con pérdida muy común para PNG reduce la imagen a una paleta de 256 colores o menos; en una fotografía con muchísimos más colores que eso, cambia píxeles por diseño.
Así que, para comprimir un PNG sin ninguna pérdida, lo que quieres es un optimizador, no un recodificador ni un reductor de colores.
Cómo hacerlo con el compresor de imágenes
- Abre el compresor de imágenes y presiona “Choose images” (elegir imágenes), o suelta o pega tus PNG en cualquier parte de la página. No hay límite de cantidad; cada archivo se convierte en una tarjeta marcada como “Ready · oxipng, lossless” (listo, sin pérdida).
- Deja “More options” (más opciones) cerrado: su línea de resumen dice “PNG effort: Fast (level 2) · lossless at every level” (esfuerzo rápido, nivel 2, sin pérdida en todos los niveles). “Harder (level 4)” y “Hardest (level 6)” están dentro si los quieres. Los tres son sin pérdida, como dice la nota que tienen debajo.
- Ignora el control deslizante “JPEG quality · MozJPEG”. Solo se aplica a los archivos JPEG, y la línea de debajo dice cuántos de esos añadiste.
- Presiona “Compress 1 image” (o el número que hayas puesto en cola). Los archivos se procesan uno tras otro, no en paralelo, para que un teléfono no se quede sin memoria.
- Lee cada tarjeta: el tamaño antes y después, un porcentaje y “identical pixels” (píxeles idénticos) para todo lo que pasó por oxipng. “Before and after” (antes y después) muestra el original y el resultado lado a lado; con varios archivos, elige una tarjeta para ver otro.
- Descarga con “Download” en una tarjeta suelta, o con el botón que sustituyó a “Compress” (“Download all … as .zip” para el lote), que también lleva la barra al pie de la pantalla.
Si un porcentaje se pone en rojo con un signo de más, ese archivo salió más grande. Ya era compacto y no quedaba nada que quitar, así que quédate con tu original.
Las mediciones
Estas cifras vienen de la investigación detrás de la herramienta: los mismos píxeles escritos de tres maneras y luego comparados. La columna del canvas es lo que obtienes cuando un navegador decodifica el PNG y le pide a su propio codificador que lo vuelva a escribir, que es como funciona la mayoría de los “compresores” en el navegador.
| Imagen | PNG original | Guardado de nuevo con un canvas | Optimizado con oxipng | oxipng frente al original |
|---|---|---|---|---|
| Gráfico plano de interfaz | 21 493 B | 38 905 B (+81%) | 3 350 B | −84% |
| Fotografía, 1600 × 1000 | 1 006 774 B | 1 236 423 B (+23%) | 864 362 B | −14% |
Las cifras de oxipng son con su nivel máximo, y cada píxel de ambos resultados coincidió con su original. El gráfico plano es la sorpresa agradable: 21 493 ÷ 3 350 = 6.4 veces más pequeño. La fotografía es la expectativa realista para una imagen con detalle tonal real. Tres imágenes de prueba son un indicio, no una batería de pruebas, así que toma la tendencia como firme y los porcentajes exactos como una muestra.
El esfuerzo compra tiempo de búsqueda, no píxeles
Los niveles del menú no cambian calidad por tamaño. El resultado es sin pérdida en todos los niveles; uno más alto simplemente busca durante más tiempo una codificación válida más pequeña. Con la misma fotografía, de forma nativa y en un solo núcleo:
| Nivel de oxipng | Resultado | Tiempo |
|---|---|---|
| 2 (el “Fast” de la herramienta) | 884 853 B | 0.97 s |
| 4 (el “Harder” de la herramienta) | 870 679 B | 1.98 s |
| max | 864 362 B | 3.45 s |
El nivel máximo ahorró 20 491 bytes más que el nivel 2 a cambio de tres veces y media más de trabajo. En el navegador, WebAssembly corre entre dos y tres veces más lento que esos tiempos nativos, y por eso la herramienta empieza en el nivel rápido.
Qué sale mal: guardar de nuevo no es optimizar
La columna del canvas en la primera tabla es la falla a la que invita esta tarea. Guardar de nuevo un PNG con el codificador del navegador hizo el gráfico plano un 81% más grande y la fotografía un 23% más grande. Los píxeles estaban bien; el codificador simplemente no lo estaba intentando. Una herramienta construida así infla una buena parte de los archivos que recibe, y si solo informa de ahorros, puede que no lo notes.
Los bordes suaves son una segunda trampa. Un canvas redondea los píxeles semitransparentes al entrar, y ese redondeo no se puede deshacer al salir. En las mediciones de PNG a WebP, un recorte fotográfico con bordes difuminados que pasó por un canvas con calidad sin pérdida volvió con el 39.77% de sus píxeles cambiados. La ruta PNG del compresor evita ambos problemas porque nunca toca un canvas: tus bytes van directo a oxipng y sus bytes vuelven directo a ti.
Va un paso más allá de lo estrictamente necesario. oxipng puede reescribir los valores de color ocultos bajo los píxeles totalmente transparentes, algo que nadie puede ver y que ahorra bytes de verdad, pero que no es idéntico bit a bit. La herramienta deja esa opción desactivada (optimize_alpha es false en su código fuente), porque “identical pixels” es lo que afirma la pantalla.
Dónde termina lo sin pérdida
- Los archivos JPEG van a MozJPEG, que tiene pérdida. Descarta detalle para ahorrar bytes, y la herramienta lo dice junto a su control deslizante. En esta herramienta no se puede reducir un JPEG sin esa pérdida.
- GIF y BMP salen como PNG. Se leen una vez y se escriben como un PNG optimizado sin alterar ningún píxel, así que la extensión del archivo cambia.
- WebP y AVIF se rechazan, porque ambos ya están mejor comprimidos de lo que podría lograr una ruta PNG o JPEG.
- Los PNG y GIF animados se rechazan. Al decodificar una animación en el navegador solo se conserva el primer fotograma, lo que convertiría un GIF de cuarenta fotogramas en una imagen fija y lo presentaría como un ahorro.
Otras formas de hacerlo
En la línea de comandos, con el propio oxipng:
oxipng -o 4 --strip safe image.png
-o 4 es el nivel de esfuerzo, el mismo nivel que la opción “Harder” de la herramienta, y es la sintaxis con la que se hicieron nuestras mediciones. --strip safe le indica que elimine los metadatos que considera seguro quitar; los píxeles quedan intactos en cualquier caso. Trabaja sobre una copia si quieres conservar el archivo original.
macOS y Windows no tienen un optimizador de PNG sin pérdida integrado que podamos recomendarte; la línea de comandos es la alternativa.
Cómo comprobar que no se subió nada
Abre las herramientas para desarrolladores de tu navegador en la pestaña Network antes de presionar el botón de comprimir. La primera ejecución descarga el propio motor de compresión, un archivo WebAssembly servido por este sitio; lo que no vas a ver es ninguna solicitud que saque tu imagen. Comprime un segundo archivo y el motor ya está cargado, así que no aparece nada nuevo.
Arrastra tus PNG al compresor de imágenes y lee las cifras de cada archivo antes de quedarte con algo. Si lo que necesitas es otro formato y no un PNG más pequeño, eso le toca al convertidor de imágenes.