mobile web site , which image type best

Question

Lot of user opening my site in mobile,

Tell me which image type will load quickly in mobile device ,

jpg,gif,png ,

Which one is best ?

Answer 1

From a quick read, it seems that jpeg would be the best option. However, that is dependent on any specific needs you may have for some images (ie jpeg does not do transparent backgrounds, etc.)

Also, especially for a mobile site, if the images are frequently used parts of the website's layout (ie buttons, etc.) then using CSS Sprites is a good practice as it reduces the number of elements being downloaded to the user (of course, at the tradeoff that the image(s) which are downloaded are larger).

Answer 2

Go with PNG8 where possible and limit the color palette. Try to only use as many colors as strictly needed not more.

There are PNG tweaking tools which allow you to get rid of unnecessary chunks of that PNG. For more information on PNG chunks there is the PNG chunks specification found here.

http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html

The tweaking tool I was talking about can be found here. It runs on Linux using wine as far as I have tested it.

http://entropymine.com/jason/tweakpng/

Additionally TinySVG is a pretty interesting format. SVG graphics allow lossless rescaling and because it is in fact a XML file you can modify it in a programmatic way.

EDIT: One note on JPEG graphics. If the file size exceeds 10kb save it progressive if it is under 10bk save it baseline. It is a small optimization for JPEGs.