PNG (Portable Network Graphic)

The Save For Web panel is open in Photoshop CC 2017 and Gif, JPG and PNG versions of the image are shown.
PNG is one of those imaging formats that requires a specific need to use.

A common question in today's graphics workflow, especially among mobile developers, is , "Where do png images get used?" We will get to that later on in this piece but let's first turn our attention to the png format itself.

The PNG format is an imaging format that supports lossless compression and transparency. It was first developed in 1995 not as an alternate imaging format but as a royalty-free replacement for the GIF format which was patented by Unisys.

Another critical feature of this format was that it was not limited to the 256 colours used by the GIF format. This is understandable because, at that time, computers were able to display 16-bit and 24-bit colour.

The format got a huge boost when Macromedia set png as the default imaging format for its web graphics editor Fireworks. This standard persisted until Adobe, which acquired Macromedia, discontinued Fireworks CS6 support in its CreativeCloud lineup in 2013.

Regardless, PNG is finally becoming an accepted graphics standard even if not for the Web. More and more software is supporting it, users are becoming more comfortable using it, and they have come to expect support for the format within their applications. Advantages of PNG images include:

  • Lossless compression
  • 48-bit, true-color depth
  • varying levels of transparency
  • gamma correction
  • better compression, 10-30 percent smaller files than GIF
  • searchable content
  • patent-free compression algorithm

Where to Use PNG images

If you are a mobile designer or developer creating iOS projects you will always need to use the png format. The reason is , when an iOS application is developed, Xcode optimizes png files in a custom manner.

Of course, not all images found in iOS applications are "baked in".

By that we mean, images are downloaded from the web and rendered on the device. In that case, file size becomes a major issue and this is where optimization plays a huge role. At this point you have to make a decision around whether to use GIF,JPG or PNG images in your project. Let's take a look.

The image above is 800 x 536 with a resolution of 100 pixels per inch. Using Photoshop's Save For Web feature we can get a pretty good comparison of the optimization results.

  • File Size:  There is a serious difference. The GIF image weighs in at 171.6 k, the PNG image is a bulky 467.2 K and the JPG image is 16.2 k. If you care about your users, you can be sure they aren't going to wait around for the png file to download and render. Of course this becomes a non-issue with today's web browsers and the speeds offered by ISP's.
  • Image Quality: The jpg image, despite its paltry file size does retain much more detail and colour than its PNG and GIF counterparts. You can see this in the blurred background. Both the PNG and GIF versions are a bit washed out due to their limited bit depth.
  • Transparency: This is where PNG shines. If you need content to show through an image, PNG is the only format  that offers transparency. Even though GIF does have this feature, keep in mind that a GIF image will require any transparent gradient  to have a background colour (matte) that it can transition into. This rarely, if ever, results in clean edges.

    From this you can readily gather where and when to use a GIF, PNG or JPg image:

    • Use PNG where transparency is a requirement. Also use PNG where images are purely graphical such as a flattened drawing out of Illustrator. As you can see from above, photos are not accurately rendered in the png format.
    • Use JPG when there is no need for transparency or where there requirement is to preserve  the image quality, colour and colour saturation in the image.
    • GIF images are commonly used for web design and they do contain a transparency feature. The problem here is photographs converted to gif images have an overly large file size and due to the limited colour palette Gif images do introuce banding into gradients or blurred areas.

    The bottom line is, if you are developing  native iOS applications for the iPhone or iPad then png is the way to go.

    If your images are being downloaded, then jpg is the obvious solution.

     

    Further reading: More About PNG

    "Web Graphics in the New Millennium" > Page 1, 2, 3, 4