|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
June 24th, 2009, 09:59 AM
|
|||
|
|||
|
Replacing <img> tag with <div style="background-image: ;"> for speed improvements?
Hi there,
I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in). I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds? So for example... before Code:
<img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" /> after Code:
.thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}
<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>
Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts 
|
|
#2
June 24th, 2009, 01:04 PM
|
|||
|
|||
|
Hello, yes, using the CSS Rule, background or background-image to set an image is way better. Not only does it load the page faster, but if there are problems with the image, it will not display an ugly Red X in IE. That is the image will just not be displayed at all as it does in Firefox, but also will do this for IE Browsers as well. Definately a better idea to use the background: url('images/blah.png') no-repeat; or background-image: url('images/blah.png'); background-repeat: no-repeat; instead of using <img> tags whenever possible. And since you can link it to a style sheet for a class, you can then assign this class to any <div> <span> <td>, etc. element so it will load more than 1 time from the same call, which improves overall speed and easier to maintain your images. I use background or background-image whenever possible and suggest that everyone else does too.
Just my 2 cents 
|
|
#3
June 24th, 2009, 02:26 PM
|
||||
|
||||
|
Use background images for stuff like gradients, and as you say, decorative images. Images that add content to the page should be put in <img> tags with an alt attribute. As far as I know, there shouldn't be any page load differences because you are still loading the image.. Cache may play a part also..
__________________
"Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue
|
|
#4
June 24th, 2009, 05:31 PM
|
|||
|
|||
|
Thanks for the replies,
I experimented with the idea there and made all of the images on my homepage as background images, however it didn't really work very well as the progress bar would indicate the page was loaded and some crucial images weren't appearing, so I'm just going to leave it as it is.
|
|
#6
June 25th, 2009, 06:54 AM
|
|||
|
|||
|
Quote:
You'd be surprised, loading every image as a background image appears to make the page load almost instantly ...but without images appearing straight away (this being the only drawback). Its probably a good method to use for some things, just not what I tried it out on (http://summeraway.com ...any thoughts welcome )
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Replacing <img> tag with <div style="background-image: ;"> for speed improvements? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
