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


Рубрика:  База знаний SEO | Автор: Юрий Макаров


Если на странице сайта используется несколько картинок, то сервер тратит на них свои ресурсы, посылая http запрос к каждой из них. Это приводит к нагрузке на сервер и увеличению времени загрузки страницы сайта. Чтобы, в таком случае, снизить количество запросов и увеличить скорость загрузки страницы сайта, используется техника css-спрайтов, когда несколько маленьких картинок объединяются в одну большую.

Для чего ещё необходимо использование css-спрайтов? Если Вы стараетесь максимально ускорить загрузку Вашего сайта, то наверняка использовали сервис от Google - PageSpeed Insights. При проверке данным сервис страницы Вашего сайта можно будет увидеть сообщение - "Объедините изображения в CSS-спрайты". Так вот, чтобы это сообщение исчезло и Вы повысили на пару баллов значение PageSpeed Score и необходимо овладеть техникой создания css-спрайтов.

Наиболее полезным и типичным примером необходимости использования техники css-спрайтов является использование на странице сайта нескольких иконок социальных сетей. Например, у меня на сайте используется 5 иконок социальных сетей и 1 иконка feed-rss. Итого получается 6 картинок. Получается сервер посылает к каждой картинке 1 запрос и в итоге получается 6 запросов. Нас это не устраивает и мы объединим все 6 картинок в одну. Об этом ниже.

Техника объединения изображений в css-спрайт

Существует много сервисов, предназначенных для объединения изображений в css-спрайты, не говоря уже о том, что это можно делать и самому в photoshop. Я попробовал на практике несколько сервисов, но больше всех понравился вот этот. Он имеет все необходимые настройки и при этом генерирует на выходе необходимый CSS код.

Для начала работ  я подготовил все 6 иконок в PNG формате (Рисунок 1).

Иконка Вконтакте
Иконка Твиттер
Иконка Facebook
Иконка Google+
Иконка Youtube
Иконка feed-rss

Рисунок 1

Далее выставляем необходимые настройки в сервисе spritegen.website-performance.org (рисунок 2):

[servi-spritegen.website-performance.org]

  • Build Direction я выбираю Horizontal (в выходном спрайт-изображении все 6 картинок будут расположены горизонтально);
  • Cмещение по горизонтали: 5 px (картинки будут смещены друг от друга в выходном спрайт-изображении на 5 пикселей);
  • Смещение по вертикали: 5 px.

Остальные настройки оставляем по умолчанию. Но Вы, конечно, можете сами поэкспериментировать с остальными настройками.

Сервис работает с упакованными в ZIP файлами. Поэтому все 6 картинок я сжимаю в ZIP и загружаю в данный сервис. Далее нажимаем "Создать спрайт изображение и CSS".

На выходе получаем спрайт изображение (рисунок 3).

[sprite-izobrajenie]

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

Чтобы встроить спрайт изображение на сайт нужно написать соответствующий HTML и CSS код. Как это сделано у меня Вы можете узнать посмотрев видео (при просмотре выберите качество 720 hd!).

[css-sprite-video-urok]


Оставьте отзыв в виде оценки к записи: " Объединение изображений в CSS спрайты"

1 звезда2 звезды3 звезды4 звезды5 звёзд (Оставлено голосов: 5, оценка: 5,00 из 5)
Загрузка...

Комментарии и отзывы

9 коммент. к записи "Объединение изображений в CSS спрайты"
  1. Andrei :

    Здравствуйте.
    Не совсем по теме, но вопрос связан с изображениями. Как вы считаете, Юрий, стоит ли делать картинки ссылками на саму себя? Т.е. при нажатии на картинку переходим на адрес расположения самой картинки: Название сайта/wp-content/uploads/2013/01/картинка.jpg
    Я как-то раньше не задумывался вообще об этом, а сейчас стало очень интересно. Тем более что все картинки в натуральную величину, не миниатюры. Буду рад услышать ваше мнение. Спасибо.

  2. Юрий Макаров :

    Есть мнение, что так делать нельзя, так как это ссылка, а по любой ссылке переходить ВЕС. В данном случае получается что вес будет уходить через картинку в никуда. То есть будете терять внутренний статический вес.

  3. Andrei :

    Я, честно говоря, как то сам об этом уже подумал. А как дело будет обстоять с индексацией картинок? Если поубирать все ссылки их на самих себя? Они нормально будут индексироваться? Как вы думаете? Спасибо.

  4. Юрий Макаров :

    Думаю, что на индексацию — это точно никак не влияет. Но если вы хотите ускорить индексацию картинок, то настоятельно рекомендую создать специальный файл sitemap для картинок и добавить его в google webmaster. У Яндекса нет проблем с индексацией картинок. Вопрос времени только.

  5. Andrei :

    Спасибо за совет! Уже исправляю ситуацию, а то наплодил ненужных ссылок целую кучу((

  6. Анатолий :

    Отдельное спасибо за ссылку на tinypng!
    Раньше пользовался для сжатия сервисом Yahoo — http://www.smushit.com/ysmush.it/, но сервис очень глючный, картинки обжимает через раз.

  7. Петр :

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

  8. Петр :

    И еще я обьединил изображения, но редактором не грузится картинка, выдает ошибку, пробовал вставить код, что высветился внизу, тожа не фунциклирует, из за чего это, как правильно загрузить картинку в CSS спрайте?

  9. Петр :

    Еще один вопрос. А можно как то в две колонки поставить изображения, я так понял их можно и больше шести , лишь бы вес архива не превышал 1 мб. Но их ведь можно cразу перекодировать в JPEG и грузить, я пользуюсь прекрасной програмкой RIOT , сжимает в 10 раз при конвертации с PNG в JPEG . Большое спасибо всем кто ответит и за этот уникальный инструмент обьединения.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *