March 11th, 2013, 03:18 AM
Can I not use CSS sprite for a background image??
I'm trying to use CSS sprite for the first time to lighten the page load and have this question.
I know I was supposed to use CSS sprite for images like small icons, navigation's button image, link buttons and other "small" images that you may see on a website.
But can I not use CSS sprite technique for one big 1280*1024 type of background(or wallpaper) image because I was thinking that is the biggest image that should delay loading process the most?
I would like to get this guys included in the sprite map so that browsers don't have to send request for the biggest image on the whole entire site.
March 11th, 2013, 02:12 PM
I believe the answer is no unless there are some newer CSS techniques for handling images that I'm not aware of. If the container for the image is larger than the image, then you can't put it into a sprite. Since this is true of the <body>, you can't. If you put the background image into something like a <div> instead, then you could potentially put it into a sprite as long as it doesn't repeat.
Using a sprite doesn't speed up the load time of big images; the image data takes the same amount of time to transfer regardless. What a sprite does is reduce the number of HTTP requests. This is most effective at reducing the load time for small images, because the HTTP request for a small image represents a substantial part of the time required to retrieve the image, whereas for a large image the HTTP request does not represent a substantial part of the time required to retrieve the image.
March 12th, 2013, 01:29 AM
Oh okay and thanks for the detailed explanation.
that makes sense and I appreciate your time.
I hope the wall paper image doesn't delay loading time after getting small images on CSS sprite.
Originally Posted by E-Oreo