Using CSS Sprites

It is not uncommon to use many small images scattered on a page. A navigation menu whose securities are images (generated automatically by SPIP, for that matter) contains a bunch of small images. Each of these images leads to an individual call to the Web server, which slows down loading (you should load a "big" picture than the sum of "small" images that comprise) and increases the workload of the server.
This plugin makes it possible, as simple as possible, consolidate multiple thumbnails in one "big" image (which contains them all), which is displayed in place of each little image. A built-in style with the code used to display the correct part of the big picture (the one that corresponds exactly to the thumbnail). For example, I create a navigation menu on my site by converting each item as an image (picture typographical) each title is produced in two versions: the text in black and white text (for the active section and the overview of all items). I have 9 main headings, plus the link "Home" and I therefore generates 20 small typographic images. A visitor load small so 20 different files.
By using the plugin "Creating CSS Sprites," I automatically groups the 20 thumbnails in a single "large" file, and it was he that I display in place of each original image with a CSS trick to display exactly the part of the image I need. The visitor now loads a single file instead of 20. To combine different images into a single file, they must pass through the filter | filter {} nomsprite.png. nomsprite.png is chosen by the web-master: - Using multiple names, we can make different sprites, either in the body of a page or between different pages (for example, a sprite that would change for each item) - Termination chosen for the file (here. Png) determines the final size of the sprite. Here is how I make my main navigation menu:

The principle is the same every time I take my text, I turn into typographic image, then I'm going through | {sprite} navigation.png. All these images will be grouped typographical and replaced by a single "fat" file: navigation.png. Elsewhere in the body of my page, I have three images explanatory. Initially, three inserted in my code. To group as a sprite, I transform the code as follows:

These three images are now automatically grouped in a single file, boutons.png. I make, finally, the same operation to gather small preview thumbnails of documents attached to each article (my site, very graphic, often more than 20 photographs related to each article). In this way, instead of charging 20 (100) small thumbnails, I do not charge that much more.

Note:
- This plugin is fairly rudimentary, but it meets my needs perfectly, and I use it in production. - Its operation is quite unique compared to the habits of CSS sprites: it takes images inserted in the document, and transforms them into images "empty" (transparent) of the same dimensions, and applies the CSS sprite overall background. It is not designed to process images that are already in CSS background. (My idea is that it is primarily designed to process images generated by SPIP, and such images are rarely used in style sheets.) - Warning: the name you choose determines the final file. If you repeatedly use the same name for different things (on different pages), you overwrite the file on a page by another. Pay attention to the name you choose-Sissi. - Transparent PNG images will become the bottom of CSS, MSIE 6 that runs poorly (as he well managed PNG transparent displayed as images). - The method used is not really suited to handle images that change often (even if only because the sprite keeps its name, even if we change its content).

Attention:
A peculiarity of SPIP fact that the image calculation is done only in the case included a skeleton, which in the case where an administrator logged calculates the page at least once (the administration buttons causing the necessary function ). Use "simple" this feature is that in general, this does not pose a big problem, because once the image has been calculated, it is not necessary to recalculate. The difficulty comes from where: - The "sprites" are automatically created different for each page of the site, and it is therefore inconceivable that the administrator recalculates all these pages one by one; - These "sprites" are not calculated in skeletons included. In this case, it is feasible to insert: in the backbone to bring the correct calculation of sprites.