mobile web site , which image type best

Lot of user opening my site in mobile,

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

开发者_JS百科jpg,gif,png ,

Which one is best ?

---

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.

---

There is no single "best" image type. The image that loads the quickest is the smallest one. But quick loading does you no good if your image is distorted and unidentifiable.

Pick image format base on the type of image you are trying to render:

• JPEG is hands down the best for photos 99% of the time when you consider perceived image quality relative to file size; but JPEG's lossy compression algorithm relies on the existence of noise (lots of soft/subtle color transitions) and a lack of sharp lines/edges in the source image for the best effect. Never use JPEG for rasterized text!
• PNG is the best option for rasterized images comprised of sharp edges and smooth/solid color blocks. Basically, anytime you need clean/lossless images (logos, icons, UI elements, text, etc.—anything but photos/paintings basically), you'd use PNG. It is also the only real option when you need alpha channel/partial transparency.
• GIF is the only universally support animated image format, but aside from that I would just use PNG in most cases.
• SVG is for vector images, but I'm not sure how many mobile browsers support it.

---

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).