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


10

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?


1
Utilice el archivo -> guardar para la web en su lugar y elija png 24 de la lista de formatos de archivo (JPG suele ser el predeterminado).
AndrewH

¿Qué te hace pensar que un archivo se puede comprimir tanto como quieras? Es posible que desee cambiar a JPEG y jugar con la configuración de Baja calidad.
usr2564301

Respuestas:


13

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.


TinyPNG convierte a PNG de 8 bits que parece un GIF.
Hannes Schneidermayer

@Heanz. Cierto. Se convierte a 8 bits. Pero no es un GIF, sin embargo. Es compatible con la transparencia alfa. En mi experiencia, nunca he notado la diferencia entre el PNG completo y el que producen.
cockypup

@cokcypup Para logotipos que pueden ser ciertos, pero para un rostro humano, de ninguna manera.
Hannes Schneidermayer

@Heanz, nunca lo he usado para rostros humanos, pero lo uso regularmente para fotos de envases cosméticos. No puedo decir la diferencia en esos. Aún así, mi comentario sobre alfa es correcto. El formato GIF no admite transparencia alfa.
cockypup

2

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.


¡Funciona de maravilla!
Christian Strang

0

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.


Apenas perceptible depende en gran medida de la imagen que está alimentando a través del algoritmo que he encontrado, use con precaución y nunca sobrescriba su archivo original.
PieBie

Se está convirtiendo a 8 bits y parece un GIF en imágenes coloridas.
Hannes Schneidermayer

-1

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.


que no tiene efecto en las imágenes utilizadas para la web, solo el tamaño en px
Luciano
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.