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