CSS-спрайты и листы изображений


Содержание материала:

CSS Урок 27 Спрайты Изображений

Спрайты Изображений

Спрайт изображений — это коллекция картинок, вставленных в одиночное изображение.

Веб страница с большим количеством изображений может занять значительное время при загрузке и генерирует множество запросов к серверу.

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

Спрайты Изображений — Простой Пример

Вместо использования трех отдельных изображений, мы используем это одиночное изображение («img_navsprites.gif»):

С помощью CSS, мы можем показать только часть изображения, которая нам потребуется.

В следующем примере CSS указывает, какую часть изображения «img_navsprites.gif» следует показать:

Пример

img.home
<
width:46px;
height:44px;
background:url(images/img_navsprites.gif) 0 0;
>

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

  • — Всего-навсего определяет небольшое прозрачное изображение т.к. атрибут src не может быть пустым. Показываемое изображение будет фоновым рисунком, который мы указали в CSS
  • width:46px;height:44px; — Определяет порцию изображения, которую мы хотим использовать
  • background:url(images/img_navsprites.gif) 0 0; — Определяет фоновый рисунок и его положение (слева 0px, сверху 0px)

Это простейший способ использования спрайтов изображений, теперь мы хотим расширить его путем использования ссылок и hover-эффектов.

Спрайты Изображений — Создание Списка Навигации

Мы хотим использовать спрайт изображенгий («img_navsprites.gif») для создания списка навигации.

Мы будем использовать HTML список, т.к. в нем можно использовать ссылки, а также он поддерживает фоновое изображение:

Пример

#navlist #navlist li
#navlist li, #navlist a

#next
#next

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

  • #navlist — позиция устанавливается в относительную чтобы реализовать абсолютное позиционирование внутри нее
  • #navlist li — поля и отступы устанавливаются в 0, стиль списка (list-style) удаляется , и все пункты списка абсолютно позиционированы
  • #navlist li, #navlist a — высота всех изображений равна 44px

Теперь начинаем позиционировать и оформлять каждую специфическую часть:

  • #home — Размещается слева и ширина изображения устанавливается в 46px
  • #home — Определяет фоновый рисунок и его положение (left 0px, top 0px)
  • #prev — Размещается правее на 63px (ширина #home 46px + некоторое дополнительное пространство между элементами), и ширина устанавливается в 43px.
  • #prev — Определяет фоновое изображение на 47px правее (ширина #home 46px + 1px ширина разделятеля (вертикальной линии между рисунками)
  • #next— Размещается правее на 129px (начало #prev равно 63px + ширина #prev 43px + дополнительное пространство), и ширина устанавливается в 43px.
  • #next — Определяет фоновый рисунок на 91px правее (ширина #home 46px + 1px вертикальный разделитель + ширина #prev 43px + 1px вертикальный разделитель )

Спрайты Изображений — Эффект Hover

Теперь мы хотим добавить эффект hover к нашему списку навигации.

Наше новое изображение («img_navsprites_hover.gif») содержит три рисунка для навигации и три рисунка, необходимых для hover-эффектов:

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

Мы добавляем всего три строчки кода для реализации hover-эффекта:

СSS Спрайты

Спрайты изображений

Спрайт изображения — это набор изображений, помещенных в одно изображение.

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

Использование спрайтов уменьшит количество запросов к серверу и сохранит пропускная способность.

Спрайты изображений — простой пример

Вместо трех отдельных изображений мы используем одно изображение («img_navsprites.gif»):

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

В следующем примере CSS указывает, какое изображение «img_navsprites.gif», части спрайтов нужно показать:

Пример

  • — Определяет только небольшое прозрачное изображение потому что атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS
  • width: 46px; height: 44px; — Определяет ту часть изображения, которую мы хотим использовать
  • background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его расположение (слева 0 пикселей, сверху 0 пикселей)


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

Спрайты изображений — создание списка навигации

Мы хотим использовать спрайтовое изображение («img_navsprites.gif») создание списка навигации.

Мы будем использовать список HTML, потому что это может быть ссылка, а также поддерживает фоновое изображение:

Пример

#navlist li <
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
>

#navlist li, #navlist a <
height: 44px;
display: block;
>

#home <
left: 0px;
width: 46px;
background: url(‘img_navsprites.gif’) 0 0;
>

#prev <
left: 63px;
width: 43px;
background: url(‘img_navsprites.gif’) -47px 0;
>

#next <
left: 129px;
width: 43px;
background: url(‘img_navsprites.gif’) -91px 0;
>

  • #navlist — положение установлено по отношению абсолютного расположени внутри его
  • #navlist li — для полей и отступов задано значение 0, стиль списка удаляется, а все элементы списка располагаются в абсолютном порядке
  • #navlist li, #navlist a — высота всех изображений 44px

