What's the best image type make web page loading faster (bmp-png-jpg- gif)

Question

html code

Answer 1

There's no "better image type"... however there's supported and unsupported ones, as well as each have some advantages against others ^^

The only bitmap file format supported in web are gif, jpg, png (in order of their hostorical addition): gif was created at first specifically for web, and have an old upgrade wich allow wide supported animated bitmap format. To be memory/bandwith efficient, and as it's an old format, limitation are essentially over the numbers of color handable: up to only 256 differents colors as color palette in a file, rather than "infinity" with other format storing rgb values on 256 level each: this allow its main advantages, to be light and non destructive since the moment you decrease the initial color used count.

Then come jpg, to be lighter even for more big sized images (gif becomes unefficient with too large bitmaps)... unfortunally, to be enough efficient at compression step, jpg is a destructive compression format, loossing quality at each save (compression), but with the possibility to control the level of compression versus visual quality... so png appears, to almost try to unite gif and jpg worlds into once new format: png can store gif kind-of type image (paletted colors) or true colors as jpg do, with or without compression loose (almost, png is designed to be a no loose bitmap compressed format: compression is less than jpg can allow, but quality is more preserved)... png can also handle animated images, but that's not a feature really widely supported, from web up to any computer fields (there are very few software that could handle them).

Well, that's for bitmap image file format.

(to be continued in another post...)

Answer 2

(continued from previous post)

Last image format available on web is svg: it's biggest advantage is to allow big high definited images infinity scalable (without the pixelisation artefact occuring when zooming on bitmaps) AND to require (more of the time) very less memory to store the image data (the code to draw the image is stored instead of the still drawed map of pixels). Realistics images/photographies aren' well suited for, and should be hard to draw as well as could becomes heavy (to store and/or to runtime build/draw). But in the other hand, embeded animation is widely possible, and svg code itself can be embeded itself in a web (html) page, as well as to be accessed through css, DOM and js dynamically...

Anyway, "make web page loading faster" is better done by minimizing the number of external linked files (each one ask for an http query to server), even if images are often badly handled and would deserve to be correctly sized and compressed ^^ To do so, one trick among others is to handle "sprite" for little images: once big image containing many smallest one, and use by displaying only some part of it at a time ;)

@Dexter:

bmp-png-jpg-gif are all four bitmaps (pixel based) files ^^ Only svg is a vector image format... and "basically" vector images are often lighter so more quick to be loaded. However, this should require a few more ressource (and so time) to be displayed once loaded, as bitmaps have just to be uncompressed and copied data, while vectors graphics need to be "builded" (ie: "draw" geometrical shape to have a final bitmap format to be displayed on screen (wich handle a bitmap in video card memory to be refeshed).

Answer 3

its depend on size of file and quality, basically pixel base file is more short time to load, than vecktor file, pixel file such: jpg,bmp,etc. vektor file png, svg etc