Объединяем изображения в CSS-спрайт
Необходимость объединения нескольких изображений в один CSS спрайт возникла у меня для внутренней оптимизации сайта. Объединение нескольких изображений в один спрайт в плане оптимизации очень даже важный ход, так как браузер пользователя запросит только одну единственную картинку с Вашего сервера, вместо нескольких. Вместо десятков запросов на Ваш сервер, браузер отправит только один запрос и получит только одно изображение, которое сохранит в кэше компьютера. Все дальнейшие изображение он будет вытаскивать из этого спрайта, уже не обращаясь к Вашему серверу. При использовании спрайта в плюсе остаются обе стороны:
- Пользователь получит более быстрое открытие страницы.
- Вебмастер уменьшит нагрузку на свой сервер.
Надеюсь, что с теорией всё более менее понятно, поэтому перейду к примеру. У меня нет необходимости использовать CSS спрайт на этом сайте, так как мой дизайн почти что не использует изображений. Но есть у меня другой сайт, который напичкан такими изображениями. Прошу рассмотреть онлайн-кинотеатр Amove.ru. Кстати, буду рад видеть Вас там. А теперь откройте вот спрайт по адресу http://amove.ru/img/sprite.png. Открыв его возьмите отдельное изображение и попробуйте найти его на самом сайте. Уверен что многие из этих изображений Вы найдете на главной странице. Оставшиеся изображения используются на других страницах. Вот Вам и яркий пример использования CSS-спрайта. Вместо десятков маленьких изображений, а соответственно десятков запросов на сервер, Вы предоставляете пользователю одно единственное изображение и координаты, откуда браузер должен достать необходимую часть.
Создание CSS спрайта
Процесс создания CSS спрайта интуитивно понятен: просто необходимо в одно большое изображение добавить несколько мелких. Для этих целей подойдет даже Paint. Да, Вы можете использовать и его. Но самый важный момент в создании спрайта — это знание координаты левого верхнего угла маленького изображения, а так же его длины и ширины. Именно поэтому я рекомендую Вам использовать специальный сервис под названием SpritePad, который находится по адресу http://spritepad.wearekiss.com/. Процесс создания CSS спрайта на данном сайте я подробно опишу ниже:
- Скачайте себе на компьютер все мелкие изображения, которые используются в дизайне Вашего сайта.
- Исходя из приблизительных размеров Ваших изображений, лучше сразу настроить ширину и высоту рабочей области. Для этого нажмите SpriteMap -> MapSize. Далее укажите ширину и длину в пикселях.
- Перетащите по одному все изображения в рабочую область. Перетаскивая каждое изображение обустройте их таким образом, чтобы ни одно изображение не наскакивало на другое. И желательно минимизировать потери, то есть попытайтесь обустроить в пределах минимальной области, так как лишний килобайты нам не к чему.
- Когда все изображения добавлены, нажмите кнопку Fit Documemts. Данная кнопка автоматически обрежет всю неиспользованную зону, поэтому не бойтесь во втором пункте указывать большую область.
- После всего этого нажмите кнопку Download. В ответ Вы получите архив, в котором содержится CSS-спрайт в формате PNG. Кроме этого в архиве Вы найдете CSS файл, в котором содержится вся важная информация: координаты начала изображения, его ширина и длина. Данный сервис по созданию спрайта уже сделал свою функцию, но я рекомендую его не закрывать.
- Полученный спрайт, тот который в формате PNG, добавьте себе на сайт с помощью FTP-сервера или другого менеджера загрузки. Так же сохраните для себя путь данного файла.
- Далее нам необходимо вмешаться в сам код дизайна Вашего сайта. Тут может быть два варианта:
- Изображение в дизайн добавляется через CSS файл.
- Изображение в дизайн добавляется через HTML посредством тэга <img>.
- Во втором случае просьба прочитать мою предыдущую запись о том, как добавить изображение через CSS. Когда все изображения будут добавляться в дизайн посредством CSS, можете перейти к следующему пункту.
- А следующий пункт я опишу далее.
Добавление в дизайн изображения из CSS спрайта
Для примера я возьму пример из предыдущего поста:
[html].logo {
top:0;
display:block;
text-align: left;
float: left;
margin-right: 48px;
width: 114px;
height: 59px;
background: url(/img/logo.png) no-repeat;[/html]
Данный блок CSS файла определяет расположение логотипа всё-того же сайта. Тут он приведен в изначальном варианте, до использования спрайта. Как видите, тут указывается изображение logo.png. Так же указана ширина и длина изображения. Нам необходимо данный блок немного видоизменить до такой кондиции:
[html].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;[/html]
Как видите изменения претерпела строка, которая указывает на местоположение файла. Теперь там указан адрес вышеописанного CSS спрайта. Но указать только местоположение спрайта недостаточно, нужно, как я и говорил, указать координаты крайнего левого верхнего угла. Для этих целей используется последняя строка. Что нужно делать Вам? Местоположение спрайта я просил Вас запомнить в 6 пункте, надеюсь Вы сможете изменить местоположение изображения на Ваш спрайт. Последнюю строчку Вы можете взять из CSS файла, который скачивали с сайта SpritePad, либо взять их с того же сайта, который я просил Вас не закрывать. Для этого найдите блок, который носит имя загруженного маленького изображения, и скопируйте первую строчку, где указаны координаты. Кроме координат там приведены так же ширина и длина изображения. Так как в моем примере они были изначально, я их не менял. Если у Вас ширина и длина не указаны, укажите их, взяв необходимые данные всё с того же сайта.
Вот таким образом происходит объединение нескольких изображений в один CSS спрайт. Единственное о чем хотел бы Вас предупредить: используйте спрайты только для статических изображений. Использование спрайтов для динамических изображений немного сложнее, об этом я напишу позже. А пока что имейте в виду, если рядом с местоположением изображения указано no-repeat, то все нормально. А если же указано repeat-x либо repeat-y, не включайте их в основной спрайт.
