PDA

View Full Version : Image layout


dzwestwindsor
05-16-2010, 12:39 AM
Hey guys

I was observing NASCAR.com, and I looked at the background image for the site.

Here it is-- http://i.cdn.turner.com/nascar/.element/img/2.1/global/util/sprite.png

I mean.... you think thats a good method, by putting montage of things?

Does it nessasarily load faster, because its only one image? Or do you think it's a bad idea to do that?

Just wondering

edbr
05-16-2010, 02:28 AM
the image is 215 kb so that dictates the speed of its download. good method?
as apposed to creating a html layout , not for me its not

gentleone
05-16-2010, 07:00 AM
I think it's the greatest thing to use one 'background' image for several different elements.

Looking at that Nascar image than instead of 50 HTTP requests there is now only one, so you reduce the server load by using the CSS sprites technique. All the background images of the navigation (hover state and active state) are in that one image, so no flickering if you hover over a button than if you would use two separate background images for that buttton.

I can only recommend to use CSS sprites wherever you can, because personally it makes my life as a web designer much more easier ;)

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

DWcourse
05-16-2010, 02:43 PM
But I think you could have accomplished the same thing with a few, much smaller images. And if you used text in your menus you'd have a lot more flexibility when updating the site (it's not like that fint is somehow special.

gentleone
05-16-2010, 07:16 PM
But I think you could have accomplished the same thing with a few, much smaller images. And if you used text in your menus you'd have a lot more flexibility when updating the site (it's not like that fint is somehow special.

Of course could you accomplish the same thing with a few smaller images and that's what 'we' use to do normally before the sprite technique was introduced into web development.

The great advantages of this technique is to reduce the server load (one HTTP request instead of heaps), faster page loading and no annoying flickering at mouse-overs.

I have to say that that nascar master image is not the perfect sprite image (I would also not use the box backgrounds in it myself), but if you have a rollover image menu (with a non web safe font), loads of buttons and icons than I still would recommend to use a master image for all those and set their individual position with the background-position property.

dzwestwindsor
05-16-2010, 07:30 PM
I'm guessing that editing might be a difficult task... because if u cahnge the coordinates, u gotta change all of them in the CSS

DWcourse
05-16-2010, 07:51 PM
It's just a lot of effort for minimal benefit. I don't see that a few extra server calls is going to hinder things. Especially if the download is considerably smaller.

gentleone
05-16-2010, 08:41 PM
I'm guessing that editing might be a difficult task... because if u cahnge the coordinates, u gotta change all of them in the CSSIn the beginning this can be quite confusing, but the more you work with it the easier and quicker this goes, and just use your guides in Illustrator or Photoshop, so that you know exactly your x and y pixel settings.

I don't see that a few extra server calls is going to hinder things. Especially if the download is considerably smaller.But we're not talking about a few. A few is to me 2 or 3 images :). Take the nascar image for instance... those are around about 50 background images and the download size is the same. But I agree the fullest benefit for server load is if it is huge site with lots of traffics. For small sites with less traffic it won't matter so much.
But than I would use CSS sprites just to get rid of that annoying flickering on mouse-over buttons ;)

DWcourse
05-16-2010, 08:50 PM
That's only if you count the menu as 30 images and I would do it with just one. There are other places you could combine images as well.

I like the sprites and use them. I just think forcing every graphic on the site into one image is overkill.

gentleone
05-16-2010, 09:28 PM
Yes... that nascar sprite is far from perfect. I would use two images (active state and hover state) for that menu in the sprite and the font they used is not special at all so it could also be just an arial with 'text-transform: uppercase' in the CSS :)

domedia
05-17-2010, 02:38 PM
I think http requests are considered the main cause of slow websites. A browser will only do a few http requests at the same time from the same domain. Using a css sprite is a huge time saver, particularly if you have alot of images. Another approach is to put all your images on a subdomain. They will get their own allocated amount of http requests.

Yahoo has written some great stuff about site speeds
http://developer.yahoo.com/performance/rules.html

d a v e
05-17-2010, 06:37 PM
you might also want to read this cautionary tale ;)

http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/

domedia
05-17-2010, 06:59 PM
I read it.. not overly impressed.. 8)

and why such use of sprites could in many cases be a waste of time. just.. wow.

Reading the comments in that article was fun though.
I’m sorry but this is the worst article I’ve read on Smashing… You’re turning people off of using a perfectly valid technique using nothing more than opinion. If you’re going to be a skeptic and make a valid argument you need to provide some facts and figures. Every section just seems to end with a loose conjecture as to why sprites are bad but without any numbers or even anecdotal experiences to reinforce the conjecture.