Mobile application image format: PNG or JPEG

In this Design Guide for Mobile http://www.aliyun.com/zixun/aggregation/12192.html ">, Jen Gordon explains how to export PNG or JPEG image formats for mobile applications.

I recently received a good question, the questioning person is creating an application that needs to load the picture with the grapes. To be exact, his question is this:
"Should I save my grape picture as .png or .jpg?
Very good question! Anyway, the documentation is well documented. The .png image is the recommended image format for the iOS platform, but for web based projects we all know that .jpg is a better format for photos.

First, let's look at the nuances of each format. Click here if you want to know the real annoying details.
JPEG - the standard format for photos, does not support transparency.
GIF - is limited to 256 colors so it works great for large solid colors and simple images. It supports transparency but will have jagged edges.
The beautiful combination of PNG-.jpg and .gif, with the quality of the .jpg image and the transparency of the .gif, is not jagged.

The simplest answer for iOS native apps is to always use PNG unless you have a very, very good reason not to use it.
When building iOS apps, Xcode optimizes .png files in one way and does not optimize other file formats. It is optimized quite well, you can see the details here. As best explained by Jeff Larmarche's blog:
"When you use any other file type (or you load an unoptimized PNG file), your iPhone needs to do byte swapping and alpha preloading (and perhaps redo alpha multiplication on display) when loading." Your application The program basically needs to do the same thing that Xcode does, but it does it at run time instead of at build time, which consumes both processor and memory resources. "

Not all of the images you see in iOS apps are part of the application binaries. This means that images may be downloaded from the web and plugged into the application from outside the real application. In this case, it may be necessary to optimize the picture to the smallest possible size, which may also mean that formats other than PNG are usually used.
The following is an example of our discussion. You can see I create a grapes picture for the iPhone's screen, 320 * 489px, 72dpi:

When the Save as Web and Device Format dialog pops up (File -> Save as Web and Device Format) you can see the difference between saving a .png and .jpg as a contrast.
File size - this is probably the most significant difference. The size of .png is 258k, while .jpg is only a small 18k. This is a huge difference. If your program wants to download these images from the web, your users may not be able to stand the extra time to wait for the .png download.
Colors and Contrast -.jpg are richer in color and more saturated. .png looks faded.

So here are some useful tips on when to use .jpg and .png for web downloads:

Well, we can not talk about them.
TIF
The .tif (or .tiff) file is not found in the "Stored as Web and device format" environment. In general, a .tif file is a high-quality image that you can save both transparency and layer information. They are very much used for print design.
GIF
The .gif file has always been used for web design and can retain the same transparency as .png. There are two main problems with using .gif:
1, if you export a photo (as shown below) ,. gif both file size and picture quality are unable to compete with .jpg:

2, if you once again consider using. GIF export drawing. .gif The way to preserve transparency is different from .png. Take a look at the example below and I want to keep the bright colors around the button. I cut out this button, hidden the plaid background, and click on the "File> Save as Web and Device Format" pop-up dialog box:

In the dialog you can see what the button looks like when "gif" is selected. The button is surrounded by the color I selected in the Miscellaneous Edges drop-down menu. The .gif format requires that any transparent gradient requires a background (or edge) color to allow the gradient to transition. Imagine what the button would look like on my grid background, alas.

This is why .png is a great thing. See what is really transparent, right? Plus a selected background layer, it will still be seen in the sample!

In a nutshell, for native iOS programs that provide binary images and built using Xcode, use the .png format. The only exception is that you need to download images from the web to your application. This is the biggest optimization!

View source text in English

Source: http://rockux.com/