<img/> or CSS

[eranga262154]

What is the best way to add an image to a web page, if I want to load up the page quickly?

Using traditional <img/> tag or through CSS file…..

[RobDog888]

I dont think there is a difference. What you will want to do is make the image optimized for smaller size and only loose a minimal amount of quality that is acceptable to you.

[penagate]

There is no speed difference, however there is a semantic difference.

Use an image element if the image is relevant to the page content. The page should make sense with CSS disabled.

Use a CSS background-image property if you're just adding visual effects to the page that have no bearing upon the content.

[Merri]

PNG is very good for graphics that don't have many colors or that have colors that blend nicely together. There are optimizers that minimize the file size.

GIF works the best for the smallest and least colorful graphics (ie. two or 16 color graphics).

JPEG works for everything else.

Another thing that affects page loading is the amount of files: less files to load is usually better with slow connections. Loading from one server is also faster than loading from two or more servers. With fast connections you can't really see the difference.

[the182guy]

One more thing, using a <img> tag gives you the opportunity to enhance your page's SEO by providing a description in the alt attribute

[eranga262154]

I dont think there is a difference. What you will want to do is make the image optimized for smaller size and only loose a minimal amount of quality that is acceptable to you.

If the image is too large I can cut it into small parts, isn't it

[eranga262154]

GIF works the best for the smallest and least colorful graphics (ie. two or 16 color graphics).

Correct

All the time use GIF. Easy to work with it, even on the paint.

[the182guy]

Correct

All the time use GIF. Easy to work with it, even on the paint.

MS Paint for graphic design????

/me calls the men in the white jackets.

[eranga262154]

MS Paint for graphic design????

/me calls the men in the white jackets.

Just for the simple design, like a icons or a small images.