Создаем CSS спрайты. Примеры. CSS-спрайты

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

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

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

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

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

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

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

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

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

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

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

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

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

Megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

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

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

Smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

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

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

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

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

Перевод статьи «How to use CSS sprites » был подготовлен дружной командой проекта .

Существует множество методов по оптимизации веб-страниц. Какие-то из них работают, какие-то уже нет. Тем не менее есть некоторые методы, обязательные для исполнения на любом сайте и блоге. Об одном из них я и хотел с вами поговорить.

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

Немного истории

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

И понеслось…

Объединяем изображения в спрайт

И так, как мы ранее выяснили, спрайт – это несколько изображений, скомпонованных в одно целое на прозрачном фоне, доступ к которым осуществляется при помощи CSS свойства background-position . Но пожалуйста, не перепутайте его с коллажем. Спрайт ≠ коллаж.

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

Допустим, мы располагаем PSD файлом вот с такой распрекрасной кнопкой в 3х состояниях.

Что делает среднестатистический блоггер-верстальщик-самоучка? Он вырезает кнопку в каждом состоянии и сохраняет ее в отдельных файлах. То есть, одна кнопка занимает у этого славного человека 3 картинки. А если вы напряжетесь, то вспомните, что каждая картинка на сайте, это дополнительный HTTP запрос, который нагружает сервер и ваш блог работает все медленнее и медленнее и медленнее и медленнее и медленнее и медленнее и медленнее…

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

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

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

Верстка спрайтов

Верстка CSS спрайтов ничем не отличается от верстки обычных картинок, за исключением одного НО. Вам нужно знать не только точный размер того изображения, которое вы хотите отобразить, но и его координаты. К примеру, весь спрайт у нас занимает 330 px в ширину и 150 px в высоту.

Но нам нужно отобразить только кнопку, которая занимает 227 px в ширину и 41 px в высоту, точно указав ее координаты. Если вы не располагаете хорошим html редактором - могу .

Создаем файл index.html и прописываем в него необходимые строки кода, доктайп и все такое.

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

После тега body создаем контейнер div с классом button – это и будет наша кнопка.

На этом наш html заканчивается и теперь необходимо прописать для кнопки CSS стили.

Код ниже показывает, что сначала мы объявляем класс button . Затем при помощи свойств height и width задаем размеры нашей кнопки. Свойство background позволяет выбрать файл, который мы будем использовать в качестве спрайта, а background-position задать координаты, требующейся нам картинки в этом спрайте. Все просто.

Давайте подробнее разберемся со свойством background-position .

Как можно заметить из кода выше, оно имеет два значения. Первое значение позволяет задать координаты изображения по оси X, а второе, следовательно, по оси Y.По оси X наша кнопка никуда не скачет, так-как все состояния находятся друг под другом. Следовательно, для того, чтобы при наведении появилась второе состояние кнопки, нам нужно изменить значение, отвечающее за ось Y.

Как известно, а если нет то уже да, каждая кнопка имеет несколько состояний.

1. Normal – нормальное или обычное состояние
2. Hover – состояние кнопки при наведении курсора
3. Active – состояние кнопки во врем нажатия

Этими свойствами мы и воспользовались.

Если лень вручную делать спрайты и вообще заморачиваться с фотошопом, вам поможет замечательный бесплатный сервис: spritepad.wearekiss.com . Просто закидываете в рабочую область необходимые картинки и он составит для вас спрайт.

В заключении

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

Спрайт (компьютерная графика)

Спрайты в двухмерной графике

Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения . На некоторых машинах (MSX 1, NES) программная прорисовка приводила к определённым ограничениям , а аппаратные спрайты этого ограничения не имели. Впоследствии с увеличением мощности центрального процессора , от аппаратных спрайтов отказались, и понятие «спрайт» распространилось на всех двумерных персонажей. В частности, в видеоиграх Super Mario и Heroes of Might and Magic вся графика спрайтовая.

К аппаратно ускоренным спрайтам вернулись в середине 1990-х годов - когда развитие мультимедиа и взрывное повышение разрешения и глубины цвета потребовало специализированный процессор в видеоплате. Именно тогда, как обёртка над аппаратным 2D-ускорителем, вышел DirectDraw . DirectX 8 ввёл общий API для двух- и трёхмерной графики, и в современных спрайтовых играх двухмерные спрайты выводятся точно так же, как и трёхмерные - как текстурированный прямоугольник.

CSS-спрайты

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

CSS-спрайты экономят трафик и ускоряют загрузку - браузеру потребуется запрашивать меньше файлов.

Спрайты в трёхмерной графике

Движки первого поколения

В первых трёхмерных играх, например, Wolfenstein 3D () и Doom (), персонажи представлялись в виде двумерных рисунков, изменяющих размер в зависимости от расстояния.