Теперь зададим позицию и стиль для каждой конкретной части:

  • #home — Расположен полностью влево, а ширина изображения 46 пикселей
  • #home — Определяет фоновое изображение и его положение (слева 0 пикселей, сверху 0 пикселей)
  • #prev — Расположенный вправо 63px (#home ширина 46px + некоторое дополнительное пространство между элементами), а ширина 43 пикселей.
  • #prev — Определяет фоновое изображение справа 47px (#home ширина 46px + 1px делитель линии)
  • #next — Расположенный справа 129px (сначало: #prev 63px + #prev ширина 43px + дополнительное место), а ширина 43 пикселей.
  • #next — Определяет фоновое изображение справа 91 пикселей (#home ширина 4 пикселей + 1 пикселей делитель линии + #prev ширина 43 пикселей + 1 пикселей делитель линии)

Спрайты изображений — эффект наведения

Теперь мы хотим добавить эффект наведения в наш список навигации.

Совет: Селектор :hover можно использовать для всех элементов, а не только для ссылок.

Новое изображение («img_navsprites_hover.gif») содержит три изображения навигации и три изображения для использования эффектов наведения:

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

Добавляем только три строки кода, чтобы добавить эффект наведения:

CSS Image Sprites

Спрайты изображений

Спрайт изображений представляет собой набор изображений, помещенных в одно изображение.

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

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

Спрайты изображений-простой пример

Вместо того, чтобы использовать три отдельных изображения, мы используем это одиночное изображение («img_navsprites.gif»):

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

В следующем примере CSS указывает, какая часть изображения «img_navsprites.gif», чтобы показать:

Пример

  • — Только определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS
  • width: 46px; height: 44px; — Определяет часть изображения, которое мы хотим использовать
  • background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)

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

Спрайты изображений-создание списка переходов

Мы хотим использовать изображение спрайта («img_navsprites.gif») для создания списка переходов.

Мы будем использовать HTML список, потому что это может быть ссылка, а также поддерживает фоновое изображение:

Пример

#navlist li <
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
>

#navlist li, #navlist a <
height: 44px;
display: block;
>


#home <
left: 0px;
width: 46px;
background: url(‘img_navsprites.gif’) 0 0;
>

#prev <
left: 63px;
width: 43px;
background: url(‘img_navsprites.gif’) -47px 0;
>

#next <
left: 129px;
width: 43px;
background: url(‘img_navsprites.gif’) -91px 0;
>

  • #navlist — положение имеет значение относительно, чтобы разрешить абсолютное позиционирование внутри него
  • #navlist li — поля и отступы имеют значение 0, list-style удаляется, и все элементы списка имеют абсолютную позицию
  • #navlist li, #navlist a — Высота всех изображений 44пкс

Теперь начните позиционировать и стиль для каждой конкретной части:

  • #home — Расположен на всем пути влево, и ширина изображения 46пкс
  • #home — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)
  • #prev — Позиционируется 63пкс вправо (#home ширину 46пкс + некоторое дополнительное пространство между элементами), а ширина 43пкс.
  • #prev — Определяет фоновое изображение, 47пкс вправо (#home ширина 46пкс + 1px разделитель линии)
  • #next — Позиционируется 129пкс вправо (начало #prev 63пкс + #prev ширина 43пкс + дополнительное пространство), а ширина 43пкс.
  • #next — Определяет фоновое изображение, 91пкс вправо (#home ширина 46пкс + 1px разделитель линии + #prev ширина 43пкс + 1px разделитель линий)

Спрайты изображений-эффект Hover

Теперь мы хотим добавить эффект Hover в наш список навигации.

Совет: Селектор :hover может использоваться для всех элементов, а не только для ссылок.

Наш новый образ («img_navsprites_hover.gif») содержит три навигационных изображения и три изображения для использования при наведении эффектов:

Поскольку это одно изображение, а не шесть отдельных файлов, не будет задержка загрузки , когда пользователь наводит курсор на изображение.

Мы добавляем только три строки кода для добавления эффекта Hover:

Спрайты

Спрайт — это одно большое изображение, в котором содержится много маленьких, как бы карта изображений. Вот живой пример (эта же картинка выведена на тёмном фоне внизу мини-браузера), который мы будем использовать в задании.

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

Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть.

В спрайты обычно объединяют иконки и различные мелкие декоративные изображения. Кстати, есть сервисы для быстрого создания спрайтов и генерации CSS-кода для них, например, SpritePad.

CSS-спрайты в веб-дизайне: принцип ручного построения и отображения с помощью стилей

