views:

28

answers:

3

like

img { background-color:color: color matched to the theme}

or

img { background-image:url (a very very tiny gif image with the text "image loading") }

I'm thinking in the benefit of this when user access site on slow connection then background color will give clue about something is there which is diffrent than text content..

+1  A: 

Sure, if you want to. In most browsers a space in which an image will load is already indicated, but there's nothing stopping you from doing a background color too if you like. I typically see this on body tags or other block-level tags that have background images, but I suppose you could do it on an image itself too.

In all honesty, I don't think this will actually make a site more usable than one that lacks this "feature."

Aristotle
I think "accessible" is more appropriate than "usable" here.
strager
+1  A: 

An image-heavy site will probably look awful with a 'loading' background image, but if your site is not full of pictures, go ahead.

A small loading image is a nice touch, such as those from http://www.ajaxload.info/

Seb
yes it's only 673 bytes in size.
metal-gear-solid
+1  A: 

It's certainly a good approach. I would however try to assign as much as possible the same background color to the background as the strongest color of the actual background image. This way the website will still be representative whenever the client has disabled all images (as some bandwidth-limited users do or some handhelds by default do) or when its browser doesn't support images. The Web Developer Toolbar is helpful in this, in the Images menu you can choose to hide images so that you can see how it would look like without (background) images. I however wouldn't put a loading gif in. You can however consider to save the image interlaced (supported on GIF and PNG).

BalusC
+1 thanks BalusC for your input. background color + gif image we can use both. and what is "interlaced"
metal-gear-solid
Interlaced: image is rendered in layers instead of from top to bottom.
BalusC