What is CSS SPRITE? CSS Sprite is a web page layout technique in which the loading of images on the web is reduced, it is not the same to load 10 images of 10kb as 1 image of 100kb, although the weight in Kb is similar, the number of requests is of only one, here lies the potential of the CSS sprite technique.
What is CSS SPRITE? CSS Sprite is a web page layout technique in which the loading of images on the web is reduced, it is not the same to load 10 images of 10kb as 1 image of 100kb, although the weight in Kb is similar, the number of requests is of only one, here lies the potential of the CSS sprite technique.
The main advantages of using this technique are the following:
- Reduction of transfer and server resources.
- Greater speed of the web page by making fewer HTTP requests
This technique appears in the 80s when games were designed in 2 dimensions, nowadays they are used to make mobile games because they need to be very light. And for a few years to burst into web development.
In video games, the technique consists of creating a sequence with all the images necessary to make an animation, in the case of the web it would consist of including the largest number of images in a single file, by means of CSS changes in the background we will be able to move the position of it so that only the part of the image that we need is shown.
A very graphic example would be Google, if we carry out a search and move to the footer, where the results appear and the pagination is, if we save the background image (right mouse button on the G of Google), we will be able to see that all the images that Google uses on its website, it really is just one.
The basic code to understand how to design a web page would be the following. In a list, for example, we will first assign the image and give it the size we need.
