No Image

Что такое css спрайты

СОДЕРЖАНИЕ
0 просмотров
10 марта 2020

Для начала краткое вступление. При загрузке странице браузерам допускается только 2 запроса к серверу (у современных браузеров это число увеличилось до 6). Каждый элемент сайта будь то файл с таблицей стилей, файлы javascript, картинки являются независимыми загрузками, которые требуют отдельного запрос на сервер.

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

Еще давным-давно (2003-2004) было предложено решение этой ситуации с главной целью ускорить загрузку сайта с помощью уменьшения количества запросов к серверу. Это технология получила название "Спрайты".

Что такое спрайты CSS

Например, вместо 10 картинок грузится одна, но побольше. При грамотном распределение это ускоряет работу сайта. Однако здесь главное не переусердствовать. Не всегда объединение картинок дает преимущество в загрузке сайта.

Пример спрайта CSS

Рассмотрим небольшой пример реализации спрайта CSS. Допустим, мы сделали следующую картинку из трех отдельно взятых стрелочек.

Чтобы обратится к нужной стрелке в CSS надо прописать


В чем преимущество использования CSS-спрайтов ? Представьте, что у вас есть шесть изображений, используемых в макете веб-страницы, и браузер должен загружать их все по отдельности. Если бы они были объединены в одно изображение, вы смогли бы существенно увеличить скорость загрузки. Это уменьшит количество обращений к серверу, необходимых для отображения страницы, что сделает ваш сайт быстрее.

Вместо загрузки шести изображений теперь загружалось бы одно. В этом преимущество CSS спрайтов .

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

Каждое изображение должно быть загружено. Браузер должен запросить на сервере изображение, сервер отправить его, а затем браузер должен его отобразить. Если бы дело касалось одного-двух изображений, особых проблем бы не возникло. Но так как рисунков загружается намного больше — это негативно сказывается на скорости загрузки страницы.

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

Читайте также:  Как на клавиатуре набирать знаки препинания

Как объединить изображения в спрайт

Существует два основных этапа создания CSS спрайтов . Сначала вы должны создать изображение и затем поместить его.

Объединение изображений

Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер ( 50 на 50 пикселей ):


Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его « sprite.png «. Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.

Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок ( мегафон ) расположен в верхних 50 пикселях нового изображения, а второй ( смайлик ) — в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS :

Позиционирование изображения на странице

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

Приведенный выше код CSS указывает ширину и высоту изображения мегафона ( 50 на 50 пикселей ), он также вызывает изображение « sprite.png «, которое является объединенным. Часть кода « 0 0px » отвечает за отображение спрайта. Указание начинать вывод изображения с « 0 0px » означает, что оно должно отображаться с 0 пикселей по оси X и с 0 пикселей по оси Y . Это значит « начинать вывод изображения сверху » и « начинать вывод изображения слева «.

Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей ( где расположен мегафон ). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта . Мы создадим класс CSS под названием « smile «:

Читайте также:  Горячие клавиши поиск на странице сайта

Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: « 0 -50px «. Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат ( -50px ). Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.

Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом « megaphone «:

Когда нужно вывести смайлик, мы размещаем div с классом « smile «:

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

Данная публикация представляет собой перевод статьи « How to use CSS sprites » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS-спрайт – способ объединить много изображений в одно, чтобы:

  1. Сократить количество обращений к серверу.
  2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
  3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

Рассмотрим, как это работает, на примере дерева:

Сейчас «плюс», «минус» и «статья» – три отдельных изображения. Объединим их в спрайт.

Шаг 1. Использовать background

Первый шаг к объединению изображений в «спрайт» – показывать их через background ., а не через тег IMG .

В данном случае он уже сделан. Стиль для дерева:

Шаг 2. Объединить изображения

Составим из нескольких изображений одно icons.gif , расположив их, например, по вертикали.

Из , и получится одна картинка:

Шаг 3. Показать часть спрайта в «окошке»

А теперь самое забавное. Размер DIV для иконки – жёстко фиксирован:

Это значит, что если поставить в качестве background объединённую картинку, то вся она не поместится, будет видна только верхняя часть:

Если бы высота иконки была больше, например, 16×48 , как в примере ниже, то было бы видно и остальное:

Читайте также:  Что такое карточный долг

…Но так как там всего 16px , то помещается только одно изображение.

Шаг 4. Сдвинуть спрайт

Сдвиг фона background-position позволяет выбирать, какую именно часть спрайта видно.

В спрайте icons.gif изображения объединены так, что сдвиг на 16px покажет следующую иконку:

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

Отступы

Обычно отступы делаются margin/padding , но иногда их бывает удобно предусмотреть в спрайте.

Тогда если элемент немного больше, чем размер изображения, то в «окошке» не появится лишнего.

Пример спрайта с отступами:

Иконка RSS находится в нём на координатах (90px, 40px) :

Это значит, что чтобы показать эту иконку, нужно сместить фон:

При этом в левом-верхнем углу фона как раз и будет эта иконка:

Элемент, в котором находится иконка (в рамке), больше по размеру, чем картинка.

Если бы в спрайте не было отступов, то в такое большое «окошко» наверняка влезли бы другие иконки.

Итого

Решение лучше всего принимать, исходя из принципов семантической вёрстки.

Задайте вопрос – что здесь делает изображение? Является ли оно самостоятельным элементом страницы (фотография, аватар посетителя), или же оформляет что-либо (иконка узла дерева)?

Элемент IMG следует использовать в первом случае, а для оформления у нас есть CSS.

  1. Сократить количество обращений к серверу.
  2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
  3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

Если фоновое изображение нужно повторять по горизонтали или вертикали, то спрайты тоже подойдут – изображения в них нужно располагать в этом случае так, чтобы при повторении не были видны соседи, т.е., соответственно, вертикально или горизонтально, но не «решёткой».

Далее мы встретимся со спрайтами при создании интерфейсов, чтобы кнопка при наведении меняла своё изображение. Один спрайт будет содержать все состояния кнопки, а переключение внешнего вида – осуществляться при помощи сдвига background-position .

Для автоматизированной сборки спрайтов используются специальные инструменты, например SmartSprites.

Комментировать
0 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
Adblock detector