CSS-спрайты в web-дизайне позволяют оптимизировать графику загружаемой страницы. Каким образом происходит оптимизация и для чего ее делать? Дело в том, что все графические элементы на неоптимизированной странице являются отдельными графическими файлами. Если таких элементов много, то браузеру придется для каждого делать отдельный запрос на подгрузку изображения. Если же все эти мелкие изображения соединить в один файл, а отображение нужных «частей» правильно настроить через CSS, то браузеру нужно будет сделать всего лишь один запрос на загрузку изображения. Это ускорит время загрузки страницы, в чем и заключается оптимизация. Вторая причина, по которой стоит использовать спрайты — это грамотная организация эффекта визуального изменения объекта при наведении на него курсора мыши. Наверняка кто-то уже сталкивался с проблемой «мигания кнопки», когда для двух состояний кнопки (обычное и при наведении) задаются два разных изображения. В самый момент подгрузки второго изображения происходит та самая досадная пауза.

Ну а теперь от слов к наглядным примерам.

Пример 1

Само изображение — спрайт. Название файла — «css-sprite-01.png»

Выводим иконки в произвольном порядке с помощью списка и стилей.

Рассмотрим этот пример подробнее. Для удобства и простоты в примере спрайт сделан размером 200×200 px. То есть каждый из 4-х частей картинки размером 100×100 px. Для начала создадим в документе список с и пунктами, нумерованными по порядку 001, 002 и т.д.:

Чтобы данный список отображал вместо пунктов нужные нам «куски» спрайта, добавим в файл .css сайта следующий код:

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

Пример 2

Создадим кнопку — спрайт, при наведении на которую будет появляться тень и меняться надпись. Оба состояния будут содержаться в одном файле, что при наведении на нее не вызовет эффекта «паузы» или «мигания».

Сам спрайт:

Рабочий вариант:

Листинг html:

Листинг css-файла:

Исполнение

Для создания спрайтов существует множество онлайн-генераторов, стоит ввести в поисковик что-то вроде «css спрайт генератор» и вы получите кучу ссылок на полезные ресурсы. Но и вручную такие спрайты делать не намного сложнее. Просто наложить на прозрачный слой наши изображения и выровнять по сетке.

Спрайты

Приём, когда один рисунок меняется на другой при наведении на него курсора мыши, называется эффект перекатывания, или rollover. Смену картинок можно сделать с помощью скриптов или стилей, но нужно помнить о некоторых моментах:

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

Чтобы избавиться от этих недочётов все изображения вставляют в одну общую картинку, которая и называется спрайтом. Вывод самого изображения происходит как фон через свойство background , а смена картинки делается за счёт сдвига фона с помощь background-position . На рис. 1 показан спрайт с несколькими картинками.


Здесь используется два набора изображений — сердечки и чекбоксы. Располагать близкие картинки можно как горизонтально, так и вертикально, это не является принципиальным. Для каждого набора в коде создаём свой собственный класс и для него указываем размеры элемента, совпадающие с размерами картинки, в данном случае это 64х64 пикселя. Затем добавляем спрайт в виде фона и при необходимости сдвигаем его через background-position (пример 1).

Пример 1. Смена картинки при наведении указателя

Результат данного примера показан на рис. 2. Куда сдвигать фон — влево или вверх, зависит от исходного расположения картинок.

Рис. 2. Смена картинки при наведении на неё курсора мыши

Сложности у этого метода начинаются, когда в спрайт требуется объединить больше четырёх картинок, да ещё и разного размера. Смена размера, замена существующих картинок и добавление новых в спрайте приводит к повальной смене и кода CSS. Так что лучше пользоваться специальными программами вроде TexturePacker, она сама объединит все рисунки в один и выдаст готовый CSS. К сожалению, эта программа платная, но для ознакомления доступна полнофункциональная пробная версия на 30 дней.

Как сделать css спрайты

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

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

Для тех, кто не в теме, то спрайт выглядит так:

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

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

А в этом посте я постараюсь показать вам внутреннюю кухню того, как используются спрайты в вебе, на примере иконок своего блога.

Итак, я создал простенький спрайт иконок в фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.

Создание css спрайта – html разметка

Теперь нужно набросать html – разметку. Ничего необычного. Ненумерованный список:

Подписывайтесь на обновления

Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте title ссылкам. И переходим к добавлению стилей!

Создание css спрайта – css разметка

Задаем стили контейнера:

. socseti <
width: 270px;
height: 150px;
margin:200px auto;
background: url(../images/bg-soc.png) no-repeat;
padding: 15px;
>

Описываем стили для текста и ненумерованного списка, который флоатим по левому краю (стандартная процедура для менюшек и подобных элементов)

. socseti ul <
overflow: hidden;
width: 246px;
margin:20px auto;
>

. socseti ul li <
float: left;
margin-left:2px;
>

. socseti ul li : last-child <
margin-right: 2px
>

