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

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

Итак, под спрайтами в CSS принято называть одно изображение, которое состоит из нескольких "частей", которые показываются как бы по отдельности в зависимости от действий пользователя..

Что слишком много слов.. покажу пример..

Это спрайт который присутствует на каждой странице данного сайта:

Просто в "спокойном" состоянии Вам показывается одна его часть, а при наведении курсора другая.

Как это сделать? На самом деле все достаточно просто.

В данном примере для блока с фиксированными размерами мы в качестве фона загружаем "двойное" изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую "часть" фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.

Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:

Открываем значит фотошоп и рисуем в нём примерно такой рисунок:

Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет "скакать". Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..

Итак, у нас получилась "двойная" картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.

Он у меня получился таким.. смотрим результат и читаем комментарии в коде:

Такое вот меню получилось:

Думаю, многие читатели задаются вопросом: "А зачем вообще нужны эти спрайты если тоже самое можно сделать с помощью двух отдельных картинок, где одна фон для просто ссылки, а вторая для ссылки с :hover , при этом, не сражаясь с фотошопом и не высчитывая координаты фона для CSS??"

Во-первых: Скорость загрузки изображений увеличивается в разы!! Несмотря на то что "двойная" картинка весит столько же, сколько и две отдельно взятых маленьких "одинарных", загрузка одной большой картинки происходит быстрее, так как браузером не создаются дополнительные HTTP запросы серверу.

Помните, когда я Вам показывал свой логотип-спрайт, говорил что слукавил? Так вот моё лукавство заключается в том, что данная картинка содержит в себе не две логических части изображения, а восемнадцать!!

И полностью она выглядит так:

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

Так вот HTTP запросы.. если бы изображений вместо одного было 18ть то диалог браузера с сервером выглядел бы примерно так:

Браузер : Здравствуй Сервер! я тут от тебя же, по моему запросу, получаю HTML и CSS документы, так вот в них указано, что у тебя в папке "графика".. должна лежать картинка с названием: "картинка1" скинь а?
Сервер : Привет Браузер, давненько не виделись, сейчас посмотрю.. ага есть у меня такая картинка! Лови!!
Браузер : Спасибо, поймал! Но мне еще нужна "картинка2" в той же папке..
Сервер : Да и такая есть.. отправляю..
Браузер : Загрузил.. но тут еще "картинка3" указана.
Сервер : И не спится же тебе! Держи свою картинку!!
Браузер : Спасибо! Да мне уже саму если честно надоело, но мой пользователь хочет догрузить страницу полностью.. короче у тебя там еще "картинка4" должна быть..
Сервер : Ты меня начинаешь напрягать! На свою картинку!!
Браузер : Извини, но я же не виноват, что здесь столько изображений!!! Нужна "картинка5"!
Сервер : У меня от тебя уже процессор кипит!! Заколебал!! Забирай свою картинку!!
... ... ...

Дальнейший диалог озвучивать не буду, ибо дальше идет нецензурная брань..

К чему вся эта болтовня между сервером и браузером (клиентом) на которую уходит уйма времени и трафика, к тому же нагружает сервер при большом количестве посетителей сайта, если гораздо быстрее и экономичнее сделать один HTTP запрос и получить все 18 картинок в одном пакете!!

Во-вторых: Загрузка второго изображения при использовании псевдокласса :hover происходит лишь только в тот момент когда пользователь навел курсор на ссылку с первым изображением. Если это небольшое изображение типа кнопки из примера выше, то ничего особо страшного не произойдёт - вторая картинка быстро подгрузится и пользователь ничего не заметит.. а если это большая картинка по весу и размеру?? Тогда пользователь будет наблюдать, как она загружается, хотя он психологически был готов к быстрой смене изображений! Еще один плюс спрайтам! … хотя, если честно, одновременно это и минус.. минус в том случае если пользователь в течении сессии так и не навел курсор.. картинка загрузилась, но так ему и не пригодилась.. но поверьте эта "жертва трафика" оправдывает себя практически всегда!

Ну и в-третьих: Как бы Вам это не показалось странным, но это удобно!! Удобно в коде указывать путь к одному и тому же изображению, удобно его править в фотошопе, к примеру, сделать весь сайт поярче или потемнее работая с одним единственном рисунком, удобно хранить, удобно загружать на сервер, да даже в CSS работать с большим спрайтом удобно! - хотя для этого и нужны определённые навыки и привычка..

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

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

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

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

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

В мультипликации и компьютерных играх технология спрайтов позволяет накладывать персонажи и управлять их действиями на фоне готовой сцены.

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

В этом вся суть CSS спрайтов.

Зачем нужно использовать CSS спрайты

Ну, конечно же, для ускорения скорости загрузки сайта. В качестве примера будем рассматривать мой блог. Если посмотреть внимательно, то на моём блоге много элементов дизайна, которые представлены отдельными файлами (изображениями).

Элементы дизайна, которые можно заменить спрайтом

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

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

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

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

