: Photoshop: how to reduce the size of a PNG for web use I have a PNG file that is 2042 x 1250 and is 6.1 MB. When I open with Photoshop and do "Save As > PNG 24" and choose the compressed

@Sherry646

probably goes without saying, but many people forget to set their resolution at 72 pixels/inch for web assets.

Image>Image size>set resolution to 72 ppi.

Vote Up Vote Down

@YK2262411

Try adding a Posterize adjustment layer to the image and reduce the number of colors. I find you can still retain high quality and reduce the file size through this method.

Vote Up Vote Down

@Si6392903

A 6.1MB PNG is far from the KBs range, so Cokypup's suggestions would would best.

For other PNGs you may create, the best way to save them out for web use to be save in Photoshop with "Save for Web" rather than "Save As". Photoshop's "Save for Web" does some optimization that'll dramatically reduce file size.

Then I would follow that up using a compression tool for PNGs such as Tiny PNG
Tiny PNG uses a lossy compression like you would when saving out a JPG. It dramatically reduces the file size, and as you can see through the example on the site, the lossy compression it performs is barely noticeable.

Vote Up Vote Down

@Alves566

The geeky details (you did not ask for)

Some image formats, such as JPG, support Lossy Compression. When a Lossy Compressed image is saved and then rendered back, the image is not 100% exactly as you designed it but just "close" to it, sort of a sketch. Some of the original detail is lost. Since there is no expectation of accuracy, the Lossy Compressed images have the luxury of storing little information about the original design, resulting in small files. They even allow you to specify how accurate the result should be: the less accurate the result needs to be, the smaller the file is.

On the other hand the PNG format, by design, supports Lossless Compression. This means that after the image is saved in a file, when it is rendered back all the pixels are rendered exactly as you designed them without losing any detail. This is great, but unfortunately it means that it has to store a lot of information to render the image perfectly, resulting on big files.

The PNG does its intelligent thing to optimize the information it needs before saving it into a file but you cannot specify, like you do with JPGs, how compressed or accurate you want the file to be. The result is as is and you have no control on how big the file will be.

Some suggestions

Having said that, there are a few things you could do to try to get a smaller file.


Big areas of flat colours compress better than complex patterned areas. See if you can simplify your image.
Do you have a lot of negative space around the image? Try to trim it down to a minimum.
Are you using transparency? If not, consider saving the image as a JPG instead.
If you can't save it as a JPG for any reason, but aren't using transparency, then untick "transparency" from the saving options. This will shave a bit of bites from your final result.
Consider cutting the image in parts and composing it in the final HTML, like some sort of puzzle. You could save the parts that require transparency as PNGs and the other parts as highly compressed JPGs. The total result should be less heavy.
Use a PNG compressing tool (e.g. tinypng.com/). Mind you, these tools use a lossy algorithm. They try to simplify your image in order to be able to save it as a smaller file. They do reduce the size of your file dramatically but the end result might loose too much detail. You can always try them and judge the result depending on the application.


If you share your image, I can give you some suggestions.

Vote Up Vote Down