CSS-спрайты — объединение картинок в одну для ускорения загрузки

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

Здесь я покажу пример объединения трёх картинок в одну. Для начала нам нужно объединить их в одну с помощью какого-либо графического редактора: paint, Gimp или любого другого. Существуют сайты, которые позволяют сгенерировать CSS-спрайт на основе имеющихся у вас мелких изображений. Гуглите по запросу «генератор CSS-спрайтов». У меня есть вот такое изображение, состоящее из трёх других изображений:

buttons

Создадим простую HTML-страницу, где все они сначала будут вместе, потом — по отдельности:

Обратите внимание на классы. В том месте, где все три картинки будут вместе, стоит класс buttons, а в тех местах, где они отдельно, стоят дополнительно другие классы. Вся магия будет в описании этих классов.

Для того чтобы отобразить все картинки вместе, класс buttons должен содержать атрибут background-image. Здесь всё просто. Для остальных классов нам нужно указать смещение в картинке, на котором находится нужное изображение. Это делается с помощью атрибута background-position. Для второй картинки мы сдвигаем позицию картинки на 32 пикселя влево, чтобы отобразить вторую картинку. Для третьей картинки мы сдвигаем позицию на 32 × 2 = 64 пикселя влево, чтобы левый край попал на начало третьей картинки.

Работающий пример можно посмотреть по ссылке — https://urvanov.ru/projects/css-examples/image-tiles/index.html

Один комментарий к “CSS-спрайты — объединение картинок в одну для ускорения загрузки”

  1. Статья не действительна, картинка заплывает под другую картинка на background image, какой ещё есть способ?

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

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