A modern site should be fast, beautiful and effective both at the development stage and when working with a client. As a rule, each company that creates Internet resources seeks to have its own face, to attract visitors with its design, style, reliability, speed and other qualities.
Useful properties of sprites
CSS sprites can improve both the quality characteristics of the site and the image of the company. In essence, this is not a very complicated tool for a developer, but it really speeds up the process of developing resources and the speed of their work.
Among other things, the code is simplified and, in a sense, becomes portable to other resources, which, thanks to the use of CSS sprites, become similar as close relatives, because you can use the same graphic ideas, the style of the design of the dialogue elements, tag structure and content.
In the normal site development process, you need to take a lot of pictures. Very often, these pictures take up very little space, but are always a separate file. For any operating system of any server, opening a file is a time-consuming operation, but it will not differ significantly in time when a file is opened by 13 by 13 pixels, and when a file of 16 images is opened, 52 by 52 pixels. In the first case, it is necessary to have 16 files and 16 open / read operations, in the second case, 16 pictures will be obtained as a result of opening only one file.
If you create sets of such files by topic (horizontal menu, dialogue forms, calculator buttons, calendar design elements ...) then such sets of pictures can be transferred from site to site mobile.
but on the other hand
When there are fans who are too quick to recommend using CSS sprites, be sure to find those who carefully study the issue and clearly show that it is always more practical to work the old fashioned way.
Indeed, if instead of 16 image files there will be one file of 16 images, then instead of 16 open / read operations there will be one. But the trick is that every browser has a cache, and it loads something only as a last resort. In addition, usually page elements are loaded on the first visit to the page, and only modified ones are subsequently loaded.
Another aspect. Usually pictures are cut, not glued into a single file. Somehow the technology has developed, but rather, custom. The designer creates the layout, and the layout uses its pieces: finely chopped parts of the layout. Opponents of sprites believe that collecting several images into one file is a laborious task that increases the overall development time of a page.
There are some developers who consider and optimize the number of HTTP requests, believing that this activity is more pragmatic than CSS sprites.
All the indicated points undoubtedly matter, but the opinion is much more important: everything should be applied within reasonable limits.
Automation and CSS Sprites
If it makes no sense to start the CSS sprite generator and get the right part of the design, then nothing prevents you from simply making up for this part in the usual way. If conventional technology leads to the need to cut hundreds of images, it is preferable to outline a JavaScript function that will select the desired area from the sprite and display it if necessary.
However, it should be noted that a sprite of two or three elements or a dozen or two did not go anywhere, but when there are a hundred drawings in the sprite, of course, there will be no problems with writing a JavaScript function, but here is how much work it will take to create such a large sprite ... In addition, gluing pictures is one thing, the CSS sprite generator makes both the desired picture and the CSS code for it, it absolutely does not matter how many sprite elements will be. Problems will arise when redesigning the site, changing the design, deleting and adding new elements. When developing a sprite, one should think not about how to use it, but about how to change it later.
Thematic benefits of using sprites
Unlike CSS programming languages, this is a relatively static set of rules, all its dynamics are determined by the rules and their functional content (by standard). Considering complex sprites, HTML, CSS, you can create thematic libraries of design-functionality.
For example, the finished version of the menu: simply by connecting several css rules, js functions and including several HTML divs in the code, you can get the result. By changing the content of the sprite image, you can change the appearance of this menu. By specifying the body of the function, you can adjust the functional.
You will get a peculiar variant of object-oriented programming (OOP). Sure, this will be a bright idea, but it will not stand out too brightly against other dialects of OOP in real languages. It was only in the early 90s, when the PLO was revived and began to quickly gain a place in the sun, it represented a concrete idea and a concrete form of its expression, and today developers have come up with as many dialects as there is no diverse Russian language.
Toys - a bonanza for sprites
Excitement and programming are incompatible concepts, but the qualifications of a programmer who writes games are markedly different from the common ones (simple coding) and creative (design and development of new technologies, ideas).
Game design appeals to vector graphics, because the combination of SVG sprites + CSS rules is not only in demand, but also often turns from a developer object (site) into an object of a real game. In particular, the popular Counter Strike game applies sprites, sprays, to completely meaningful synonyms: explosion, blood, sight ...
The phrase "install css v34 sprites" for the initiate is quite normal and understandable. Sprites gained not only usefulness in their essence, but also formed a niche that became fully functional, accessible and understandable to a certain circle of consumers.
CSS sprites: an example
A wide variety of options are used to switch the site pages to a particular language, but if the language selector is executed as an icon, then a solution using a sprite may look like this:
Obvious disadvantages of sprites
First of all, it is a laborious and scrupulous process. It is one thing to cut the design into small pieces, another to assemble one picture from many small ones. To apply the idea of a canvas and place on it all the images used on the site is completely futile.
Even using the CSS sprite generator, difficulties cannot be avoided, especially when you have to redo the site design. Placing dozens of pictures in a sprite is not an array of elements, graphics have graphics, they are usually simply displayed on the screen, and not sorted through in the code as an array in search of the desired element.
The standard and the developers following it claim that since sprites are associated with the background rule, then this is an exclusively background image, not a site element. The graphic component of page elements should manipulate img tags.
It is difficult to agree with this on the simple basis that background was hardly ever perceived as a general background. This is just the background, no matter what - a miniature element or the entire page as a whole.
Meanwhile, it is the graphic component that seems to be a serious obstacle to the use of sprites.
Smart use
Despite the fact that the terms "Internet technology" and "high technology" are considered synonymous, in fact it is laborious and sometimes very non-technological work. Sprites are not particularly distinguished from other bottlenecks both in pure programming in JavaScript or PHP, and in terms of developing the necessary functionality, setting up processes for filling sites with information, or, for example, background creating archive copies.
The power and prospects of the used site management systems are sometimes leveled by the nuances of their practical application, and manual development of resources, as a rule, leads to the need to rewrite one or another proprietary algorithm for the 1001st time.
In the context of what has been said, it is important to simply use everything that a modern tool provides in a reasonable way. One should not be too zealous to use one to the detriment of the other, and the golden rule in site building reads as follows: you need to think not about how to submit the work as soon as possible, but about how to execute it so that in case of any unforeseen situation you can quickly solve any problem.