css-sprites

I have a webpage which contains about 20 - 50 dynamic images (images served from a non-static source). These images are served through a servlet based on the request URL. This results in a request being generated per image, which leads to performance decay. If these images were static, I would create a CSS sprite and replace the 50 requests with a single one. As they are dynamic this is not that easy of course. I'm looking for a tool/library/method that I can use in order to aggregate these images into a single sprite at runtime. Luckily image size is constant and the same for all, which

I'm making a sprite and its reaching about 4000px in height. Is there a general size for maximum sprite height that is used within the graphics design community? Browsers will have to decompress (and keep in memory) the whole image even if you only use very few sprites in it, and even if most of the image is blank/white. For a desktop client you've only missed an occasion to be a good citizen by using too much memory (and browser are already sucking a lot of memory). For some mobile client (eg. IPhone for files over 25k after degzipping), it can be more problematic, the image won't be cached

I am displaying a bunch of thumbnail images and the latency can be very high (over a VPN) so I send all the thumbnails in a single file (like a sprite) and set the CSS background-image and background-position properties of a div to show the thumbnails. The problem I'm having is with IE6 and figuring out when the image has loaded... I'm using the BackgroundImageCache hack: document.execCommand("BackgroundImageCache",false,true); To check when the image is loaded I use this code: $('<img>').attr('src', 'ThumbSpriteTest.png').load(function() { $('.Thumbnails').css('background-image', 'url

Does IE6 support css-sprites? Yes IE 6 supports sprites but doesn't support 24 bit PNG transparency. I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency. background-image:url(/images/sprites/icons-sprite.png); _background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */ You can also use Glue http://gluecss.com/ It's an open-source command line tool to generate sprites. CSS sprites is a general solution using backround-position, which is avaible even in IE5. A good tutorial about them is located here: http://www

SVG images aren’t bitmaps, so (unless I’m missing something) you can’t do spriting like you can with other images files used on web pages (see http://www.alistapart.com/articles/sprites ). But is there an equivalent mechanism to display only part of an SVG image as a CSS background? E.g. imaginary syntax: div.my-special-svg-div { background-image: url(sprite-image.svg#one-shape-in-the-svg-file); } You can use 'traditional' CSS sprite techniques to slice up SVG images with background position, here's a quick example , though it does get a little confusing if you also start using background-size

What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right? Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment. I am using background-position css property to get the icons from a larger image. Here is how I do it now, but I am struggling with either getting them to be on the same line or be vertically aligned to the bottom. Text This is what I get after I try your suggestions. Though the text is now aligned with the icon, it is superimposed over the icon to the

When building web pages, one of my colleagues displays any logo using the CSS background-image property, rather than embedding the image using an HTML <img> tag. The colleague reported it was to reduce the number of HTTP requests. He also showed me an image sprite and said that Google displays its logo with sprite images. I don't agree with his approach and showed him that the main Google.com page loads their logo in an <img> tag. Which is a better practice? EDIT: Facebook also do the same thing on their homepage , loading the logo in an img tag while on their profile pages they display their