Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Спрайты css. Ускоряем загрузку страниц.

Раздел: 

Используя в html верстке метод спрайтов css мы получаем возможность сократить количество обращений к серверу при загрузке страницы, что позволяет ускорить ее загрузку и снизить нагрузку на сервер в целом.

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

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

Как сделать спрайт правильно?

  1. На первом этапе создания необходимо группировать картинки по типам (jpg, gif, png и тд) , поскольку объединять изображения разных типов в одно невозможно.Группировка картинок для спрайта
  2. При помощи любого графического редактора (я обычно использую фотошоп) сливаем все маленькие картинки в одну.Спрайт
  3. При помощи css свойства background-position выводим в необходимых местах страницы нужную нам часть картинки.background-position

Практические замечания по использованию css спрайтов

  • Если небольшие элементы дизайна сайта (пункты меню, различные кнопки и тд) меняют свой фон при наведении на них мыши или клике по ним мы должны пользоваться методом, поскольку это не просто оптимизирует загрузку страницы, а позволяет нам избежать бага с «пустой» кнопкой, когда после наведения на что-то мы пару секунд видим пустое место, а после появляется картинка. При использовании спрайтов файл картинки один, следовательно загружается он один раз при переходе на страницу и смена фона при наведении происходит мгновенно, ведь меняется лишь область картинки показываемая пользователю.
  • Метод используется для картинок из оформления сайта, а не из содержательной его части. Не стоит склеивать картинки несущие на себе смысловую нагрузку и тд. Разница в загрузке 3 или 5 файлов никак не повлияет на скорость подгрузки страницы, а может иметь ряд негативных последствий с точки зрения сео. Подробнее о этом можно почитать тут.
  • Если область показа картинки предполагает, что вокруг картинки будет свободное пространство, то это также нужно учитывать при склейке спрайта, оставляя необходимые зазоры по краям.
  • Сохраняйте исходники с не слитыми слоями при склейке картинки. Возможна ситуация, когда в дальнейшем вам, к примеру, придется поменять размер пары элементов дизайна, тогда при отсутствии исходника придется ради пары мелких правок перерисовывать спрайт с нуля.
  • Не переборщите с размером картинки. Знайте во всем меру, ведь если ваш файл будет весить несколько мегабайт, то возможна ситуация, когда пользователь будет наблюдать экран без оформления несколько секунд после его загрузки.
  • Применяйте фантазию при создании спрайтов. Правильно расположить в нем иконки не так просто, как может показаться на первый взгляд. К примеру, при расположении иконок слева от элемента дизайна можно склеить спрайт лесенкой, что ограничит зону видимости других картинок спрайта и в целом файл спрайта останется компактным. (ниже линиями помечены зоны видимости иконок).Спрайт-лестница

Подводя итоги

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

Ключевые слова: 

Курсы по CSS (в открытом доступе)