Is it appropriate to create a CSS Sprite with disparate-sized images? For I have exact 20 images where their height and width are limited:
But the dimensions of each image varies within these limitations, each image has an average of
CSS sprite is not just a list of combined images in a single file. Its primary goal is to reduce the number of requests to the server in order to make a page load faster.
As disparate as the dimensions of the combined images in a sprite , it turns out to be somewhat irrelevant to the purpose behind the use of sprite .
Example
In the example below, in a single request to the server we are collecting 28 images, thus saving 27 requests.
Since most browsers only make 3 requests simultaneously for the same domain, the 28 separate files would take well over 1 combined file.
In short, we saved about 96% of waiting time between 3-order blocks.
Thecombinationofimagesinasinglefileforthispurposeisusuallydonewith.PNGor.SVGformatswithtransparentbackground.
Thetransparent/whitezone,whichyourefertoas"throwing away space" is information in the file:
With transparent background: alpha
(r, g, b, a) for Red, Green, Blue and Alpha components
No transparent background
(r, g, b) for Red, Green, Blue components
An empty pixel is recorded in the file as 0 , but is recorded and this record always ends up having an impact on file size.
But this information in the file has extremely low relevance when compared to the number of requests saved when loading a page.
And areas registered to 0 have a very superficial impact on file size.
A sprite does not have to be a list of images one underneath the others, nor does it have to be a list of images side by side. This is how it all started, but it quickly became clear that by doing CSS efficiently we can create sprites in order to optimize the generated file as much as possible.
The most effective trick is to combine the use of background-position with the use of width and height in the target element so that we can compose the sprite in the most convenient way for the (px) dimension and the (kb) dimension of the final file are as small as possible:
/* Class para adicionar a sprite ao elemento */
.sprite {
background-image: url("http://cdn.sstatic.net/brmeta/img/sprites.svg?v=7ecc9f7643b7");
background-image: url("http://cdn.sstatic.net/brmeta/img/sprites.svg?v=15bbee813d85"), none;
}
/* Class para posicionar a sprite para o elemento page-logo */
.sprite.page-logo {
background-position: top left;
background-repeat: no-repeat;
width: 250px;
height: 70px;
}
/* Formatar elemento */
#hlogo {
display: inline-block;
border: 1px solid #ccc;
padding: 2px;
}
#hlogo a {
text-indent: -999em;
display: block;
}<div id="hlogo">
<a href="/" class="sprite page-logo">
Stack Overflow em Português
<span class="meta-title">meta</span>
</a>
</div>
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 wherever you can. If you have a lot of icons, if you have a lot of decorative images and etc ... Join them and form a sprite of images that can be used throughout the site. This decreases the amount of requests the browser will make during the user's browsing.
When we use a lot of small images and the browser needs to make these requests together, there is a collection of tasks called request overhead .
I know that working with sprites gives work to maintain and mostly create the initial sprite. So you can use services to do this work for you. SpriteMe is one of them.
It is not only the weight of the files that interferes with the upload 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, the number of requests can and does interfere with site performance. And it's exactly about those server requests that the CSS Sprite will work.
CSS Sprite is a technique where we place several images that we use in CSS in a single file, and position this file according to our needs using the background- of the CSS, property that makes use of mathematical coordinates similar to the (x, y) Cartesian plane.
A single request instead of several.
Loads the file only once and caches, so the rest pages do not need to load it.
How to Use
First we need to build our file, and for this we must pay attention to a very important detail, if the HTML elements have rectangular format , we must pay attention to the positioning of the images inside the sprite to avoid them being shown pieces of images that would not come from that piece of the site.
What we should not do when positioning our images in the Sprite.
TherightwaytoworkonpositioningyourimagesintheSprite.
Now that we have our file set up, we'll use the background-position property to position it as shown below:
background-positionworkswith2parameters:backgroundpositioninXandbackgroundpositioninY,wherebothXcanbedeterminedasLeft,CenterorRight,andYcanbedeterminedasTop,Center,orBottom.BothXandYcanbedeterminedbynumericvaluestoo,wherewemustalwaysremembertoinformtheunitofmeasurethatweareusing.Wewillnowseewhatthesyntaxofthispropertyis:
Seletor{background-position:PosiçãoXPosiçãoY;}Orwecanalsousereducedsyntax:
Seletor{background:corurl(pathdaimagem)posiçãoXposiçãoYrepetição; ZKDESIGN
TABLELESS
WHAT IS IT?
For those who do not know, this technique is based on combining several images into one, in order to reduce the number of HTTP requests to the server. And this is just one of their applications, in the world of games, for example, it is very used to make animations.
Yes you can and should use for images in any dimension because one of the main functions is reduction of requests.
Source: Tableless
You can not say for sure without testing both ways and seeing the difference in size. You have to remember that with CSS sprites you will need to put
background-position: 34px 143px;
For all places where you use one of the pieces of the sprite. On the other hand, note that, depending on the application, the combined images can easily take up smaller space than all the individual images together:
As an experiment, I rendered a 100% white image, 1600 x 1200 and exported as PNG and JPG, by GIMP. PNG occupies 8.3KB; the JPG occupies 22KB. If I pass this image through TinyPNG , it can still reduce the image to 365 bytes (!); the TinyJPG leaves the chubby file with 11.6 KB.
Even though creating sprites makes the total file size grow, the purpose of the transformation is to reduce the number of requests to the server. Roughly, when you join N files you save N / 2 requests (since modern browsers only make two simultaneous requests to the same server).
If your site is hosted overseas, each of these requests will take an average of 100ms; if you join the files in a single fatten each sprite in 1 KB, the transformation still makes sense if your user can download files faster than 20 KB / s, which is more or less a link of 256 kbps; for any user who is not on a dial-up connection, or any EDGE connection or better, sprites speed up page loading.