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

Я работал, делая инструментарий и движки для художников, создающих игры и визуальные эффекты более десяти лет, и я всегда недоумевал, что люди делают различия между «программным артом» и «настоящим игровым артом». Я также заметил, что люди, которые дают вам свободно пропустить плохую графику, это в основном другие программисты. Не зависимо от того, как забавна ваша игра или как удивительна технически демоверсия, ‘непрограммисты’, которым вы показываете такой нарисованный персонаж, начинают думать: «Это у него реактивный ранец или может что-то другое?». Зачастую, вы можете найти способ создать хорошую графику без необходимости рисовать ее с чистого листа. Но иногда вам нужно создать графику «на лету». Ограничения в бюджете или правила в игровом соревновании, или просто сжатые сроки для прототипа, могут потребовать от вас взять линейку и кисть в руки.

Я не умею рисовать, правда… Хочу сказать, посмотрите на это:

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

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

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

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

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

Наиболее частая ошибка, которую я вижу и которую легче всего избежать. Палитра, использующаяся по умолчанию для большинства программ компьютерного рисования, возвращает во времена DOS’а (можете ли вы обнаружить связь между цветами в этой палитре и четырехбайтовыми двоичными значениями от 00 до 15? Конечно — да. Если бы вы не смогли это увидеть, вы бы были настоящим художником.).

Я не подразумеваю под палитрой палитру из 16-ти или 256-ти цветов времен VGA. Просто имею в виду скоординированную систему для вашей игры. Если вы начнете с хорошо выбранной палитры, то ваши «каракули» будут казаться эстетически приятными и даже предварительно имеющими «графический дизайн».

Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!

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

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

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

Ресурсы:

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

Я не умею рисовать!..

Возможно, Вы просто слишком крутой человек, чтобы уметь рисовать. Возможно это все преднамеренно. Так и есть. Вместо того, чтобы делать хороший арт, выберите тему, которая требует плохой арт. Это сработало для «SketchFighter» и «Crayon Physics» , нарисованных на бумаге.

Используйте то, что вам доступно. Получили какую-нибудь ерунду у себя на столе? Вы, возможно, сделали одну из самых популярных игр всех времен «Desktop Tower Defense» .

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

Подсказка Третья: простые формы и силуэты

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

В зависимости от того, как много кофе вы уже выпили, они могут быть совершенно разной формы. Все в порядке! Это хорошо, фактически, поскольку изъяны и разнообразия создают «индивидуальность» и делают их живыми. Не используйте инструменты для создания форм в своей программе для рисования, это уничтожитель «спрайтовых душ». Делая их очертания отчётливыми, вы облегчаете игроку способность визуально различать их.

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

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

Подсказка одиннадцатая: приобретите планшет

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

Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.

В панели управления планшета увеличьте показатель чувствительности пера на более твёрдый. Это обеспечит наилучший контроль при рисовании.
Рисование с использованием чистого листа бумаги полностью изменить ощущение. Различные типы бумаги: офисная, страницы журналов, плотная бумага и тд. — помогут полностью ощутить рисование на планшете. Попробуйте.
Практикуйтесь. Знаю, что до этого я говорил, что ни один из моих советов не требует практики — я лгал. Попробуйте эти упражнения:

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

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

До того, как в CSS появился псевдокласс:hover , создание ролловера - элемента, который меняет свой вид при наведении курсора - реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии:hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.

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

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

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

Спрайт, в котором собраны все используемые иконки Спрайт со значками соцсетей и их вариациями для:hover

Преимущества CSS-спрайтов

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

Как создать спрайт из картинок

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

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

Как пользоваться спрайтами CSS

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

HTML-разметка выглядит следующим образом:

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

Переходим к CSS. Первым делом запишем общие стили для всех ссылок:

A { background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }

Следующие две строки - высота и ширина каждого элемента . Каким образом определялись эти значения? Здесь мы отталкивались от размеров значков в спрайте. Высота каждой иконки равна 98 пикселям, а ширина - 100 пикселей. Далее мы будем позиционировать фоновую картинку для каждой ссылки, подстраивая фон таким образом, чтобы значок ровно вписался в «окошко» ссылки размером 98×100 пикселей.

A.facebook { background-position: left top; }

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

A.twitter { background-position: -100px top; }

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

