When should the PNG format and JPG format be used?

As we all know, if it's for web transmission or website formats, we mostly use the PNG format.

For photos, the majority are in JPG format.

So, what format should we save the commonly used screenshots on our website in?

Photo Screenshots

Photo screenshots should be saved in JPG format.

Although nowadays our storage space requirements are becoming less stringent, smaller is still better when possible.

It helps reduce bandwidth usage during network transmission.

Take the following photo as an example; after pixel cropping, we save it in two formats to compare.

The JPG format size is 154 KB.

If saved as PNG, the size becomes 912 KB.

For the same content, the PNG file size is nearly 5 times larger than JPG, meaning it takes more time to transmit over the network.

Program and Interface Screenshots

Often, during program development, interfaces are relatively simple.

And the backgrounds mostly consist of text.

For example, in the following screenshot, when saved as PNG, the entire file size is 29KB.

When saved as JPG, the file size becomes 129KB.

Here, the JPG format is again 5 times larger than the PNG format.

Summary

Simply put, there's no one-size-fits-all format for everything.

PNG performs poorly with high-pixel images, often resulting in larger file sizes.

For screenshots, if they are simple, like editor screenshots, you can save them as PNG. If the screenshots contain slightly more color and pixels, it's better to save them as JPG.

This also helps reduce the amount of data transmitted over the network.