Gaps in sprites

To speed up downloading small images like icons, they are often united into one image called sprite. This allows to avoid separate HTTP request to server for each of image files and to minimize associated delays caused by repeated waiting for server responses.

Issue

However using sprites is connected with some nuances. One of most common errors is placing images in sprite without gaps between them.

In some browsers — Internet Explorer in particular (in essense — all browsers except for Firefox) — images from such sprites are displayed incorrectly at some full-page-zoom levels different from 100%: due to rounding errors, a part of one image may be displayed as part of another image which is adjacent to the first one in sprite.

One of examples of the issue is Yandex search engine that unites favicon images of websites on search-result pages to such sprites (interestingly, situation has not changed even after years after a bug-report from your’s truly):

As we can see on the screenshot above, the second icon incorrectly contains 1-pixel line from the bottom part of the first icon (IE10 at 120% zoom level).

Solution

To avoid incorrect displaying of images from sprites when using browser’s full-page zoom, it is enough just to place images inside sprite with a gap between them. As practice shows, it’s necessary and sufficient to use a gap of 2 pixels. (With 1-pixel gap, the issue in IE is not eliminated entirely, while gaps of 3+ pixels are just wasting memory.)

Another solution is using Data URI mechanism that provides ability to embed files as encoded strings directly into stylesheets and allows to avoid sprites themselves by coding and using each image as a standalone thing (though at the cost of some increasing of file size compared with original binary file). Data URIs are supported by all modern browsers including IE8+ (beginning with IE9 — without limitation of 32 KB per each Data-URI-encoded file).