Images can play an important part when building an app. Whether it’s for desktop; mobile; or Web, there’s a chance you’ll need icons or backgrounds at some point.
Three popular formats (in alphabetical order) are JPG, PNG, and SVG. In this article, we’ll look at and compare the pros and cons of the first two. As SVG is conceptually different, we’ll explore it in a later article.
Taking Things Bit by Bit
An image in either JPG or PNG format is a bitmap. The specific process of encoding/decoding each format differs, but they work in the same way once decoded: an image is represented as a fixed-sized grid where each pixel (i.e. grid ‘slot’) is set to a specified colour. Table 1 summarises a few differences between the two formats and may help when deciding which to use.
| JPG | PNG | |
|---|---|---|
| Compression | Lossy | Lossless |
| File size | Smaller than PNG | Larger than JPG |
| Identical to pre-encoded version | No | Yes |
| Supports transparency | No | Yes |
Storage Requirements
JPG
In general, storage requirements for a JPG file will be less than those for a PNG. However, this might not always be the case: it will depend on an image’s complexity, dimensions, and the specific encoder settings used.
When creating a JPG, the encoder will analyse an image to find parts that can be discarded while having minimal impact on how it’s perceived. This data is then removed to help achieve smaller file sizes. The transformation is lossy: an encoded image won’t be identical to the original version. And depending on the compression level, this process could introduce noticeable artefacts.
It’s also worth noting that repeatedly saving a JPG in a typical image editor will gradually degrade image quality as data is lost each time it’s (re)encoded. For this reason, it’s a good idea to only save an image as a JPG as a final step after any required edits have been made.
While encoded images will contain less data than the original, it might not be noticeable with gentler encoder settings. And if data sizes are important (e.g. to minimise download times) JPG is certainly worth considering.
PNG
While PNG images can also be compressed, the compression is lossless. An analogy would be using 7-Zip to create a compressed archive of a file. We can extract its contents at any time, and the result will be identical to the original. No data is lost in encoding.
This makes PNG a good choice where we want the highest possible image quality, e.g. for charts and diagrams where clarity and/or legibility is important.
The downside is that because all data is kept, a PNG encoded file can be larger than its JPG counterpart. To give an idea of the differences in file size, I took a screen capture of the image shown in Image 1 and saved it (separately) in both formats as a 521x782 image. The resultant file sizes are shown in Table 2.
| JPG | PNG | |
|---|---|---|
| File size (bytes) | 458,643 | 628,062 |
Image Transparency
Depending on how we plan to use our images, we might need transparency (or alpha channel) support.
This usually isn’t the case for photos; we typically don’t need to see ‘through’ them, though an exception might be if we wanted to lower an image’s opacity to act as a watermark or subtle overlay.
But the argument is more persuasive for icons. Many modern UIs feature buttons and menus that become highlighted when a mouse (or other pointing device) hovers over them. In this context, an icon would stand out for the wrong reasons if the entire rectangular area within its image boundaries stayed the same colour while the rest of the control’s appearance changed to its highlighted state. In this scenario, we’d ideally like an image’s background to be transparent, instead of a solid colour. As we can see in Table 1, this is possible with PNG but not with JPG.
Summary
JPG and PNG are two formats you might use for images when building an app. Depending on intended use, one might be more suitable than the other.
JPG files are typically smaller and so allow for shorter loading times. Depending on the use case, this could make your app feel more responsive. However, this is achieved by removing data from the image. This potentially results in less clarity, or artefacts being added to an image at more extreme settings.
PNG files preserve all image data and are a good choice when you need to prioritise image quality. While they can be larger than their JPG counterparts, the difference in file size may not be significant and will depend on an image’s complexity, its dimensions, and the settings used.
When images are used as photos, you might prefer JPG for a smaller data footprint; this can lead to an app feeling more responsive due to shorter loading times. For charts; diagrams; and icons, PNG gives you the highest possible image quality. Furthermore, it supports transparency; this can give your app a more natural feeling when used on buttons and other UI controls.
Thanks for reading!
This article is from my newsletter. If you found it useful, please consider subscribing. You’ll get more articles like this delivered straight to your inbox (once per week), plus bonus developer tips too!
Top comments (0)