A.youtube { background-position: -200px top; } a.instagram { background-position: -300px top; } a.linkedin { background-position: -400px top; } a.tumblr { background-position: -500px top; } a.google { background-position: -600px top; }

Результат работы данного кода показан на скриншоте ниже:

Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y:

A:hover { background-position-y: bottom; }

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

Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition):

A { transition: all 0.2s ease-out; }

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

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

В разделе новостей мной был анонсирован перевод интерфейса генератора спрайтов – бесплатной браузерной программы, которая предназначена для создания CSS спрайтов, реализующих новую прогрессивную технологию увеличения скорости загрузки веб-страниц. В этом обзоре будут рассмотрены ещё две три программы для автоматического создания (генерации) спрайтов, которые эффективно и эффектно объединяют изображения в спрайты CSS. Описываемые программы позволяют не только легко и просто сделать css спрайты, но и создают сниппеты стилей с координатами спрайтов, что даёт возможность также легко и просто разместить css-спрайты на веб-странице.

Но сначала немного о CSS спрайтах. Их часто также называют веб-спрайтами (web-sprites), html-спрайтами (html-sprites). Первый раз с этой технологией я столкнулся, когда решил проверить скорость загрузки своих страниц. Страницы у меня небольшие, особенно ничем не перегружены и открываются достаточно быстро. И всё же хотелось проверить. Инструмент Page Speed от Google и аналогичный YSlow от Yahoo выдали мне список рекомендаций по увеличению скорости загрузки страниц. В числе этих рекомендаций было пожелание объединить изображения, размещенные на сайте, в спрайты. Так началось моё знакомство с CSS-спрайтами.

Что же это такое – css спрайты, и как их использовать? Основой метода является объединение множества картинок, размещённых на веб-странице в одну составную мозаичную картинку. Главным условием создания и использования css-спрайтов является наличие возможности использования этого множества картинок как фоновых вставок на странице. Как правило, эти картинки представляют собой различные логотипы, иконки, кнопки и другие графические элементы навигации и управления. Если эти картинки можно использовать не только как графику с тегом , но и как фоновые изображения со стилевым оформлением background-image: url (xxxxxxxx...) , то создание и использование css-спрайтов напрашивается само собой (замечу, что упомянутая возможность имеется почти всегда). Некоторые источники (как забугорные, так и отечественные) называют целевую составную картинку мастер-спрайтом, иногда спрайт-листом. Этой терминологии буду придерживаться и я. Дальнейшее использованием конкретной нужной нам картинки из мастер-спрайта на веб-странице осуществляется при помощи позиционирования средствами CSS. Вся фишка этой технологии состоит в значительном уменьшении HTTP-запросов на загрузку изображений. Вместо нескольких (порой десятков и более) запросов на загрузку туевой хучи отдельных картинок остаётся только один запрос на загрузку этой составной мозаичной картинки. Несмотря на больший размер этой картинки, время её загрузки несравненно меньше времени, потребного на множество HTTP-запросов для одиночных картинок и их загрузку. Использование css-спрайтов позволяет увеличить скорость загрузки картинок в разы, соответственно сама страница, где используются спрайты CSS, открывается в браузере намного быстрее. Дополнительной изюминкой этого метода является очень простая реализация rollover-эффекта изображений без применения скриптов (только средствами CSS), что может пригодиться для создания эффектных и стильных меню, кнопок управления и других графических элементов, используемых на веб-сайтах.