Здесь же вы сможете увидеть и рекомендации по созданию спрайтов. А точнее рекомендация генератора CSS спрайтов SpriteMe . С помощью данного генератора можно легко создать нужные спрайты. Но мне он не помог, и поэтому пришлось делать всё самостоятельно.

Как создать CSS спрайты

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

После того, как сервис GTmetrix подсказал вам или вы сами определились какие файлы необходимо объединить в спрайты, — следует приступить к созданию спрайта (заготовки).

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

Сохраняем изображения в отдельной папке

Вот из этих отдельных изображений мы и будем создавать спрайт.

Создаём новое изображение с прозрачным фоном. Размер выбирайте так чтобы уместить все изображения. Ну, к примеру, если у вас все изображения 32х32 и 16х16 пикселей и есть одно 380х150, — вот и делайте своё изображение, так чтобы уместить все эти изображения в одном.

И обязательно сделайте прозрачный фон.

Но даже если Вы ошиблись с размером это всегда можно подправить через пункт меню «Изображение» — «Размер изображения» .

Теперь поочерёдно выставляйте все изображения, которые вы приготовили ранее.

Пункт меню «Файл» > «Открыть изображение» . Откроется изображение, выделите его CTRL+Aи скопируйте в буфер обмена CTRL+C. Перейдите к заготовке и вставьте изображение CTRL+V. И так со всеми изображениями.

Должно получиться нечто подобное.

Теперь следует обрезать всё лишнее. Для этого используйте инструмент «Обрезка» .

Когда заготовка готова, сохраняем её в PNG формате и половина дела готова. Пункт меню «Файл» > «Сохранить» . Не забудьте про формат.

Теперь изображение нужно загрузить на хостинг в папку с изображениями темы:

http://vashdomen/wp-content/themes/vahatema/images/

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

Загрузку файла на хостинг можно сделать через файловый менеджер хостинга, в моём случае это . Или через . Это уже на ваше усмотрение.

А вот теперь начинается самое сложное, нужно заменить изображения шаблона – спрайтом. В качестве примера, возьмём на моём блоге заголовки блоков в сайтбаре и исследуем код элемента. Для этого нужно нажать правую кнопку мыши на нужном элементе и в контекстно-зависимом меню выбрать пункт «Посмотреть код элемента» (для Chrome) или «Исследовать элемент» (для Firefox). Примерно так и для других браузеров.

Исследование элемента в шаблоне

Здесь Вы можете видеть HTML код и CSS стили. То есть вы видите файл, отвечающий за вывод стилей и номер строки где искать класс, отвечающий за данный фрагмент. Из скриншота понятно, что класс sidebar и именно заголовок h2 , расположен в файле style.css на 339 стоке . Вот именно здесь и нужно вводить все необходимые изменения стилей.

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

Прежде чем приступить к данному шагу, настоятельно рекомендую сделать резервную копию файла style.css.

Теперь ваша задача открыть файл style.css и внести нужные изменения. Вы можете сделать это при помощи Notepad++ (очень удобный редактор, и отображает номер строки) или через редактор в административной панели WordPress.

Итак, открываем административную панель WP– «Внешний вид» > «Редактор» > «style.css» . Так как здесь нет нумерации строк, следует искать нужное место при помощи поиска CTRL+F и вводите искомый CSS класс (в моём случае — sidebar h2).

Внесение изменений в код style.css

Нужно всего лишь изменить название файла изображения и ввести параметры положения относительно оси координат. Если у Вас не так как у меня на скриншоте, то вы должны понимать, что за вывод изображения (фона) отвечает параметр: background: url(‘images/spriteme.png’);

А за позицию изображения отвечает параметр: background-position: -0px -0px; с отрицательными значениями. Первое число это смещение по оси Х, второе – смещение по оси Y.

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

На этом создание CSS спрайтов для сайта закончено. Следуйте инструкциям и у вас всё получится.

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

А вот и обещанный видеоурок:

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

На этом у меня сегодня всё. Друзья, всем желаю удачи!

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

Один из основных методов оптимизации страниц сайта. Поэтому сегодня мы поговорим о том, как объединить в 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 спрайты - очень важный этап на пути ускорения работы сайта. Отнеситесь к нему с должным уважением и старайтесь использовать повсеместно.

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

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

Чтобы стало понятнее, давайте решим эту задачу. У нас имеется изображение, допустим, высотой 20 пикселей и шириной 100 пикселей. Кнопка имеет ширину 50 пикселей и высоту 20 пикселей. В одной картинке мы помещаем изображения обоих состояний (друг за другом). HTML-код будет таким:

Кнопка

И CSS-код :

A {
background: url("button.jpg") no-repeat left top; // Фон кнопки
display: block; // Сделать блочным элементом
height: 20px; // Высота кнопки
width: 50px; // Ширина кнопки
text-decoration: none; // Убрать черту подчёркивания
}
a:hover {
background-position: right top; // Меняем позицию фона, чтобы было смещение изображения
}

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

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

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

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

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

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

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

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

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

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

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

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

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

background-position : -90px -40px ;

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

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

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

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