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.
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.
If an image is 200px by 200px and you give that image a class in css with the same dimensions, will the browser still resize that image via css?
Ive been looking frequently into reducing page load time and one of the things that comes up is resizing via css slowing down page load time.
If you apply a class to your image with some fixed dimensions, then it will stuck to the defined dimensions.
Unless you define "max/min-width" and "max/min-height" instead of width and height.
The loading time is not about the dimension of the image but more about the size (octets) of the file (here an image). The performance are poorly influenced by the dimension of it.
No, because image will be same size (as downloaded from server). Also, since width/height of class is same as image, image will not be resized. And I don't think that resizing such images has any impact on page load times.
We can resize image propertionally from css but can't reduce load time from css
Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.
Use proper file formats. If you have icons, bullets or any graphics that don't have too many colours use a format such as GIF and save the file with lower amounts of colours. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
To resize your images you will have to use some form of program. For basic compression you can use a simple editing program such as GIMP. For more advanced optimization you will have to save specific files in Photoshop, Illustrator or Fireworks.
Source Link
Edit:
Check this link to get more idea about speeding up page loading time
Is there a better way to change few images from a single file which was generated for CSS Sprites.
As I have a big image file which contains 50 small images and my css uses Sprites. Now I wants to chage 4 button's colors and size of s pointers. What will be the best possible way?
Use any CSS Sprites Generator like Spritemapper.
BTW, I create ZeroSprites which is an online sprites generator aimed at area minimization using VLSI floorplanning algorithm.
Edit your sprite file in a image software like Photoshop or GIMP.
Add new images on the bottom of the existing sprite file. That way, you can keep the existing positions of your sprites.
If you want to find to the css pointers, use the measuring tools in your image software.
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 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.