Как объединить несколько изображений в CSS-спрайт?

Объединяем изображения в CSS-спрайт

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

• Пользователь получит более быстрое открытие страницы.
• Вебмастер уменьшит нагрузку на свой сервер.

Надеюсь, что с теорией всё более менее понятно, поэтому перейду к примеру. У меня нет необходимости использовать CSS спрайт на этом сайте, так как мой дизайн почти что не использует изображений. Но есть у меня другой сайт, который напичкан такими изображениями. Прошу рассмотреть онлайн-кинотеатр Amove.ru. Кстати, буду рад видеть Вас там. А теперь откройте вот спрайт по адресу //amove.ru/img/sprite.png. Открыв его возьмите отдельное изображение и попробуйте найти его на самом сайте. Уверен что многие из этих изображений Вы найдете на главной странице. Оставшиеся изображения используются на других страницах. Вот Вам и яркий пример использования CSS-спрайта. Вместо десятков маленьких изображений, а соответственно десятков запросов на сервер, Вы предоставляете пользователю одно единственное изображение и координаты, откуда браузер должен достать необходимую часть.

Создание CSS спрайта

Процесс создания CSS спрайта интуитивно понятен: просто необходимо в одно большое изображение добавить несколько мелких. Для этих целей подойдет даже Paint. Да, Вы можете использовать и его. Но самый важный момент в создании спрайта — это знание координаты левого верхнего угла маленького изображения, а так же его длины и ширины. Именно поэтому я рекомендую Вам использовать специальный сервис под названием SpritePad, который находится по адресу //spritepad.wearekiss.com/. Процесс создания CSS спрайта на данном сайте я подробно опишу ниже:

1. Скачайте себе на компьютер все мелкие изображения, которые используются в дизайне Вашего сайта.
2. Исходя из приблизительных размеров Ваших изображений, лучше сразу настроить ширину и высоту рабочей области. Для этого нажмите SpriteMap -> MapSize. Далее укажите ширину и длину в пикселях.
3. Перетащите по одному все изображения в рабочую область. Перетаскивая каждое изображение обустройте их таким образом, чтобы ни одно изображение не наскакивало на другое. И желательно минимизировать потери, то есть попытайтесь обустроить в пределах минимальной области, так как лишний килобайты нам не к чему.
4. Когда все изображения добавлены, нажмите кнопку Fit Documemts. Данная кнопка автоматически обрежет всю неиспользованную зону, поэтому не бойтесь во втором пункте указывать большую область.
5. После всего этого нажмите кнопку Download. В ответ Вы получите архив, в котором содержится CSS-спрайт в формате PNG. Кроме этого в архиве Вы найдете CSS файл, в котором содержится вся важная информация: координаты начала изображения, его ширина и длина. Данный сервис по созданию спрайта уже сделал свою функцию, но я рекомендую его не закрывать.
6. Полученный спрайт, тот который в формате PNG, добавьте себе на сайт с помощью FTP-сервера или другого менеджера загрузки. Так же сохраните для себя путь данного файла.
7. Далее нам необходимо вмешаться в сам код дизайна Вашего сайта. Тут может быть два варианта:
   1. Изображение в дизайн добавляется через CSS файл.
   2. Изображение в дизайн добавляется через HTML посредством тэга <img>.
8. Во втором случае просьба прочитать мою предыдущую запись о том, как добавить изображение через CSS. Когда все изображения будут добавляться в дизайн посредством CSS, можете перейти к следующему пункту.
9. А следующий пункт я опишу далее.

Добавление в дизайн изображения из CSS спрайта

Для примера я возьму пример из предыдущего поста:

.logo {
 top:0;
 display:block;
 text-align: left;
 float: left;
 margin-right: 48px;
 width: 114px;
 height: 59px;
 background: url(/img/logo.png) no-repeat;

Данный блок CSS файла определяет расположение логотипа всё-того же сайта. Тут он приведен в изначальном варианте, до использования спрайта. Как видите, тут указывается изображение logo.png. Так же указана ширина и длина изображения. Нам необходимо данный блок немного видоизменить до такой кондиции:

.logo {
 top:0;
 display:block;
 text-align: left;
 float: left;
 margin-right: 48px;
 width: 114px;
 height: 59px;
 background: url(/img/sprite.png) no-repeat;
 background-position: -743px -375px;

Как видите изменения претерпела строка, которая указывает на местоположение файла. Теперь там указан адрес вышеописанного CSS спрайта. Но указать только местоположение спрайта недостаточно, нужно, как я и говорил, указать координаты крайнего левого верхнего угла. Для этих целей используется последняя строка. Что нужно делать Вам? Местоположение спрайта я просил Вас запомнить в 6 пункте, надеюсь Вы сможете изменить местоположение изображения на Ваш спрайт. Последнюю строчку Вы можете взять из CSS файла, который скачивали с сайта SpritePad, либо взять их с того же сайта, который я просил Вас не закрывать. Для этого найдите блок, который носит имя загруженного маленького изображения, и скопируйте первую строчку, где указаны координаты. Кроме координат там приведены так же ширина и длина изображения. Так как в моем примере они были изначально, я их не менял. Если у Вас ширина и длина не указаны, укажите их, взяв необходимые данные всё с того же сайта.

Вот таким образом происходит объединение нескольких изображений в один CSS спрайт. Единственное о чем хотел бы Вас предупредить: используйте спрайты только для статических изображений. Использование спрайтов для динамических изображений немного сложнее, об этом я напишу позже. А пока что имейте в виду, если рядом с местоположением изображения указано no-repeat, то все нормально. А если же указано repeat-x либо repeat-y, не включайте их в основной спрайт.