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


Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

Ваш e-mail не будет опубликован.

*