14
I see on most large websites that the icons used are grouped in only one image, which leads to the download of only one file by the user. Is there some benefit in speed gains or is it just a matter of organization?
3 answers
10
The question here is to decrease the amount of requests the browser makes to the server and therefore optimize the page load time and decrease the response time to the user.
Performance
This improves performance because browsers limit the amount of downloads simultaneous, then the loading of many images would be queued one after the other. Think of a manager of downloads with 100 items in the queue and a limit of only 3 downloads at the same time.
Consider the generated graph in a yahoo survey!:
Based on the Black Principle (80-20), they came to an approximation that 80% of the time spent loading a page was spent by images. See the table below, taken from the same article, with the measure of other sites:
Note that scripts and styles can also cause the same effect, so anyone who cares about bringing images together in one will usually also gather all scripts and styles in unified and minified files.
And even though all images and other static items are on cache, the browser can still check with some frequency, depending on the HTTP header of the site, if there has been a change. For this, he will have to make additional requisitions.
Scalability
Another factor that large sites consider is scalability. They don’t want your browser to make dozens or hundreds of small requests because it decreases the amount of people they can meet at the same time.
CDN costs
The amount of hits is also an additional concern on large websites that use CDN, as they pay per request. A CDN is like a cache external to your company responsible for delivering static content quickly and reliably. The problem is that every access to CDN will cost you a few cents, so it’s better 1 than 100 access per user. Facebook, for example, created a system called Haystack to store its billions of images and one of the main concerns was to decrease the use of the CND to distribute the images.
Side effects
In contrast, merging images, scripts and styles increases complexity and potential problems in the deploy of an application. Many specific optimizations have this kind of effect.
I read some reports that the zoom of some browsers can degrade the solution with sprites, but it may just be a bad implementation.
5
This practice of gathering the images into one is called sprite.
The advantage is that you save requests to the server. For small sites it doesn’t make much difference, but for large sites, whose number of hits is very high, it makes.
That is, instead of making 10 requests to the server to load several icozinhos, you can make one and load all icons at once.
Consequently, having a less busy server, you will have a site that will respond better to users.
Example:
The OS itself uses sprites:
2
To complement the responses of the partners, you can use this tool here --> http://www.spritecow.com/ to help you to make a Sprite if you are having difficulty, it is very easy, just select the region of the image that contains a certain icon or some figure, and it generates a css class with the respective position that finally just call this class in html and it is done.
Note: Depending on the element you assign this class to, you will have to put a display: block on it (in the case if you try to assign to an inline element).
Hug.
Browser other questions tagged html image
You are not signed in. Login or sign up in order to post.
Just to complement, there is also the visual advantage to the site, when you change the background of an element from one image to another (buttons and sliders) the background of the element will be empty until the new image is loaded, it is possible to solve thisloading the images with Javascript, but the sprites save the effort. Another factor is storage where merging many tiny files can end up causing them to occupy more than they really should.
– Cahe
In Opengl at least, use a
spriteinstead of multiple separate textures is more efficient as well (loads faster, switches between images faster, saves memory). If the browser avails the GPU, probably this rule is valid too.– Lucas Lima
One of the side effects is to increase the color palette of the image as a whole if the icons do not share many similar colors. When this is the case, one has to calculate whether to compensate for 2 separate icone sets (evaluating http request cost vs. saved size with palette overhead).
– Bacco
@Interesting Cahe. This is really a common problem.
– utluiz
@Lucasnunes I came to think about it and really should be better from the point of view of memory use and rendering, after all any engine decent would have to reuse the same image pointer. The problem is that in practice can not be so efficient because of overhead CSS processing needed to do the clip image. Well, it’s just an idea. Do you have any reference to that question? Someone who actually tested that question in practice?
– utluiz
@Bacco I am not an image specialist. Does the size of the palette make the image size increase proportionally? I know that in GIF this is a problem because the colors of the palette are limited and the result of many icons would be at least deteriorated. Formats like PNG that use RGBA colors suffer from problems au use more or less colors?
– utluiz
@utluiz Unfortunately I did not find a benchmark that relates the two. Or I think that
spritesin the browser or in opengl, now the union of the two does not. Despite this, most benchmark browsers I have seen usesprites(ex: fishbowl).– Lucas Lima
@utluiz PNG24/32 is RRGGBB(AA) per pixel, so the size does not depend on the colors (except for the compression). PNG8, in turn, is already palette-based, so it behaves like GIF (the palette can be 2 to 256 colors, and the number of bits per pixel is proportional to the palette size). The more bits you need per color, the bigger the file gets. Just like in GIF, if you have varied colors, you will need a larger palette to accommodate all without detonating the look.
– Bacco