The best image format for mobile app
Tags: ios, android, programming, mobile
Published: 2022-12-23 20:10:49

Throughout the years of app development (on both iOS and Android platforms), I ran into the same problem, what format should I use, what would be the optimal format for this OS (Android or iOS), that OS version, and the hardware that the device has, can it run what I’m building performance wise?
I decided to write about this issue. In the following text, I will describe the various formats and how and when we could use them.

## iOS
iOS 11+ — Since iOS 11, Apple has introduced a new iPhone photo format, `HEIC` format for iOS devices. `HEIC` is more efficient when it comes to file size while keeping the same image quality compared to `JPG`.

iOS 10 — Before iOS 11 the recommended image format was `PNG`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xewncbdh2zdtvtgq1jw8.png)

## HEIC vs PNG
The new file format `HEIC` stores images with smaller file sizes when you compare them to the common image file format i.e., `PNG`.

Even though the size of the `HEIC` image is smaller than the `PNG` image file, the image quality is similar to the `PNG` format.

Compared to the `PNG` file, the `HEIC` file is far more flexible as it can store a single image or sequence of images. While on the other hand, the `PNG` file can hold only one image.

In addition to it, the `HEIC` file contains an image, along with its metadata.

## HEIC vs JPEG
**Compression**
HEIC offers a much more efficient, modern compression method than the older JPEG format. HEIC breaks images into significantly smaller files without affecting quality.

**Storage space**
Most HEIC files will take up significantly less room than JPEG on a computer, tablet, or smartphone.
Their innovative compression process means HEIC can use as little as half the space that a JPEG file would.

**Image quality**
When it comes to both compression and image quality, HEIC files win out over JPEG. The HEIC format can enhance the quality of photos with transparency and broader dynamic range capabilities.

**Compatibility**
While JPEG has almost universal compatibility, HEIC files don't. HEIC has become more commonplace in recent years, but its primary use is on Apple devices. You may even need to convert your HEIC files to JPEG when transferring photos from an iPhone to a PC.

**Transparency**
HEIC supports image transparency in a similar way to PNG files, on the other hand, the JPEG format doesn't support transparency.

## Extra Note
But that’s not the end of it, on older devices that still support iOS 11 (iPhone 6 for example) `HEIC` might still work but due to slow hardware, it might take a long time to render a `HEIC` format image.
This means that the iOS version is not the only parameter to determine the image format, it should also come from the device itself.

## Android
Android 4.2.1- — The recommended image format for the older Android version is `PNG`

Android 4.2.1 (API level 17)+ — Support for `webp` was added.

Android 12+ — Support for `AVIF` was added on Android 12+.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkz4ij6jzg4fapqakknx.png)

## WebP vs PNG
This format provides superior lossless and lossy compression for images. Using `webp`, developers can create smaller, richer images. `webp` lossless image files are, on average, 26% smaller than PNG. These image files also support transparency (also known as alpha channel) at a cost of just 22% more bytes.
`webp` as a format can support both lossy and lossless modes, making it an ideal replacement for both `PNG` and `JPG`. The only thing to keep in mind is that it only has native support on devices running Android 4.2.1 (API level 17) and higher. Fortunately, most devices satisfy that requirement.

## WebP vs JPEG
According to this [study](https://developers.google.com/speed/webp/docs/webp_study), we see that the average `webp` file size is 25%-34% smaller compared to `JPEG` files, there results of the study indicate that `webp` can provide significant compression improvements over `JPEG`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inx37yx92hgnocpdhfp4.png)

## Background
`AVIF` is a container format for images and sequences of images encoded using AV1. `AVIF` takes advantage of the intra-frame encoded content from video compression. This dramatically improves image quality for the same file size when compared to older image formats, such as `JPEG` or `PNG`.

## AVIF vs PNG
As a lossless compression file format, `PNG` images are notorious for their large file sizes. `AVIF` supports both lossy and lossless compression. It is this versatility that gives `AVIF` an edge when it comes to file size.

Decoding a `PNG` is instant, thanks to the lack of complexity, AVIF tend to be more complex, therefore slower systems may struggle a bit more to decode the image.

Currently, `PNG` still holds is the best format for lossless compression with reduced file sizes and greater platform support. `AVIF` is an excellent alternative for delivery if you’re willing to turn to lossy compression to reduce the file size, but comes with complexity that older platforms with old hardware may find challenging to render.

## AVIF vs JPEG
**Quality**
`JPEG` suffers in terms of compression quality today. Indeed, even the more modern `JPEG 2000` can offer better overall compression.
On the other hand `AVIF` tends to provide some of the best results we can achieve with lossy, non-photographic images.
Those who are dealing with an image with low fidelity `AVIF` will out-perform `JPEG` . But there are cons `AVIF` as well, `AVIF` image does not support progressive rendering, so files must be downloaded entirely before they can be displayed.

**Speed comparison**
`JPEG` is outdated and was written before the invention of multicore CPU chips. It is not designed to work with a sequential process where there are multiple cores.
`AVIF` can work in parallel with multiple cores which makes it a more suitable form of image compression.

**Animation**
`JPEG` is an image format. This means that it was designed to show still images.
`AVIF` is based on an actual video codec and provides animation capacity which means it can support animations and `JPEG` cannot.

**Overall**
Even though `JPEG 2000` was a substantial improvement from the original `JPEG` format it still cannot compete with `AVIF` in many ways:
`AVIF` has become the ideal choice for those who need to manage encoding in a low-bandwidth setting, even though `JPEG` supports progressive rendering it still lacks a lot of features that `AVIF` offers.

**Extra note**
Some devices with slow/old hardware might be able to get `AVIF` or `webp` based on their Android version but their hardware may fail to render those formats (due to low memory) or it could take a long time (due to a slow processor/ graphics processor).
Same as iOS the Android optimal format can’t only be determined based on the Android version but we’ll have to consider the Android device as well.

## Older Versions Format
## PNG vs JPEG
I want to raise another point here, for the older versions I did state that `PNG` will be the optimal image format, but that’s not always true, `PNG` vs `JPEG` decision should be based on the complexity of the image and not solely on the platform they are running on.
For example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4cdl4s8k99xavkn1ugs.png)

The image above shows two images that come out quite differently depending on which compression scheme the developer applies. The image on the left has many small details, and thus compresses more efficiently with `JPG`. The image on the right, with runs of the same color, compresses more efficiently with `PNG`.

## How to choose a format for Android?
The following image provides a simple visualization to help you decide which compression scheme to use, one thing that should come into account, if the device supports Android 12+ you should consider (based on the restrictions I described here) using `AVIF`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2h6rym44elsfgu6yobj.png)

## How to choose a format for iOS?
Taking into account the restrictions I mentioned before, the decision should be pretty easy, iOS 11+ should always use `HEIC` lower iOS version should go for `PNG`.

## Conclusion
Choosing an image format is no easy task, you must take into account a lot of parameters such as OS version, device, and image complexity.
We can always choose the easy path and set `JPG` to everything, but if we want better performance, better loading time, and overall better user experience we need to pick the correct format for each use-case.

For further reading you can click the links below:
[HEIC](https://en.wikipedia.org/wiki/High_Efficiency_Image_File_Format)
[AVIF](https://en.wikipedia.org/wiki/AVIF)
[WebP](https://en.wikipedia.org/wiki/WebP)