Is it appropriate to create a`CSS Sprite` with disparate images?

Question

It is appropriate to create a CSS Sprite with images of different dimensions? Because I have exactly 20 images where their height and width are limited:

• Maximum image height is 60px;
• Maximum width is 100px;

However the dimensions of each image vary within these limitations, each image has on average 3Kb, these images are displayed simultaneously not fitting the use of AJAX. Like these images of different dimensions I wouldn’t be throwing space away (this overcomes the speed gain of reducing calls to the server ?).

Answer 1

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

Answer 2

CSS Sprite It’s not just a list of images combined in one file. Its main purpose is to reduce the number of requests to the server to make loading a page faster.

No matter how many shots the dimensions of the combined images are Sprite, turns out to be something 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 simultaneous requests for the same domain, the 28 separate files would take well over 1 combined file.

In short, we save around 96% of the waiting time between completing blocks of 3 orders.

Empty areas

The combination of images in a single file for this purpose is usually performed with the . PNG or . SVG formats with transparent background.

The transparent/white zone, which you refer to as "throwing away space", consists of information present in the file:

• Transparent background: alpha

  (r,g,b,a) for Red, Green, Blue and Alpha components (Red, Green, Blue and Opacity)

• Bottomless

  (r,g,b) for Red, Green, Blue components (Red, Green, Blue)

An empty pixel is recorded in the file as 0, but is registered and that record always ends up having an impact on the file size.

But this information in the file has an extremely low relevance when compared to the number of requests saved when loading a page.

And the areas registered to 0 has a very superficial impact on file size.

Optimisation

An Sprite does not necessarily have to be a list of images one below the other, nor does it have to be a list of images side by side. That’s how it all started, but quickly concluded that by making CSS efficient we can create sprites in order to optimise as much as possible the generated file.

The most effective trick is to combine the use of background-position with the use of a width and height the target element so that we can compose the Sprite in the most convenient way for the ^(px) and size ^(kb) of the final file being 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>

Answer 3

WHAT IS?

For those who do not know, this is a technique that is based on combining several images into one, in search to decrease the number of HTTP requests to the server. And this is just one of its applications, in the game world, for example, it’s used a lot to make animations.

Yes you can and should use for images in any dimensions because one of the main functions is request reduction.

Source: Tableless

Answer 4

You can’t tell 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;

to all places where you use one of the Sprite pieces. On the other hand, note that depending on the application, the combined images can easily take up a space minor than all individual images together:

1. you only pay once the header cost;
2. if you are using indexed Pngs, you only pay the cost of encoding the image palette once;
3. the "wasted" space (which is your concern) can be e.g. filled with white; regions of the same color are compressed much efficiently by PNG.

As an experiment, I generated a 100% white image, 1600 x 1200 and exported as PNG and JPG, by GIMP. PNG occupies 8.3KB; JPG occupies 22KB. If I run that image through Tinypng, it can still reduce the image to 365 bytes (!); the Tinyjpg makes the file fatter, with 11.6 KB.

But even if creating sprites fattens the total file size, the purpose of the transformation is to reduce the number of requests to the server. Roughly speaking, 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 abroad, each of these requests will take on average 100ms; if you put the files together in one single fatten each Zip 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 256 kbps link; for any user who is not in dial-up connection, or any EDGE connection or better, the sprites speed up page loading.