На 3D-акселераторах

На 3D-акселераторах применяется такая техника: объект рисуется в виде плоскости с наложенной на неё текстурой с прозрачными областями. Эта технология применяется в трёх случаях.

Оптимизация

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

• Объекты, присутствующие в сцене в большом количестве и которые, будучи трёхмерными, имели бы большое количество граней и очень сильно влияли бы на производительность - например, публика (рис. 1), трава и т. д.
• Удалённые объекты, которые вблизи рисуются полигональными моделями.

Спецэффекты

Для большей правдоподобности изображения используется большое количество сравнительно маленьких спрайтов (так называемая система частиц).

Живая съёмка

Изредка спрайты применяются для добавления в игру живого фото или видео . Например:

• Живые актёры, например в realMyst (рис. 4).
• Рычаги управления в симуляторах самолётов, поездов и т. д., сфотографированные в реальной кабине.

Стоит заметить, что в некоторых спрайтовых играх, таких, как Rise of the Triad , спрайты фотографировались с актёров, а не с моделей, игрушек или рисунков.

Появление шейдеров частично снимает потребность в живой съёмке - многие нюансы фотоизображения уже можно передать полигональными моделями в реальном времени.

Разрушение иллюзии

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

Терминология

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

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

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

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

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

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

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

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

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

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

Вот как это выглядит на странице:

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

Чтобы вырезать значок RSS мы должны написать следующие отступы

background-position : -90px -40px ;

В примере мы подняли изображение на 40 пикселей вверх и на 90 влево.

Плюсы использования спрайтов

• Сокращение количества обращений к серверу
• Если используются динамическое изменение картинки (например, при наведении в элементе меню), то картинка уже будет находится в кэше и поэтому не будет запаздывания на загрузку в нужный момент
• Если фон объединяемых изображений схож, это еще и уменьшить суммарный "вес" изображений

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

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

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

Представьте одну, большую картинку, на которой изображены все ваши иконки, разделители, кнопочки, стрелочки и прочие составляющие дизайна. Она грузится вместе с сайтом, все как обычно. Вот только не создает кучу запросов на все файлы, а исполняется одним запросом. Круто? Несомненно. После загрузки в нужном месте отображается нужная часть большой картинки.

Я где-то видел статистику (не вспомню, где, поэтому ссылочку не дам) — от 5 до 40% времени составляет собственно страницы, все остальное — обработка запросов сервером. Логично предположить, если уменьшится количество запросов — скорость загрузки вырастет пропорционально.

Давайте чуть подробнее рассмотрим плюсы и минусы использования спрайтов:

Плюсы использования спрайтов:

Минусы это технологии:

• при верстке необходимо указывать не только картинку, но и позицию фрагмента, что не совсем удобно и привычно.
• увеличение нагрузки на сервер. Большая картинка занимает больше оперативной памяти, учитывая «пустышки» между фрагментами.
• для изменения одной иконки придется ковырять весь файл, что не слишком удобно. Хотя, может оно и к лучшему

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

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

Где создать спрайты?

Наверное, самый старый инструмент для создания CSS спрайтов. Отличительная черта — есть русский вариант интерфейса, это удобно. Хорошо настраивается, причем не только создание картинки, но и код CSS. В целом — отличный генератор, рекомендую. Кстати, кроме этого, сервис умеет генерировать фавиконы и рассчитывать права доступа для Unix систем.

CSS Sprites Generator

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

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

Sass - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

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

Неплохой генератор, присутствует все, что нужно для создания. Единственный минус — каждую картинку придется загружать отдельно, нельзя загрузить кучей. В остальном — ничего примечательного, крепкий середнячок.

Сервис написан на HTML5, работает только в Chrome и Firefox, но развитие таких сервисов радует. Веб не стоит на месте и это хорошо Очень простой, минимум настроек. Но, если вы хотите быстрое и простое решение — этот генератор подойдет на 100%

Генератор спрайтов для настоящих джедаев Установите программу, укажите путь к CSS файлу со старой версткой и этот сервис все сделает за вас. У него куча возможностей — рекомендую почитать документацию на официальном сайте.

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

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

Очень простой, но понятный и удобный генератор. Перетащите картинки, который нужно объединить, расположите их как вам хочется и нажмите кнопку — спрайт и код готовы. Минус этого сервиса — работает только в Хроме и Огнелисе.

Сервис очень похож на описанный выше SpriteMe, с тем отличием, что тут нужно загружать руками все картинки и CSS файл, который необходимо менять. Минимум настроек, но работу свою он делает хорошо.

Надеюсь, теперь вам не страшна работа с CSS спрайтами и ваши проекты будут еще быстрее.