Верстальщики знают, что для быстрой загрузки сайта хорошо укладывать все маленькие картиночки в один большой файл: меньше запросов, плотнее сжатие, не надо предварительных загрузчиков и т.д.

Все бы хорошо, если бы правка таких упакованных файлов не была жутким геморроем. Нужно же сначала сохранить измененную картинку в PNG, потом вставить новую версию в спрайт. Если она на свое место не помещается, то весь спрайт надо переделывать. А это значит, что и часть CSS тоже нужно обновлять: лазить по спрайту с нереальным зумом и вычислять позиции каждой картиночки. Кошмар.

Потом еще добавляются муки с повторяющимися фонами. Они бывают вертикальные и горизонтальные, ограниченные и безграничные, полупрозрачные и нет. Бардак.

Ну и напоследок. IE6 не поддерживает смещение полупрозрачных фонов, хакнутых через AlphaImageLoader. Значит, в нем все это вообще невозможно. Абзац.

В общем случае эту задачу действительно решить не удается. Либо файл получится огроменным и не влезет в память, либо для шестого ИЕ придется изобретать новый движок отображения полупрозрачного пнг на экспрешнах (и все будет безумно тормозить), либо верстальщик повесится при следующем, со стороны незаметном, апгрейде дизайна. Правда, если постараться, то всех этих напастей можно избежать и превратить спрайты из запущенного геморроя, в панацею.

Мы сговорились с дизайнером и решили не упростить интерфейс настолько, чтобы его верстка смогла влезть в один спрайт. Да, вот так просто взяли и поставили себе творческое ограничение. Спрайты были нам просто необходимы, так как сайт должен был моментально открываться, выдерживая нагрузку в несколько сотен человек в минуту на недорогом ВПСе. Вторая задача, которую призван был помочь решить спрайтинг — это легкая скинизация всего сайта или его части.

Главную проблему (гемор при обновлении) решили хитро: перенесли весь дизайн иконок, кнопок, плашек и других элементов интерфейса со всеми слоями в один файл. Теперь ни дизайнеру, ни верстальщику не надо париться в поисках актуальной версии какой-нибудь зеленок кнопки с белыми буковками. Когда надо обновить спрайт мы просто сохраняем его как картинку. Затем, чтобы помочь верстальщику с вычислением позиций, мы разделили файл на квадраты по 50 пикселей. Каждый элемент спрайта занимает свой квадрат (или несколько квадратов) и картинка начинается в левом верхнем углу этого квадрата. Таким образом смещение фона можно узнать на глаз, вообще не открывая фотошоп.

В решении проблемы повторяющихся фонов зашли с двух сторон. Во-первых, договорились не делать больших пространств со сложными, пересекающимися фонами. Во-вторых, для простых случаев заготовили картинки достаточной ширины, чтобы фон был заведомо больше любого элемента на сайте. В итоге обошлись одним длинным и двумя коротенькими фонами. Решение не универсальное, но нам подошло.

С эксплорером обошлись наиболее жестоко: забили на него. Не совсем, конечно, но выкручиваться со скриптованием всех элементов ради полупрозрачного фона не стали. Просто сделали восьмибитную версию спрайта для шестого ИЕ. Получили отсутствие полупрозрачных фонов с градиентами, а также ожидаемые зазубренные края, как в девяностые. А чего еще ждут от этого браузера его пользователи? К моменту запуска сайта, шестой ИЕ составлял всего 12% аудитории, и мы решили, что они ничего не заметят, а мы сэкономим кучу времени и эмоций для более перспективных задач.

И вот что получилось (темный фон для наглядности).

24 бита (16,2 Кб):

8 бит (7,3 Кб):

Все издевательства выносил сайт РитейлСтарса. Там всего две картинки: спрайт отвечает за интерфейс, а джипег — за фон. Все максимально облегчено. Даже фотки, кстати, грузятся по мере пролистывания.

UPD: для решения задачи спрайтинга в лоб взрослые дяди сделали мега-закладку.