Теперь начинается самое интересное. Зададим общие стили для ссылок:

. socseti ul li a <
display: block;
width: 59px;
height: 59px;
>

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим…
Зададим фоновое изображение первой ссылке.

a. tvitter <
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
>
a. tvitter : hover <
background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transition: .3s;
>

На фон ссылки я ставлю большое изображение (спрайт нарисованный в фотошопе). Но за счет того, что у ссылок заданный размер 59х59 px, то показывается лишь часть от общей картинки.

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

Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 59px, то мне необходимо подвинуть фон на -59px. А также, я хочу чтобы цвет менялся с серого на цветной. Для этого мне нужно опустить фон на 59px. Что и показано здесь:

a. tvitter <
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
>

Для того, чтобы при наведении изменялись стили класса, необходимо задать псевдокласс hover. Что я и делаю тут:

a. tvitter : hover <
background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transition: .3s;
>

А для того, чтобы картинка меняла положение — изменил координаты отображения.

Свойство transition — используется для задания скорости изменения положения. Я поставил 0,3 секунды.

Аналогичным способом необходимо задать положение для остальных элементов спрайта, двигая его на 118 рх для отображения RSS — иконки, и вернуть в 0 px для отображения иконки «ВК».

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

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

CSS-спрайты создаются с фиксированными размерами иконок.

А как быть для адаптивной вёрстки, ведь иконки должны масштабироваться через media-queries, но их размеры зашиты в спрайте (картинка спрайта имеет фиксированный размер в пикселях)?


Если для спрайта использовать background-size, то все backround-position для иконок плывут — как это побороть?

Как вариант вижу создать миксин масштабирования в sass, который в зависимости от backround-size спрайта пересчитывает backround-position и размеры для иконок. Но это как то сложно, может проще можно?

CSS спрайты — создание и сервисы генераторы

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

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

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

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

Вот парочка примеров «подобных конструкций»:

У использования CSS спрайтов есть два основных преимущества:

Во-первых, при помощи данной технологии можно загрузить на страницу сайта не пару десятков файлов, а всего лишь одну картинку. Вам может показаться, что загрузка маленьких файлов должна происходить гораздо легче и быстрее. На самом деле это не так. При увеличении числа файлов возрастает общее количество HTTP-запросов. А каждый такой запрос создает дополнительную нагрузку на сервер.

Во-вторых, размер одного спрайта в килобайтах, как правило, чуть меньше суммарного размера всех графических элементов, входящих в его состав (если бы они использовались отдельно друг от друга). Поэтому при прочих равных условиях он будет загружаться чуть быстрее.

В качестве недостатков CSS спрайта можно назвать:

  • больше сложностей при написании CSS стилей;
  • дополнительные временные затраты на создание изображения CSS спрайта из комбинации картинок;
  • необходимость изменения всего изображения при смене одной из его составляющих (например, какой-то иконки).

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

Создание CSS спрайтов

Давайте разберемся как использовать спрайты CSS. В теории тут все довольно просто.

  1. Для начала созданный спрайт с изображениями иконок или кнопок помещается в директорию с остальными картинками, используемыми в шаблоне.
  1. Затем в основном CSS файле сайта к нужным элементам (кнопки, иконки, логотипы, div блоки) прописывается атрибут background:url. В скобках указывается относительный URL-адрес нашего CSS спрайта, к примеру, background:urlimage/sprite.png«).
  1. Следуещий шаг – указание конкретного места (координат) размещения нужной нам картинки в спрайте. Это делается посредством атрибута backgroundposition (о нем детально уже рассказывали). Через двоеточие следует указать позицию нашей картинки в пикселях относительно верхнего левого угла спрайта, к примеру, backgroundposition: -47px-50px. Здесь задается смешение вправо и вниз.

Если по какой-либо стороне смещение составляет 0 пикселей, то обозначение «px» допускается опустить. Можно также указать сторону явно, если смещение происходит только по ней. К примеру, background-position: left 35px (смещение влево на 35 пикселей).

Залил на Codepen конкретный пример как сделать спрайт CSS для иконки, у которой при наведении меняется стиль оформления:

Генераторы CSS спрайтов

В принципе, создать CSS спрайт можно вручную в фотошопе (это всего лишь картинка). Но зачем «изобретать велосипед», если для реализации этой цели уже придумано большое количество готовых программных решений. В частности, существуют специальные онлайн-сервисы генераторы спрайтов CSS. Один из самых популярных из них — CSS Sprites.

На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».

После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.

После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.

Dan’s Tools CSS Sprite Generator

Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.

В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).

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

Спрайты CSS

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

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

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

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

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

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

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

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

Топ-пост этого месяца:  Формы покупки в рекламе на YouTube - что это и как настроить
Добавить комментарий