Por qué tu PNG pesa tanto y cómo solucionarlo
PNG es un formato sin pérdidas, y por eso mismo los archivos son enormes. Tres soluciones y lo que te cuesta cada una.
Tu PNG pesa 8 MB porque PNG almacena cada píxel de forma exacta, y una captura de pantalla a pantalla completa en resolución retina contiene realmente esa cantidad de información. El formato no descarta nada, lo cual es el propósito principal de PNG y, al mismo tiempo, su gran problema.
Hay 3 formas de solucionarlo, y cada una te cuesta algo diferente. Reducir las dimensiones cuesta una resolución que probablemente no estabas utilizando. Reducir la profundidad de color cuesta precisión cromática en las fotografías. Cambiar de formato cuesta compatibilidad fuera de los navegadores. Elige según el uso que le vayas a dar a la imagen.
Tus 3 opciones
- Reducir las dimensiones. Gratis, y por lo general la mayor ganancia. Nadie necesita una captura de pantalla de 5000 píxeles.
- Reducir la profundidad de color. Funciona bien en gráficos planos, pero mal en fotografías.
- Cambiar de formato. WebP mantiene la transparencia y normalmente resulta entre un 25 y un 35 por ciento más pequeño.
Por qué los archivos PNG crecen tan rápido
El tamaño de un archivo PNG escala directamente con el número de píxeles, porque cada píxel debe describirse con exactitud. Duplicar el ancho y el alto cuadruplica el número de píxeles y, aproximadamente, cuadruplica el tamaño del archivo.
Una captura de pantalla de 5120 por 2880 de un monitor de alta resolución contiene 14.7 millones de píxeles. A razón de 3 bytes por píxel antes de la compresión, eso equivale a 44 MB de datos sin procesar, y la compresión PNG normalmente lo reduce a un valor de entre 4 MB y 12 MB, dependiendo de la cantidad de color plano que contenga la imagen. Un resultado de 8 MB es algo normal y no un error.
Solución 1: reducir las dimensiones
Cambia el tamaño de la imagen al tamaño máximo en el que se vaya a mostrar, lo que elimina la mayor parte del peso del archivo antes de intentar cualquier otra cosa. Esta es la solución con el mayor efecto y el menor coste.
| Tamaño original | Redimensionado a | Píxeles eliminados | Archivo típico |
|---|---|---|---|
| 5120 x 2880 | 2560 x 1440 | 75 por ciento | De 8 MB a 2 MB |
| 3840 x 2160 | 1920 x 1080 | 75 por ciento | De 5 MB a 1.3 MB |
| 2560 x 1440 | 1280 x 720 | 75 por ciento | De 2 MB a 500 KB |
| Foto de 4000 x 3000 | 1600 x 1200 | 84 por ciento | De 18 MB a 2.9 MB |
Mide el ancho máximo con el que se renderizará la imagen en la página, duplícalo para pantallas de alta densidad y redimensiona al resultado obtenido. Una captura de pantalla que se muestra a 800 píxeles de ancho necesita 1600 píxeles y nada más.
Solución 2: reducir la profundidad de color
Convertir de color de 24 bits a una paleta de 8 bits reduce un PNG entre un 50 y un 70 por ciento, y funciona únicamente en imágenes con colores limitados. Las capturas de pantalla de interfaces, diagramas, logotipos y gráficos son candidatas ideales.
La técnica almacena una paleta de hasta 256 colores y hace referencia a ella por píxel, en lugar de almacenar valores de color completos. Una captura de pantalla de una interfaz de usuario rara vez contiene más de 256 colores distintos, por lo que la reducción es invisible. Una fotografía contiene decenas de miles, por lo que la misma reducción produce un efecto de bandas visible en cielos y tonos de piel.
Solución 3: cambiar el formato
Convierte a WebP para su uso en la web, lo que mantiene la transparencia y normalmente resulta entre un 25 y un 35 por ciento más pequeño que PNG. Convierte a JPG solo cuando la imagen sea fotográfica y no necesite transparencia.
- WebP sin pérdidas para gráficos y capturas de pantalla, que mantiene cada píxel exacto y aun así ahorra entre un 20 y un 30 por ciento.
- WebP con pérdidas para archivos PNG fotográficos, donde el ahorro alcanza el 70 por ciento o más.
- JPG para fotografías sin transparencia, donde PNG fue la elección incorrecta desde el principio.
- AVIF para imágenes fotográficas grandes, que comprime aún más en archivos de más de 100 KB.
- Gráficos vectoriales para logotipos e iconos, donde un archivo SVG puede pesar una fracción de cualquier formato rasterizado.
La causa más común: una foto guardada como PNG
Una fotografía guardada como PNG es de 3 a 5 veces más grande que la misma fotografía en JPEG, sin ninguna diferencia visible. Este único error es el responsable de la mayoría de los archivos PNG de tamaño excesivo.
La compresión PNG busca repeticiones, y las fotografías casi no contienen ninguna a nivel de píxel, ya que cada píxel difiere ligeramente de su vecino. El formato termina almacenando millones de valores casi únicos de forma exacta. Guarda las fotografías como JPEG o WebP y reserva el PNG para imágenes que realmente tengan colores planos o transparencia.
Cómo reducir un PNG sin perder calidad
Para reducir un PNG manteniendo el formato sin pérdidas, sigue estos 5 pasos en orden.
- Recorta cualquier área no utilizada, ya que los márgenes vacíos siguen sumando tamaño al archivo.
- Redimensiona al tamaño de visualización más grande que la imagen vaya a necesitar, duplicado para pantallas de alta densidad.
- Comprueba si la imagen realmente necesita transparencia, ya que una imagen acoplada se comprime mejor.
- Reduce la paleta de colores si la imagen es un gráfico en lugar de una fotografía.
- Convierte a WebP sin pérdidas, que sigue siendo exacto y normalmente es entre un 20 y un 30 por ciento más pequeño.
Los pasos 1 y 2 suelen resolver el problema por sí solos. Los pasos restantes son importantes cuando una imagen debe permanecer muy grande, como una captura de pantalla de página completa en la documentación.
Por qué las capturas de pantalla son tan grandes en las pantallas modernas
Las pantallas de alta densidad capturan a 2 o 3 veces la resolución lógica, por lo que una captura de pantalla de una ventana de 1200 píxeles de ancho se guarda a 2400 o 3600 píxeles. El archivo es mucho más grande de lo que parecía ser la ventana.
Esa resolución adicional es útil cuando la captura de pantalla se va a ver en otra pantalla de alta densidad, y se desperdicia en caso contrario. Para artículos de documentación y soporte, redimensionar de nuevo al tamaño lógico reduce las dimensiones a la mitad y disminuye el archivo en aproximadamente un 75 por ciento, mientras se ve idéntico para la mayoría de los lectores.
Cuándo mantener el PNG grande
Conserva el PNG a tamaño completo cuando la imagen sea un archivo maestro, un recurso de impresión o una fuente que se editará más adelante. Las decisiones de compresión corresponden a las copias de entrega y no a los originales.
Los archivos de diseño, los logotipos maestros, el arte final para impresión y los documentos escaneados justifican su tamaño. Almacena esos archivos a resolución completa y genera copias más pequeñas para cada destino. El error es publicar el archivo maestro en lugar de conservarlo, ya que un archivo maestro cuesta espacio en disco una sola vez, mientras que un archivo maestro publicado cuesta ancho de banda en cada visita.
La transparencia cuesta más de lo que la gente espera
Un canal de transparencia añade un cuarto valor a cada píxel, aumentando los datos sin procesar en aproximadamente un 33 por ciento antes de la compresión. Muchos archivos PNG llevan ese canal sin utilizarlo.
Las capturas de pantalla, los gráficos exportados y las imágenes acopladas sobre un fondo blanco con frecuencia conservan un canal alfa que es completamente opaco en todas partes. Eliminarlo no cuesta nada visualmente y reduce el archivo de forma medible. Comprueba si la imagen realmente necesita un fondo transparente antes de asumir que el canal es obligatorio, ya que la mayoría de las imágenes colocadas en una página blanca no lo necesitan.
Comprimir un PNG, ¿hace perder calidad?
La optimización de PNG sin pérdidas no pierde nada, mientras que reducir los colores o las dimensiones cambia la imagen de forma permanente. Estas 3 técnicas se describen con frecuencia juntas y no son equivalentes.
La optimización sin pérdidas reorganiza la forma en que el archivo almacena sus datos y normalmente ahorra entre un 5 y un 20 por ciento con un resultado idéntico píxel por píxel. La reducción de paleta y el redimensionamiento alteran la propia imagen, lo cual es aceptable para copias de entrega e inaceptable para archivos maestros. Conserva el original siempre que la reducción no sea reversible.
Cómo solucionar una carpeta entera de archivos PNG de tamaño excesivo
Procesa la carpeta en un solo lote, ya que los archivos PNG de tamaño excesivo suelen llegar en grupos desde la misma fuente. Un conjunto de documentación, una biblioteca de capturas de pantalla o una exportación de una herramienta de diseño tienden a compartir el mismo problema en su totalidad.
Suelta hasta 500 archivos a la vez, o arrastra un archivo ZIP directamente, y define las dimensiones y el formato una sola vez para todo el conjunto. Todo se ejecuta dentro de tu navegador en tu propio procesador, por lo que las capturas de pantalla internas, los diseños de productos y la documentación de clientes nunca llegan a un servidor. No se sube nada, por lo que no hay política de retención que leer ni nada que quede registrado después.
Soluciona la fuente del problema además de los archivos. Una herramienta de captura de pantalla configurada para guardar PNG a resolución retina completa seguirá produciendo archivos de 8 MB indefinidamente. La mayoría de las herramientas de captura permiten un formato predeterminado y un factor de escala, y cambiar ambos una sola vez elimina la necesidad de procesar capturas de pantalla de nuevo después de cada artículo de soporte.