Combine images using sprites
CSS Sprites is an old but still widely used technique, used for a long time on low memory consoles to store large amounts of images and information.
Always use CSS Sprites where you can. If you have a lot of icons, if you have a lot of decorative images and etc... Put them together and form an image selection that can be used throughout the site. This decreases the amount of requests the browser will make during user browsing.
When we use many small images and the browser needs to make these requests together, there is an accumulation of tasks, it is called request overhead.
I know that working with sprites takes work to maintain and mainly create the initial Sprite. That’s why you can use services to do this job for you. The Spriteme is one of them.
What makes your site slow?
It is not only the weight of the files that interferes with loading performance of your page, every time we upload a file we make a request to the server to transfer the file to the user’s browser, and the number of requests made can and does interfere with the performance of the site. And it is exactly about these server requests that the CSS Sprite go to work.
What is the CSS Sprite?
CSS Sprite is a technique where we position several images that we use in CSS in the same file, and position this file according to our need using the property background-position CSS, property that makes use of mathematical coordinates similar to the Cartesian plan (x, y).
Perks:
A single request instead of several.
Load the file only once and cache it, so the rest
pages do not need to load it.
How To Use
First we need to assemble our file, and for this we must pay attention to a very important detail, whether the elements HTML have rectangular format, We should pay attention to the positioning of the images inside the Web site to prevent the display of pieces of images that would not come from that piece of the site.
What we should not do when positioning our images in Sprite.
The correct way to work the positioning of our images in Sprite.
Now that we have our file assembled, we will use the property background-position to position it as shown in the image below:
The background-position works with 2 parameters: background position in X and background position in Y, where both X can be determined as Left, Center or Right, and Y can be determined as Top, Center or Bottom. Both X how Y can be determined by numerical values as well, where we must always remember to inform the unit of measurement we are using. We will now see how the syntax of this property:
Seletor{background-position: PosiçãoX PosiçãoY;}
Or we can also use reduced syntax:
Seletor{background: cor url(path da imagem) posiçãoX posiçãoY repetição;
ZKDESIGN
TABLELESS