Photoshop: cómo reducir el tamaño de un PNG para uso web

Tengo un archivo PNG que es 2042 x 1250 y tiene 6,1 MB. Cuando abro con Photoshop y hago "Guardar como> PNG 24" y elijo el tamaño del archivo comprimido de las dos opciones (la otra es sin compresión) sigo obteniendo una imagen del orden de unos pocos MB, que, dado que va a ser un activo web, me gustaría estar en el KB y no en los MB. ¿Cómo hago para comprimir inteligentemente esta imagen en un rango de unos pocos miles de KB?

Los detalles geek (que no pediste)

Algunos formatos de imagen, como JPG, admiten compresión con pérdida . Cuando se guarda una imagen comprimida con pérdida y luego se vuelve a mostrar, la imagen no es 100% exactamente como la diseñó, sino que simplemente se "acerca" a ella, como un boceto. Se pierde parte del detalle original . Como no hay expectativas de precisión, las imágenes comprimidas con pérdida tienen el lujo de almacenar poca información sobre el diseño original, lo que resulta en archivos pequeños. Incluso le permiten especificar qué tan preciso debe ser el resultado: cuanto menos preciso sea el resultado, más pequeño será el archivo.

Por otro lado, el formato PNG, por diseño, admite la compresión sin pérdida . Esto significa que después de guardar la imagen en un archivo, cuando se vuelve a mostrar, todos los píxeles se representan exactamente como los diseñó sin perder ningún detalle. Esto es genial, pero desafortunadamente significa que tiene que almacenar mucha información para representar la imagen perfectamente, lo que resulta en archivos grandes.

El PNG hace lo inteligente para optimizar la información que necesita antes de guardarlo en un archivo, pero no puede especificar, como lo hace con los JPG, qué tan comprimido o preciso desea que sea el archivo. El resultado es tal cual y no tiene control sobre qué tan grande será el archivo.

Algunas sugerencias

Dicho esto, hay algunas cosas que puedes hacer para intentar obtener un archivo más pequeño.

• Las áreas grandes de colores planos se comprimen mejor que las áreas con diseños complejos. Vea si puede simplificar su imagen.
• ¿Tienes mucho espacio negativo alrededor de la imagen? Intenta recortarlo al mínimo.
• ¿Estás usando transparencia? Si no, considere guardar la imagen como JPG.
• Si no puede guardarlo como JPG por algún motivo, pero no está utilizando la transparencia, desactive la casilla "transparencia" de las opciones de guardado. Esto reducirá un poco las picaduras de su resultado final.
• Considera cortar la imagen en partes y componerla en el HTML final, como una especie de rompecabezas. Puede guardar las partes que requieren transparencia como PNG y las otras partes como JPG altamente comprimidos. El resultado total debería ser menos pesado.
• Use una herramienta de compresión PNG (por ejemplo, https://tinypng.com/ ). Eso sí, estas herramientas utilizan un algoritmo con pérdida. Intentan simplificar su imagen para poder guardarla como un archivo más pequeño. Reducen drásticamente el tamaño de su archivo, pero el resultado final puede perder demasiados detalles. Siempre puede probarlos y juzgar el resultado según la aplicación.

Si comparte su imagen, puedo darle algunas sugerencias.

Intente agregar una capa de ajuste Posterizar a la imagen y reduzca la cantidad de colores. Creo que aún puede conservar la alta calidad y reducir el tamaño del archivo mediante este método.

Un PNG de 6.1 MB está lejos del rango de KB, por lo que las sugerencias de Cokypup serían lo mejor.

Para otros PNG que puede crear, la mejor manera de guardarlos para uso web es guardarlos en Photoshop con "Guardar para Web" en lugar de "Guardar como". "Guardar para Web" de Photoshop hace una optimización que reducirá drásticamente el tamaño del archivo.

Luego, seguiría con una herramienta de compresión para PNG, como Tiny PNG.
Tiny PNG utiliza una compresión con pérdida como lo haría al guardar un JPG. Reduce drásticamente el tamaño del archivo y, como puede ver a través del ejemplo en el sitio, la compresión con pérdida que realiza apenas se nota.

Probablemente no hace falta decirlo, pero muchas personas se olvidan de establecer su resolución en 72 píxeles / pulgada para los activos web.

Imagen> Tamaño de imagen> establece la resolución en 72 ppp.