Зазоры в спрайтах

Для ускорения загрузки мелких оформительских изображений их нередко объединяют в единое изображение, называемое спрайтом. Это позволяет избежать отдельного HTTP-запроса на сервер для каждого из файлов изображений и минимизировать сопутствующие задержки, связанные с многократным ожиданием ответа сервера.

Проблема

Но использование спрайтов сопряжено с определёнными нюансами. Одна из наиболее распространённых ошибок — расположение изображений в спрайте вплотную друг к другу.

В некоторых браузерах — в частности, Internet Explorer (а по сути — во всех, кроме Firefox) — изображения из таких спрайтов отображаются неправильно при некоторых значениях масштаба отображения страницы (Full page zoom), отличных от 100%: из-за погрешностей округления часть одного изображения может отобразиться как часть другого изображения, находящегося в спрайте по соседству.

За примерами далеко ходить не надо: тот же Яндекс объединяет favicon-пиктограммы сайтов в результатах поиска именно в такие спрайты (что любопытно — ситуация не изменилась даже спустя годы после соответствующего баг-репорта от вашего покорного слуги):

Как можно видеть на приведённом скриншоте, вторая пиктограмма ошибочно содержит однопиксельную полоску из нижней части первой пиктограммы (IE10, масштаб 120%).

Решение

Чтобы избежать некорректного отображения изображений из спрайтов при масштабировании страницы средствами браузера, достаточно просто располагать изображения в спрайте с зазором. Практика показывает, что необходимым и достаточным является зазор размером 2 пиксела. (При зазоре в 1 пиксел в IE проблема не устраняется полностью, а зазоры в 3 пиксела и более являются уже пустым расходом памяти.)

Другим решением является использование механизма Data URI, позволяющего встраивать файлы в виде закодированных строк непосредственно в таблицы стилей и позволяющего отказаться от спрайтов как таковых, кодируя и используя каждое изображение как самостоятельную сущность (хотя и ценой некоторого увеличения объёма по сравнению с исходным файлом в двоичном виде). Data URI поддерживаются всеми современными браузерами, в том числе IE8 и выше (начиная с IE9 — без ограничения в 32 КБ на один Data-URI-кодированный файл).