qpimg - dynamic creation of CSS sprites

When developing websites more and more often we have to use CSS sprites technology in order to reduce the number of images uploaded on the page. Creating and editing such images is not a simple task, which takes quite a lot of time: initially you need to arrange the images in a graphic editor, and then describe the positioning and dimensions of each element in the style file (CSS). Editing elements and resizing them may result in a global revision of the sprite, up to its full re-creation.



When using data caching (by the browser) on the client side, sprite debugging also adds “empty” work. It is necessary to change the names of css-files and images each time in order to give the browser new versions of the data.
')
qpimg is a php5 library for creating CSS sprites dynamically (CSS sprites). She solves the above problems.

Example

An example of the script can be found here . This example shows how 18 images are converted to 3 sprites. The first sprite contains static images. The second sprite contains background images that are repeated horizontally. The third sprite contains background images that are repeated vertically.

Qpimg highlights / benefits

• qpimg allows you to describe an unlimited number of maps (a map is a collection of an image sprite and its corresponding css file). The parameters of each card are described in a single php configuration file. This allows the developer to dynamically manage the maps during the development of the site;
• flexible settings for each object on the map;
• object names (css-selectors) are set independently of the name of their files;
• qpimg allows you to assign background images, both for custom css-selectors (for example, “list item”, “div-object with a specific ID”, etc.), and use “own” qpimg-rules to form custom css-selectors ;
• the ability to include in the map deleted images stored on other sites;
• Combining css-files of various maps into a single css-file (and giving it to the user), but using separate sprites (images);
• there is no need to create / correct css-files and images manually;
• There is an opportunity to create maps on the fly (during the execution of site scripts). This allows you to combine a group of dynamically changeable (but not often) images on a page into a single map. An example would be the product / product page, in which the addition of elements occurs less frequently than browsing the pages with these goods.

You can learn more about the library, see examples and download the library on the qpimg website .