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.
Related
Is there a correct procedure to locate certain image locations in an image sprite. Say I wanted to create 10 div images in my header using the image below, how do I find the precise location of each.
Is just a case of trial and error using CSS background position till the image fits?
http://www.argos.co.uk/wcsstore/argos/en_GB/siteAssets/brfp-2014/images/icons-s73f662fc84.png
Now if you are not adverse to uses SCSS/SASS, then I would highly recommend using Compass' method. It converts a folder of images into a sprite map and the creates classes that allows you to access these sprites. This has proven to be the easiest way for me to work with sprites without worrying about all of the messy calculations.
If you can't do that, then what I have personally done, is create multiple small sprite maps. For example, if I have an arrow that has a hover on/off state. It will stack it into one image and just create a class with a shifted background-position.
Look at the Google homepage being displayed right at this moment. A screenshot is provided below.
Instead of using this as a single image Google used css sprite. The sprite image
is provided below (dimension changed):
Question is why css sprite was used instead of a single image ? If a single image was used then wouldn't the number of HTTP requests be same as in this css sprite case ?
A single image would not allow for (different) hover effects in different areas.
Or you would have to load an image of the same size for each animation. By using a sprite, you just have to load the image once and all animations run with that data.
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates.
Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.
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.
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
Is there any advantage to this?
How can this be used?
For example, for the following Stack Overflow sprite, how would I display just one of the images?
The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.
If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
Change the css property background-position.
yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.
for more better performance download "yslow"
And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see
It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.
It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.
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.