website design - 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 file size of the two options (the other being no compression) I still get an image that is on the order of a few MB, which, since it is going to be a web asset, I would like to be in the KB and not the MB's. How do I go about intelligently compressing this image to a ballpark range of a few thousand KB?

Answer

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. https://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.