I made this question yesterday: background repeat tiled bgImage inside an sprite image?
So as long is not posible to repeat backgrounds wich are inside of a sprite image,
What is the best* strategy when creating the sprite?
i mean, choosing:
should i try to put ALL the images in one sprite? (including big backgrounds that could be repeated)
One sprite for icons. Backgrounds a part?
other
*) when i say best i mean with the most accesible/usable/perfomance
i am always create three sprite sheets.
first; for those images which is not repeating at all like arrow, button etc.
second; for those images which repeating y-axis.
third; for those images which repeating x-axis.
or
If there is no repeating images in the design then there is no need for other to sprite sheets
sprite for x-axis http://imageshack.us/photo/my-images/401/xaxissprites.png/
sprite for y-axis http://imageshack.us/photo/my-images/28/yaxissprites.jpg/
Sprites are old! There are newer techniques that you can use. But when you will used sprites. I would make one sprite for icons and one sprites for other images.
But you can also used data uri's / base64 encoding for images. This is the new technique for image. And the replacement of sprites. With sprites, you have http requests. With data uri's you have no http requests. It make you website faster! And the speed of the website is a more important thing.
Here you have a article about Click here And here you can create the data uri's. Here. But data uri's are not supported in ie7. For ie7 you can make a fallback to single images.
Used the data uri's and forget the sprites. Sprites is a technique in 2011. Data URIs is totally 2012! :-)
In my opinion, sprite must be defined for your users first. If your users are seeing different pages for their authority, you must divide your sprites by authority. Second is the background and icon, button grouping. Every image file has a header in it. In header, they contain size, colormap and any other additional info. Headers are mostly increases the file 1KB - 3KB average. So we can think that less image, less data transfer. In summary, I suggest you to use one sprite.
Other think is the tools for this. You can use sprite sheet tools for generating your sprites and writing your CSS. These tools are generating minimum image size (using some algorithms to order sprites) and automatically generate CSS file depending on the sprite positions on the sprite sheet. If you are on mac, you can use Sprite Master for this.
Related
I could not find the clear difference between IMAGE MAPS and CSS SPRITES. Both are looking like combining the images in the page into one? So we can reduce multiple requests to the server. So what is the real difference?
Image Map:
A single image in a page, with different areas you can click on, which then have different effects (eg launching different links).
There's a description of this here: http://www.javascriptkit.com/howto/imagemap.shtml
CSS Sprites:
Combining the images behind a number of css classes into a single file to improve performance - eg reducing number of requests and often overall download size.
For example you might combine various border elements of a colorbox dialog into a single image, or combine the clicked and unclicked images for a button.
The best description I've found of CSS sprites is this one: http://css-tricks.com/css-sprites/
An image map is one image that you can turn into an image map and place multiple links on top of the image.
A CSS sprite is one image made up of mutiple images that youy use CSS background positioning to display this reducing http requests.
An Image Map is the definition of coordinates that are lying over the image to be able to react to events on this areas.
a css sprite are two or more images joint in one image.
I know it been asked a year ago, just let me try to explain in own my words.
CSS Sprite is like a single file image repository that you can pull out any portion of it via css and place them individually in arbitrary area in your webpage real estate, while image map (to-url) , as it name suggest is a image that has a clickable area that maps to your target url.
I notice that the file size of CSS sprite (.gif) keep growing over the period. That is because we keep adding new icons / sprites, and we never remove the existing sprites, because we are afraid of breaking existing design (offset recalculation or the sprites may be used somewhere that we overlooked).
I wonder how do we reduce the number of sprites? The image file size keep growing and growing.
You will have to do a manual check (do a search for the sprite name first, but once you have your results you will have to use pen and paper) to realise which images are being used. You can replace those ones for the new ones without touching the positions for the rest, but before doing that I would consider:
Changing your gif to png-24 or SVG, as they weight less and have WAY better quality, specially with transparency involved. SVGs are also scalable, great for retina display devices, although not supported by all browsers (meaning IE) and therefore need an alternative.
Using different sprites for different categories of images (for example, one for menu icons, another one for social icons, etc) so it's a bit easier to manage. You would be having two or three more server requests, not a real difference.
As from my experience, you have to do that one time clean up.
And then do things right !!!
Do OOCSS and use speaking names for specific sprite images.
I would recommend reading http://devblog.xing.com/frontend/a-so-called-sprite-revolution-on-xing/
After this, administrating the sprites will be muuuuch easier, but as I said, the one time effort is need.
Also, because GIF is not the format you want to use :-)
i want to know about sprite technology used in css regarding fast accessing of the web pages.
They are cool because you can minimize http requests with them and make your page's performance improve. They are considered good in terms of SEO as well. Check out this for more info:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This page gives a pretty good overview.
Essentially it puts all of the page's images into one large image file and then uses CSS to display only parts of that file (to give the effect of multiple images). This has the advantage of only requiring the browser to make one request for all the images rather than a bunch of individual requests (each of which has an overhead).
If you have the group of icons for example , you are creating one jpg or png file and adding the images one after another. Then you just creating the backgrounds based on only one image and fixing it in percentage / pixels view. It makes your code organized and saves images loading time . For example , you have a window and it has close , unfold icon. You can create a png file named windowControlSprite.png that contains two icons one after another , then you can create properties in your css to this element. #somediv {background-position:0px -20px;}
Also, you can find CSS sprite X and Y easily with tools like http://www.getspritexy.com/
Otherwise you need to use image editors like Photoshop or use Firebug to find X and Y coordinates.
Has anyone seen tooling, or even a process concept to generate css sprites from an existing website's images, and css during the build process?
I should think the steps would be:
walk an images directory
create a single sprite file from all the images in that directory
for each image
find any css classes using that image
update the css class to use the new sprite file
I'll using asp.net so something in msbuild would be awesome. However, I'm finding little out there even coming close.
You could use this http://spritegen.website-performance.org/ which is BSD licensed code. (see the download link on the right hand side.)
An automatic process like that only works well if you have a few simple images. There are several reasons to do the process manually:
Some image formats work better than others for sprites. If you try to make sprites out of JPEG images the compression will easily bleed from one image to another causing artifacts. Index color formats like GIF and 8-bit PNG has a limited number of colors, so if you put images with too varying color palettes together you will lose colors.
You may want to repeat an image horisontally or vertically, which makes it harder to combine the sprite image.
If the image is smaller than the element that you use it in, you would have to pad the image with transparent pixels. If the size of the element is dynamic in any way, the automatic process would not even know how much padding the image would need.
Is the only benefit of using css image sprites that there is less http requests?
Or is there other benefits?
Also is there an easy way of detiming which area of a sprite to show?
Like you said, one of the main advantage is to reduce the number of requests to the server, improving the response time (especially if you're loading a large amount of small images). But this is not the only reasons people use sprites.
If you don't use sprites for a "mouse over" display, the user will see the image disappear for a second... and it looks really bad. This is because if you change the image instead of just moving the sprite around it will load a new image and the loading time can be visible to the end user.
.bad{
background:url(abc.jpg);
}
.bad:hover{
background:url(abcHover.jpg);
}
.good{
background:url(abc.jpg) 0px 0px;
}
.good:hover{
background-position:15px 0px;
}
Another advantage of sprites is that you can keep all your images in one location and in some cases it makes more sense (for menus and so on).
To determine which area of a sprite to show, just use photoshop or any other image editing software.
The primary benefit is your pages load faster, mainly because of reduced HTTP requests.
You could generate your sprite using a tool.
Disclaimer - I wrote this tool.
It is much easier to get image placement (especially next to text) the same cross-browser. You can adjust images up/down/left/right with out using vertical-align and padding.
I find it easier to keep track of all the images if they are in a single file. Especially since I usually have a transparent png images and and then use gif images for ie6. I save my png sprite map as a gif and add one line with background-image in my ie6 css and my images are switched.
I use photoshop or gimp to get approximate locations in the sprite map and then use firefox to fine-tune the placement.
Yes, there is another benefit. Every image file has his own headers, describing image type, colors etc. So when you combine images to a single sprite, you win some kb.
But as you said before, mostly you win by reducing HTTP requests count.
In terms of determining the area to show, I will typically place my elements on pixels that are multiples of 100. So if there's a sprite with a bunch of 64x64 pixel icons, I'll typically have them at (0, 100), (0, 200), (0, 300), etc.
This way, I don't have to type in an exact measurement (or any other developer for that matter) and save keystrokes when setting all my background-position properties.