Кстати, о CSS. Использование на странице отдельных конкретных картинок, из которых состоит объединённое составное изображение, осуществляется с помощью свойства background-position . Это свойство определяет положение фоновой картинки в элементе, используемом для ее размещения, по горизонтали и вертикали. Значениями свойства могут быть ключевые слова или значения, указанные в пикселях или процентах. При использовании css спрайтов обычно применяются точные значения в пикселях. Первое значение – координата по горизонтали (х), второе – по вертикали (у). Согласно спецификации CSS это свойство применяется для блочных и заменяемых элементов. На практике спрайты часто применяются в строчных элементах , который делают блочным при помощи свойства display:block , чтобы задать ширину и высоту. Для этих элементов и задаётся свойство background c необходимыми координатами (background-position). Если сказать коротко и грубо, то это координаты (месторасположение) нужной нам маленькой картинки на большом холсте общей составной картинки-спрайта. Благодаря этому свойству и жёстко заданным высоте и ширине элемента, в котором применяется спрайт, обеспечивается визуализация нужной нам картинки в этом элементе. Акцентирую внимание на том, что свойство background-position обеспечивает доставку нужной нам картинки (в виде блочного элемента), как-бы вырезанной из мастер-спрайта, на веб-страницу. За размещение же этой самой картинки в нужном месте страницы отвечает либо традиционная HTML-разметка, либо разметка с использованием соответствующих идентификаторов, классов или простых селекторов с нужными свойствами CSS (position, float, margin и прочими) – здесь многое зависит от имеющихся у вас наработок и собственных предпочтений. Если у вас возникает вопрос почему при использовании спрайтов CSS применяется свойство background , то напоминаю, что технология css-спрайтов предполагает их размещение на страницах сайта именно как фоновых вставок. Причём нужны не только свойство background-position, но и background-image с указанием пути до мастер-спрайта и при необходимости другие свойства фона. Некоторые примеры в том числе с использованием сокращённого написания свойства background можно увидеть в нижеприведенных листингах стилей.

Пользователи, хорошо знакомые с CSS, могут заметить, что позиционирование CSS спрайтов намного тоньше и сложнее. Да, это так. Если расположение спрайта задано в точных единицах (рх), то они интерпретируются как смещения от верхнего левого угла области отступа элемента. Точка, относительно которой отсчитываются смещения, – верхний левый угол исходного изображения.

Самое доходчивое объяснение позиционирования фона в случае задания точных значений свойства background-position я нашёл в блоге , откуда взята нижеследующая картинка и описание к ней:

«При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения. Т.е. браузер будет рассчитывать заданные отступы по осям X и Y от начала координат области, в которой позиционируется объект, до начала координат этого самого изображения. »

Цель этого обзора – ответ на вопросы: как создать css-спрайт, как объединить изображения в css спрайт и знакомство с тремя программами, обеспечивающими простое и лёгкое создание спрайтов CSS (CSS Sprites), поэтому о самой технологии я больше говорить не буду. В интернете сейчас много толковых и подробных материалов на эту тему (одну ссылку я указал выше). Обзор посвящён работе с программами по созданию CSS спрайтов (генераторами спрайтов), где я лишь коротко коснусь некоторых важных (на мой взгляд) моментов при использовании спрайтов. Сразу оговорюсь – применение CSS-спрайтов не панацея и пытаться запихнуть в спрайты большие картинки шапок, заставок и графики, которая используется именно как графика , а не как фоновые картинки , не следует. Использовать спрайты рекомендуется для перманентных, часто повторяющихся на страницах изображений. Если эти изображения будут часто заменяться на другие, возникнет необходимость в создании новых спрайтов и, естественно, правке CSS и HTML.

Подопытные генераторы css спрайтов (css sprite generators) это бесплатные программы CssSpriter-1.2 , DoHTMLSprite и SpriteGenerator 0.2 . Если первая из них кое-где упоминается на русскоязычных ресурсах, то упоминаний о второй и третьей я в Рунете не видел. Почти все генераторы CSS спрайтов, как правило, являются онлайновыми ресурсами (следуя модной ныне тенденции). Причем русскоязычных из них не более двух-трех. Мне нравятся программы и онлайн-сервисы, в которых я могу разобраться, если не с ходу, то с нескольких попыток. Из генераторов спрайтов, перелопаченных мной, больше всех понравился упомянутый уже . За простоту, удобство, возможность настроек, эффективность и предсказуемость. Остальные генераторы (в основном онлайновые) не соответствовали этим критериям (может руки не совсем прямые или не оттуда растут, или голова не так повернута). Опытный пользователь (если вдруг забредет сюда) может усмехнуться – чего огород городить, если спрайты можно сделать в графическом редакторе, а координаты посчитать (ну-ну). Конечно можно, но я предпочитаю пользоваться специализированными инструментами, причём мне больше по душе все же десктопные приложения* . Все три описываемые программы тестировались под Windows XP SP3. Возможности их не так обширны, как у Instant Sprite, но весьма достойны внимания.
Примечание от 22.02.14. Все ссылки в этой статье с упоминанием программы Instant Sprite ведут к достаточно подробному анонсу первого перевода этой программы. После написания отдельной статьи об Instant Sprite я решил дать здесь ссылку и на неё. Вот она – .
Ещё одно примечание. Хочу анонсировать недавно написанную статью, которая освещает несколько иной подход к определению координат и размеров css спрайтов для их размещения на веб-страницах. Вот ссылка на эту статью:
Однако, приступим к нашему обзору…

