Nutty idea of mine. Have an imagecache image sprite module. But you say you can't use a sprite in an img tag. That is incorrect because we currently do that. Proof: http://bellevue.komonews.com/business-directory Do an inspect element on the deals image. Cool eh? (location hint pic)
Now on to the more interesting question. How should the images be grouped? There are 2 groupings I regularly see in most sites. Images on the node & images in a view. The images in a node is easily grouped, one group per imagecache preset. Example: preset called: 100x100, node has 10 images in an imagefield. Read the preset to figure out if the vertical or horizontal is "locked" and build the sprite accordingly. Then use theme hooks to create the correct html markup to use the sprite.
Views grouping is a harder problem to solve. If your using a random sort on a large set of nodes; or the fact that adding a new node just screwed up your sprite & it now need to be rebuilt.
The last thing to think about is how to name the file and what kind of directory structure to use.
This is in the idea phase right now. Came up with it after seeing the html load very quickly for the grammy site but all the images that needed to be loaded slowed it down. Don't get me wrong, that site was quick but I'm thinking it could be quicker.
Comments
Maybe I'm missing something,
Maybe I'm missing something, but in my browser that sprite isn't being used. It's using this instead:
http://content.secondspace.com/localnet/big-deal.jpg
--
Dave Hansen-Lange
Director of Technical Strategy, Advomatic.com
Pronouns: he/him/his
Looking in the wrong place
this is the deals image your looking for; its on the left side
http://img189.imageshack.us/i/businessdirectorybellev.png/
Great idea. Some of the
Great idea. Some of the arguments against generating automated sprites just went out the door.
Perhaps 960 grids can help in
Perhaps 960 grids can help in this context.
How so?
Care to explain, because I'm not seeing it. Granted none of the sites I get to touch use a grid theme, so I'm ignorant in this case.
Speaking of css; using the clip property on an image tag requires 2 elements around it in order to be "very safe". In my case I used a combination of absolute & relative positions. Not sure how this would affect a grid layout; but I think having it wrapped up in 2 divs (like I sorta do) should make it fairly safe.
http://css-tricks.com/css-sprites-with-inline-images/
The wrapped divs & img will use an inline style. I don't use a width and height; but the example in the link above does. width & height are available so if I make a module out of this I'll probably use the way they did it in the guide and not the way I did it.
Bad things happen if you
Bad things happen if you disable CSS. I wonder if that's a problem though. Is there a category of differently abled users that browse without CSS, but can still see?
--
Dave Hansen-Lange
Director of Technical Strategy, Advomatic.com
Pronouns: he/him/his
Interesting
The take away: This is broken when used in mobile converters. Javascript might be able to counteract this for opera. In reality one needs a mobile version of their site for the converters to use. Using a straight up mobile browser and it works fine.
If this technique required JS then I would say it's not viable. I have yet to see a no css plugin for firefox; only no JS. web developer is the only one I know of that has a fairly simple no css option & it is very obvious browsing with css turned off.
Google's mobile site converter doesn't like the clip property
http://www.google.com/gwt/x?wsc=pr&wsi=ece2c92b2f07a609&source=wax&u=htt...
Same with opera's mini browser
Looking at the grammy site with this in comparison to the css turned off they are VERY similar.
http://www.google.com/gwt/x?wsc=pr&wsi=ece2c92b2f07a609&source=wax&u=htt...
http://img199.imageshack.us/i/sbiggestnight.jpg/ - Firefox screenshot with css disabled.
similar story in opera mini.
Mobile Solution
http://www.google.com/support/webmasters/bin/answer.py?answer=35312
I think this would cover the objections of using the clip technique for img tag sprites. Can anyone think of any other issues that might arise?
Views ImageCache Field Sprite
I've wondered about this idea as well.
Seems like perhaps an Views ImageCache Field Sprite module would be promising :)
Yeah, I was thinking of
Yeah, I was thinking of something similar. Interested to see if something can be made of this.
--
Tom
www.systemseed.com - drupal development. drupal training. drupal support.
I just came across this post
I just came across this post from a link a twitter so I'm a little late to the game.
I was just looking under the hood on grammy.com and they aren't using a CDN for their imagecached images. That may be part of the lag reasoning. Though, being that this site gets a ton of traffic on one night and they want to have control in a tight window of time it might make sense.
Have you done any testing to see what the performance difference is? I'm curious of the numbers.
Grammy
If you follow the blog posts for the 2010, 2011, and 2012 grammy award website they use Akamai which means there is no need for a separate CDN domain (see whitehouse.gov for this in action).
I do believe this idea would work quite well, I just haven't had the justifications to develop it; thus there has been no testing of it.
Im in
This is a great idea, I think. I have been looking at doing this as I just switched a client from hard coded strip of logo's to individual logos for a footer so they could edit each one. I noticed the request increase in net stats and wondered if image cache, image cache actions and media could work together to reduce this in some way.