Генератор спрайтов CssSpriter-1.2

(http://codebrewery.blogspot.ru/p/cssspriter.html)

Небольшая бесплатная программа (zip-архив 150 кб), не требующая инсталляции. Работа с программой по созданию CSS спрайтов не вызывает затруднений, интерфейс прост и понятен. Кнопки панели инструментов дублируют пункты меню и имеют всплывающие подсказки. На левой панели отображаются исходные изображения с их размерами и координатами в будущем спрайте, правая панель отображает результаты работы программы (одна вкладка это выходной css спрайт, вторая – демо-html).

Добавлять изображения для объединения в спрайт можно из системного диалога по одному или сразу множественным выбором из подготовленной папки с изображениями. Точно также можно добавить изображения и методом перетаскивания. Программа поддерживает входные изображения следующих форматов: ico, gif, png, bmp, jpg . Файлы Фотошопа psd не поддерживаются, другие форматы не пробовал – этих хватает с избытком. Не рекомендую использовать последние два формата bmp и jpg . Они не поддерживают прозрачность, что хорошо видно в списке миниатюр на левой панели и в результирующем изображении на правой панели (картинки этих форматов будут иметь в спрайте черный фон или поля, как говорят некоторые пользователи). Чтобы применить такие спрайты на веб-страницах, надо будет уменьшить глубину цвета и вновь установить прозрачность, что не всегда получается корректно. Выходной формат один – png 32бит . Для нормального отображения картинки в старых версиях Internet Explorer, желательно перевести изображение в 8-битовый формат png и снова установить прозрачность. На второй вкладке правой панели можно посмотреть HTML-разметку с вложенными стилями CSS для применения спрайтов.

Нажатием на левую кнопку панели инструментов наш проект экспортируется в HTML. В папке, указанной для сохранения результата появятся три файла:

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

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

Генератор спрайтов DoHTMLSprite

Трудно понять, кто автор этой программы, но практически все забугорные софт-архивы в качестве первоисточника приводят ссылку на http://www.downloadinn.com/dohtmlsprite.html. Это тоже файловый архив, где можно найти автора публикации – Stefan Grasutu. Щелчок по этой ссылке приводит на сайт некоего Alexandru Tertisco – http://www.teral-soft.com. Следов этой программы на сайте я не нашел, поэтому скачать программу можно по первой упомянутой ссылке.
Крошечная бесплатная программа (zip-архив 13 кб) имеет сверхаскетичный интерфейс, но дело свое туго знает. Так же не требует инсталляции.

Алгоритм работы таков:

Указываем папку с исходным файлами (папку надо создать заранее и разместить в ней нужные файлы)
Задаем папку назначения для сохранения результатов
Создаем спрайт

Попробуем сделать css спрайт из тех же картинок, которые использовались в обзоре первой программы: 2 файла gif и по одному ico, bmp, jpg, png и psd . Первая программа позволила загрузить все файлы, кроме psd , то есть загрузила 6 файлов из 7. Посмотрим, как поведёт себя DoHTMLSprite.

Программа обнаружила 5 файлов из 7 против 6, обнаруженных CssSpriter-1.2. Какие пока неизвестно.
Задаём папку вывода и нажимаем кнопку Создать спрайт . Программа бодро рапортует о создании спрайта, css-файла и демонстрационного файла HTML.

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

Рассмотрим их, начиная со спрайта. Как видим файл спрайта создан в формате png , дополнительно скажу о глубине цвета – те же самые 32 бит, как и в первой программе. Значит, все замечания о прозрачности для старых браузеров тоже актуальны.
Глядя на вертикальную картинку (а изменить её ориентацию нельзя, что, однако, не является существенным недостатком программы), отмечаем, что эта программа не поддерживает форматы ico и psd в качестве входных. Пользователи устаревших браузеров также увидят сероватый фон на спрайте, помимо чёрного фона на картинках, для которых использовались входные файлы bmp и jpg , изначально не поддерживающие прозрачность. При внимательном рассмотрении можно увидеть, что в спрайте есть промежутки (отступы, смещения) между картинками, то есть основного недостатка предыдущей программы здесь нет. Если посмотреть на координаты картинок чуть ниже (в стилевом файле), можно увидеть, что этот промежуток составляет 5px.

Как видно здесь используются не вложенные стили, а созданный внешний стилевой файл, ссылка на который и присутствует в коде.

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

Последний файл, созданный программой, это внешний стилевой файл.

Здесь можно увидеть координаты всех наших картинок в спрайте. При внимательном просмотре координат видно, что они учитывают жёстко заданные программой промежутки между изображениями в спрайте в 5px (размеры картинок 32х32px, а разница координат 37px, 37-32=5). Для демонстрационной страницы автор задал в стилях внешние поля сверху и снизу тоже 5px (могло быть задано и другое значение), используя сокращённое свойство margin . При сравнении демонстрационных HTML-страниц, созданных первой и второй программой, видно, как влияют используемые стили на расположение картинок на странице. Некоторые пользователи используют margin "ы как дополнительное средство во избежание неожиданных накладок при масштабировании страницы при просмотре. Наверное, это будет полезным при создании и оптимизации стилей для спрайта, созданного первой программой, где промежутков между изображениями в спрайте вообще не предусмотрено. Создавая и оптимизируя стили для своих спрайтов, вы сами решите какие свойства нужны вам и как их использовать.

Хочется отметить, что программа изначально генерирует компактный однострочный стиль и после нулевой координаты не ставит единицу измерения (px), ноль он и Африке ноль, хоть в пикселях, хоть в килограммах. Такой предусмотрительности нет у некоторых онлайн-сервисов по созданию CSS-спрайтов.

Выводы

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

Не пытайтесь создать только один спрайт на все случаи и запихнуть в него все картинки, используемые на ваших страницах, это в будущем усложнит корректировку HTML и CSS при необходимости
Создавайте спрайты для часто повторяющихся графических элементов типа логотипов, значков, кнопок и других элементов навигации и управления
Старайтесь создавать спрайты из картинок одного размера (лучше сделать не один спрайт из разнокалиберных изображений, а несколько спрайтов, но каждый из картинок одного размера), это поможет оптимизировать используемые стили (один пример я покажу ниже)
Не используйте для создания спрайтов картинки в форматах изначально не поддерживающих прозрачность (правильнее и лучше всего использовать входные изображения в форматах gif и png , а для первой программы и упоминавшегося Instant Sprite можно также использовать ico )
Для поддержки прозрачности выходных файлов PNG в старых браузерах конвертируйте их в 8-битовый формат или в формат GIF (существуют и css-хаки, позволяющие разрешить эту проблему для png, но это не тема сегодняшнего обзора)
Оптимизируйте стили (можно использовать онлайн-сервисы, программы , TopStyle, Rapid CSS и т.п. или править вручную)
Оптимизируйте спрайты – очень удобно и эффективно для этого использовать онлайновый сервис TinyPNG (http://tinypng.org) или программу Riot , рассмотренную в (очень её рекомендую)
Используйте спрайты для простого и элегантного способа реализации rollover-эффекта изображений на ваших страницах без использования скриптов
И в дальний путь…, флаг вам в руки…, вперёд и с песней…

P.S. Об упомянутой оптимизации стилей

Рассмотрю только один пример возможной оптимизации при использовании изображений одного и того же размера. Создадим экспериментальный спрайт из картинок одного размера с помощью DoHTMLSprite и посмотрим созданные стили.

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

Размер файла уменьшился с 1403 байт до 749 байт (почти в 2 раза), и все прекрасно работает. Если вы внимательно посмотрели на эти два скриншота, то, наверное, увидели, что я дополнительно убрал лишние пробелы и необязательные точки с запятой перед закрывающей фигурной скобкой. Для визуального сравнения я также оптимизировал стиль для уже рассмотренного первоначального спрайта. Вот, что получилось при просмотре в браузере.

Если вы сравните скриншоты, то заметите разницу. Исчезли промежутки между картинками на странице, определяемые свойством {margin: 5px 0} . Я посчитал, что они мне не нужны (спрайты будут размещаться в разных местах страницы, а не подряд, как в демо-примере). При этом промежутки на самом спрайте-изображении, созданные программой никуда не исчезли, и будут служить нам подстраховкой при возможном пользовательском масштабировании страницы при просмотре в браузере.

Наконец, последнее

Среди широко разрекламированных сервисов для создания CSS-спрайтов особенно выделяется Sprite Me . Он автоматом находит картинки, которые можно объединить в спрайты, и выдает на-гора рекомендации по реорганизации стилевых файлов и HTML-разметки. Попробуйте. Когда-то я начинал с него, и сервис помог мне вникнуть в суть применения спрайтов. Но, к сожалению, он обнаружил на моих страницах лишь 20% картинок, из которых можно создать спрайты. Поэтому я и перешёл к неоднократно упоминавшемуся , чего и вам желаю. Из множества изображений, размещённых на моих страницах, все фоновые картинки это спрайты. Кроме того кнопки управления (типа, загрузить файл, прокрутить страницу вверх, просмотреть скриншот или видеоролик) сделаны из спрайтов с применением rollover-эффекта на CSS.
Всё!

Как-то не получается закончить обзор. Только опубликовал его и через день нашёл ещё один генератор css спрайтов.

Генератор спрайтов SpriteGenerator 0.2.

(http://spritegenerator.codeplex.com/releases/view/52139)

Тоже не онлайновый, а Win-приложение. Небольшая программа, вроде с открытым исходным кодом, распространяется по некоей Microsoft Public License. Программа имеет достаточно простой и внятный интерфейс.

Укажем путь к той же папке с подопытными картинками, что и для уже рассмотренных программ. Зададим папку для вывода спрайта, затем укажем ту же папку для вывода CSS-файла.
Программа позволяет выбрать компоновку для будущего спрайта: горизонтальную, вертикальную, прямоугольную и на усмотрение программы (автоматический выбор). Забегая вперед скажу, что когда входных изображений достаточно много, программа сама устанавливает автоматическую компоновку – остальные опции деактивируются, а результирующий спрайт получается прямоугольным. Программа позволяет задать промежуток между изображениями и установить отступы. Выберем параметры, указанные на скриншоте, и нажмем кнопку Создать . Программа куда-то улетает без доклада. Посмотрим папку вывода.

Программа создала два файла: стилевой файл и спрайт в формате PNG 32бит (их имена я указал при задании папки вывода). Демо-страницу эта программа не создала. Посмотрим на спрайт.

Что сразу бросается в глаза: картинок осталось только 4 из 7. Оказывается, программа не воспринимает файлы bmp , на картинке с входным форматом jpg также виден кусочек чёрного фона, и пользователи старых браузеров также увидят сероватый фон у других картинок. Я снова не оптимизировал спрайт и не устанавливал прозрачность. Второе, что можно отметить: промежутки имеются вокруг каждой картинки – этого можно было ожидать, поскольку программа поддерживает прямоугольную компоновку. Но промежутки между картинками и внешней границей явно больше промежутков между самими картинками. Все становится ясно, когда мы взглянем на стилевой файл.

Первое, что здесь можно отметить: программа сохранила имена входных картинок, вместо задания безликих имён в выше рассмотренных программах. Второе, отступов, которые мы задавали, как я считал свойством margin , в стилевом файле нет. Оказывается, что обе опции задания промежутков в программе связаны с самой картинкой: одна (distance between images) задаёт промежутки между самими картинками, вторая (margin width) – между картинками, из которых состоит спрайт и его внешней границей. Если взглянуть на свойства background-position в стилевом файле можно увидеть, что оно учитывает оба упомянутых вида промежутков. Создадим сами демонстрационную веб-страницу, включив для наглядности разные отступы в стилевой файл (речь идет именно об отступах в стилевом файле для наглядности позиционирования картинок на странице).

Я намеренно сделал скриншот при просмотре в IE6, чтобы вы увидели непрозрачный фон у картинок. Как его избежать для старых браузеров, я уже говорил. В современных браузерах все выглядит нормально, кроме входной картинки формата jpg , который изначально не поддерживает прозрачность, здесь фон чёрного цвета.
Заинтересованным привожу скриншоты HTML- и CSS-файлов для последнего примера.

Заключение

Мой обзор не претендует на полноту и подробное освещение многих вопросов, но как пример использования css спрайтов на веб-странице и пример их создания в генераторах спрайтов его можно использовать.

Русифицировать перечисленные в обзоре программы я не стал, они достаточно просты и понятны без перевода. Буду рад, если этот обзор кому-то пригодится. (UPD – Я все таки перевёл попозже самую маленькую и простую, но не менее функциональную программу – DoHTMLSprite. Анонс её русификатора можно найти на странице новостей .)

После опубликования этого обзора я нашел в Интернете ещё несколько программ (не сервисов) для создания css спрайтов. Но все эти программы уступают программам, описанным здесь. Либо по фукциональности, либо по стабильности работы или по другим свойствам. Поэтому дополнять этот обзор я не буду. Рассмотренные в обзоре программы прекрасно справляются со своими обязанностями. Можно рекомендовать любую из них для создания css-спрайтов.

Сейчас, наверное, всё!

Спасибо за то, что вы это всё прочитали.

*) Ранее я несколько скептически относился к созданию CSS-спрайтов при помощи графических редакторов. Но связка бесплатного редактора Gimp с плагинами CSS WebSprites и Save for Web заставила изменить мое мнение. Простота, интуитивная понятность и дополнительные возможности по созданию CSS спрайтов и оптимизации как стилей, так и изображений, подвигли меня на написание ещё одной статьи по этой тематике. Если есть желание, можете ознакомиться с ней на странице .
Рекомендую также ознакомиться с несколько другим подходом к css спрайтам и определению их координат и размеров в статье .

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

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

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

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

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

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

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

Чтобы не путаться давайте сразу обозначим термины:
Спрайт - это одна картинка из файла с несколькими изображениями.
Набор спрайтов - это сам файл с несколькими изображениями.

Особенности использования спрайтов

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

На странице как правило бывают три вида картинок - jpg, png и gif. У всех этих форматов есть два режима загрузки - это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

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

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

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

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

Спрайты с иконками

В одном спрайте у меня будут иконки для:

Списка - одна иконка
Ссылок - три иконки
Формы поиска - одна иконка

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

В итоге первый пример будет выглядеть так:

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы. Как подобрать эти отступы? Можно конечно рассчитать все по пикселям, но наш случай довольно простой, поэтому здесь лучше всего подобрать эти отступы на картинке экспериментальным путем. Сначала объединяем изображения просто на глаз, потом берем самую верхнюю картинку, ставим ее на нужное место. Если картинка находится на своем месте, но при этом откуда то торчит кусок другого изображения, то значит отступ нужно увеличить.

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

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

Пункт списка
Еще один пункт списка
Пункт списка
Еще один пункт списка,
но в две строки
Пункт списка
Еще один пункт списка

Это html код списка. Теперь применим к нему наш спрайт:

Ul li{ padding:0 0 0 21px; background:url("sprites.png") 0 -94px no-repeat; }

Что мы тут сделали? Сделали отступ в каждом

от левого края в 21 пиксель, чтобы текст не заслонял картинку. Потом в качестве фоновой картинки ставим sprites.png. Высота всей картинки со спрайтами в данном случае 110 пикселей и зеленая стрелка находится в самом конце. Высота зеленой стрелки 16 пикселей, то есть стрелка начинается после 94-го пикселя от верха картинки. Это означает что фон мы должны сдвинуть на 94 пикселя вверх. В css коде это написано так «0 -94px», то есть сдвинули на 0 пикселей вправо и 94px пикселя вверх.

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

A{ padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; } a{ padding:0 0 0 20px; background:url("sprites..png") 0 -21px no-repeat; }

Что означают селекторы a? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://сайт/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку - ссылку на мой блог.

Определяем нужную ссылку по href.. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
Указываем в качестве фонового изображения картинку sprites.png
Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»

Домашнее задание

Спрайты с градиентами

Теперь посмотрим второй пример.

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

Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты - 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

Теперь напишем html код окошка:

Начинаем применять спрайты. Начнем с заголовка окна:

#window-header{ height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; }

В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

Точно так же как и заголовок поставим градиент для подвала:

#window-footer{ height:30px; background: #C0FFC0 url("gradients.png") 0 -60px repeat-x; }

Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

CSS код будет следующий:

#window-body{ position:relative; } #window-body-gradient{ position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 -30px repeat-x; } #window-body-text{ position:relative; }

Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива - 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

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

В очередной раз продублировал ссылку.

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

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

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

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