Instantsprite.com - Онлайн сервис для создания CSS спрайтов. Онлайн спрайт


CSS спрайты. 10+ генераторов | GB: Блог о Wordpress и веб-разработке

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

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

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

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

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

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

  • нет задержек при использовании :hover
  • меньший объем скачиваемых файлов, как при обычной загрузке, так и при использовании FTP клиента.
  • гораздо меньшее количество запросов к серверу

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

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

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

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

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

Project Fondue

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

CSS Sprites generator

CSS generator

CSS Sprites Generator

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

CSS Sprites

CSS Sprites

CSS Sprites

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

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

Spritebox

Spritebox

Spritebox

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

Canvas

Canvas

Canvas

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

Stitches

Stitches

Stitches

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

Spritemapper

Spritemapper

Spritemapper

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

SpriteCow

SpriteCow

SpriteCow

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

SpriteMe

Spriteme

SpriteMe

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

Spritefy

Spritefy

Spritefy

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

SpriteMeister

SpriteMeister

SpriteMeister

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

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

Удачного дня

gering111.com

CSS спрайты - создание и использование, генераторы CSS спрайтов

CSS спрайты

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

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

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

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

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

Использование CSS спрайтов

Использование CSS спрайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Sprites

CSS Sprites - для создания спрайтов css

CSS Sprites - для создания спрайтов css

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

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

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

Dan’s Tools CSS Sprite Generator

Dan's Tools CSS Sprite Generator

Dan's Tools CSS Sprite Generator

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

CSS Sprites

Генератор CSS Sprites

Генератор CSS Sprites

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

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

design-mania.ru

Онлайн сервис создания CSS спрайтов

13

23

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

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

Онлайн сервис создания CSS спрайтов - Csssprites.com

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

Когда все необходимые изображения для "склейки" в CSS спрайт указаны и выбраны все нужные параметры, нажмите на кнопку "GENERATE".

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

Результаты работы онлайн сервиса создания CSS спрайтов - Csssprites.com

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

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

Дата создания: 22:43:56 29.08.2012 г.

Дата обновления: 20:29:45 30.08.2012 г.

Посещений темы: 8076 раз(а).

Перед публикацией все комментарии проходят обязательную модерацию!

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

usefulscript.ru

Онлайн сервис для создания CSS спрайтов.

Для чего нужны CSS спрайты? Не секрет, что во многом на скорость загрузки сайта влияет количество обращений браузера пользователя к серверу, на котором располагается сайт. Ведь сайт это не только HTML документ. Для его полноценной работы необходимо загрузить CSS файлы (таблицы стилей), JS файлы (JavaScript библиотеки) и конечно же графические элементы (фотографии, графические элементы верстки сайта и т.д.). Как известно именно графические элементы сайта составляют до 90% и более от общего размера страницы, а их общее количество на странице может доходить до нескольких десятков и более. В результате, браузеру пользователя нужно каждый раз посылать отдельный запрос, что бы скачать каждый отдельный графический элемент WEB страницы, что в свою очередь очень негативно сказывается на общей скорости загрузки сайта, в браузере пользователя. Использование спрайтов при создании сайтов позволяет избежать этой проблемы, так как почти все графические элементы WEB страницы находятся в одном графическом файле. Так же использование спрайтов при создании веб сайтов позволяет значительно снизить нагрузку на сервер, где находится сайт. Как это работает? C помощью онлайн сервиса Instantsprite.com пользователь загружает все стандартные графические элементы, используемые на сайте (иконки, графические кнопки, логотипы, элементы верстки и т.д.). В настройках сервиса можно указать отступ между элементами ( в пикселях), тип получаемого файла (png, gif), положение элементов в файле (вертикальное, горизонтальное, диагональное). Одновременно с этим сервис показывает внешний вид будущего спрайта (картинки), что несомненно очень удобно. Настройка параметров создаваемого спрайта настройка спрайтов В самом низу можно видеть генерируемый код для работы с готовым спрайтом. Он состоит их двух частей. CSS код, который необходимо вставить в таблицу стилей ващего сайта, и HTML код, который нужно вставить в то место WEB страницы, где вы хотите увидеть нужный графический элемент. CSS и HTML код для работы со спрайтом CSS и HTML код Очевидно, что применение CSS спрайтов на сайтах с большим количеством графических элементов верстки и навигации, позволяет значительно повысить скорость их работы, и снизить нагрузку на сервер. Несомненно, это положительно скажется на посетителях которые как известно закрывают страницу, если она не открывается в течении нескольких секунд. Так же "быстрые" сайты не обходят своим вниманием и поисковые роботы, давая им дополнительные бонусы в выдаче, по сравнению с их более медлительными соседями. Обзор подготовлен для сайта Soft-Arhiv.com с использованием русификатора Instant Sprite, который позволяет работать с сервисом instantsprite.com в удобном русскоязычном интерфейсе, а так же при выключенном доступе в сеть Интернет.

soft-arhiv.com

Как использовать спрайты CSS? | Impuls-Web.ru

Здравствуйте, дорогие друзья и коллеги!

Вы уже используете css спрайты на своих сайтах? Если ещё нет нет, или только начинаете то эта статья для вас. В ней вы узнаете что это такое, зачем они нужны, почему их нужно использовать и как это правильно делать.

Навигация по статье:

Как сделать интернет-магазин?

Что такое спрайты css и зачем они нужны?

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

Спрайты CSS

Используется эта картинка для задания фона для элементов на сайте при помощи CSS.

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

Допустим у нас есть 2 ссылки для которых нам нужно указать в качестве фона соответствующие социальные сети.

Вёрстка будет выглядеть так:

<a href="#"></a> <a href="#"></a>

<a href="#"></a>

<a href="#"></a>

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

.vk { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ }

.vk {

width:40px; /*ширина блока, равная ширине картинки фона*/

height:40px; /*высота блока, равная высоте картинки фона*/

background:url(images/soc-sprite.png)no-repeat;  /*путь к фоновуму изображению*/

    background-position: -6px -2px;  /*смещение фона по горизонтали и вертикали*/

}

Для задания фона мы используем большое изображение с несколькими картинками и при помощи CSS свойства background-position смещаем фон как нам нужно.

При этом сначала мы указываем смещение по горизонтали и по вертикали.

Отрицательное значение говорит о том что фон смещается вверх и влево. Если нужно сдвинуть вниз или вправо то используем положительные значения.

Для второго блока это будет выглядеть так:

.twitter { width:40px; height:40px; background:url(images/soc-sprite.png)no-repeat; background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

.twitter {

width:40px;

height:40px;

background:url(images/soc-sprite.png)no-repeat;  

           background-position: -105px -2px;  /*смещение фона по горизонтали и вертикали*/

}

По сути всё то же самое, но меняется только значения CSS свойства background-position.

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

Вёрстка будет выглядеть так:

<a href="#"></a> <a href="#"></a>

<a href="#"></a>

<a href="#"></a>

А так будет выглядеть CSS:

.soc-button { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ } .vk { background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ } .twitter { background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

.soc-button  {

width:40px; /*ширина блока, равная ширине картинки фона*/

height:40px; /*высота блока, равная высоте картинки фона*/

background:url(images/soc-sprite.png)no-repeat;  /*путь к фоновуму изображению*/

}

.vk {

    background-position: -6px -2px;  /*смещение фона по горизонтали и вертикали*/

}

 

.twitter {

background-position: -105px -2px;  /*смещение фона по горизонтали и вертикали*/

}

Видите разницу?

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

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

Преимущества :

Недостатки:

  • Нужно потратить определённое время на создание такого объединённого фонового изображения.
  • Сложнее задавать фон так как нужно вычислять значения для смещения.
  • Для того чтобы добавить, удалить или изменить одно изображение приходится править весь спрайт.

Использование CSS спрайтов для создания эффектов при наведении

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

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

Как здесь:

Наведи на меня!

Для решения этой проблемы делаем следующее:

  1. 1.Подготавливаем спрайт с двумя картинками Картинка слайлика
  2. 2.Задаем верхнее изображение в качестве фона

    .smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile.png)no-repeat; /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }

    .smile {

    width:75px; /*ширина блока*/

    height:75px; /*высота блока*/

    background:url(images/smile.png)no-repeat;  /*задаём фоновую картинку*/

    background-position: 0px 0px; /*начальная позиция блока*/

    }

  3. 3.Задаём смещение фона при наведении

    .smile:hover { background-position: 0px -80px; }

    .smile:hover {

    background-position: 0px -80px;

    }

    Получится вот так:

    Наведи на меня!
  4. 4.Для интереса можно ещё задать CSS свойство:

    transition: all 0.5s ease;

    transition: all 0.5s ease;

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

В итоге получится так:

Наведи на меня!

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

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

Удобный генератор спрайтов CSS

Одним из таких сервисов является генератор спрайтов www.toptal.com

Для генерации спрайта нам нужно:

  1. 1.Переходим по ссылке и нажимаем на кнопку «CHOOSE FILE» Генератор спарайтов
  2. 2.Загружаем с компьютера заранее подготовленные изображения, которые нужно объединить в спрайт и наживаем кнопку «Открыть». Загружаем изображение

    Можно выбирать сразу несколько зажав кнопку CTRL на клавиатуре.

  3. 3.Получаем готовый спрайт и фрагменты CSS кода, с указанием параметров смещения для каждого изображения! Скачиваем его себе на компьютер, нажав на кнопку «DOWNLOAD» Скачать спрайт
  4. 4.Далее загружаем полученный спрайт CSS на свой сайт. Это можно сделать через файловый менеджер на вашем хостинге или использовать FTP клиент FileZilla, для которого я недавно писала статью с инструкцией. Вот ссылка: «Как пользоваться FTP-клиентом FileZilla?»
  5. 5.Теперь для блоков, в которых вам нужно задать фоновое изображение, из спрайта используем указанные CSS свойства Установка спрайтов

    Класс вы можете использовать тот же что и здесь или задать свой.

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

    Для этого существуют специальные кнопки:

    Управление спрайтами

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

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

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

Как научиться продвигать сайты?

Надеюсь моя статья помогла вам разобраться в теме спрайтов CSS! Оставляйте свои комментарии и делитесь статьёй в соцсетях. Вдруг мы с вами не одни такие сумасшедшие и тема CSS спрайтов будет интересна ещё кому то :)

Успехов вам! До скорой встречи в других моих статьях!

С уважением Юлия Гусарь

impuls-web.ru

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

14

41

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

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

Предположим, что у Вас есть следующий CSS спрайт, который содержит четыре изображения:

CSS спрайт

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

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

Работа с CSS спрайтами в онлайн сервисе Spritecow.com

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

Дата создания: 21:01:32 30.08.2012 г.

Дата обновления: 18:10:26 01.09.2012 г.

Посещений темы: 7644 раз(а).

Перед публикацией все комментарии проходят обязательную модерацию!

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

usefulscript.ru

CSS спрайты, создание и применение css спрайтов, генераторы css спрайтов, ускорение загрузки сайта

CSS спрайты и программы (генераторы) для создания css-спрайтов

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

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

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

Кстати, о CSS. Использование на странице отдельных конкретных картинок, из которых состоит объединённое составное изображение, осуществляется с помощью свойства background-position. Это свойство определяет положение фоновой картинки в элементе, используемом для ее размещения, по горизонтали и вертикали. Значениями свойства могут быть ключевые слова или значения, указанные в пикселях или процентах. При использовании css спрайтов обычно применяются точные значения в пикселях. Первое значение – координата по горизонтали (х), второе – по вертикали (у). Согласно спецификации CSS это свойство применяется для блочных и заменяемых элементов. На практике спрайты часто применяются в строчных элементах <span>, который делают блочным при помощи свойства 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 я нашёл в блоге KtoNaNovenkogo.ru, откуда взята нижеследующая картинка и описание к ней:

Определение координат

«При задании позиционирования изображения фона с использованием абсолютных единиц в 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 спрайтов, как правило, являются онлайновыми ресурсами (следуя модной ныне тенденции). Причем русскоязычных из них не более двух-трех. Мне нравятся программы и онлайн-сервисы, в которых я могу разобраться, если не с ходу, то с нескольких попыток. Из генераторов спрайтов, перелопаченных мной, больше всех понравился упомянутый уже Instant Sprite. За простоту, удобство, возможность настроек, эффективность и предсказуемость. Остальные генераторы (в основном онлайновые) не соответствовали этим критериям (может руки не совсем прямые или не оттуда растут, или голова не так повернута). Опытный пользователь (если вдруг забредет сюда) может усмехнуться – чего огород городить, если спрайты можно сделать в графическом редакторе, а координаты посчитать (ну-ну). Конечно можно, но я предпочитаю пользоваться специализированными инструментами, причём мне больше по душе все же десктопные приложения*. Все три описываемые программы тестировались под Windows XP SP3. Возможности их не так обширны, как у Instant Sprite, но весьма достойны внимания.Примечание от 22.02.14. Все ссылки в этой статье с упоминанием программы Instant Sprite ведут к достаточно подробному анонсу первого перевода этой программы. После написания отдельной статьи об Instant Sprite я решил дать здесь ссылку и на неё. Вот она – статья о генераторе css спрайтов Instant Sprite.Ещё одно примечание. Хочу анонсировать недавно написанную статью, которая освещает несколько иной подход к определению координат и размеров css спрайтов для их размещения на веб-страницах. Вот ссылка на эту статью: Калькулятор координат CSS спрайтов Sprite Cow.Однако, приступим к нашему обзору…

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

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

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

 Превью css спрайта

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

 Превью разметки веб-страницы

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

Скриншот выходных файлов CssSpriter-1.2
  • Файл css-sprite-coordinates.jpg – это изображение, которое схематически показывает координаты наших картинок в мастер-спрайте. Качество этого изображения оставляет желать лучшего, но и нужно то оно только в справочных целях. Скриншот координат css спрайта
  • Файл index.html – это тестовая страница для просмотра нашего спрайта с такой вот разметкой: Скриншот кода демо-страницы

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

    На скриншоте, расположенном ниже, показано отображение кусочка тестовой страницы в браузере. Я не делал оптимизацию изображения для обеспечения прозрачности, поэтому исходные картинки в форматах bmp и jpg в результирующем изображении имеют чёрный фон. На этом фрагменте веб-страницы наглядно показано, как можно расположить (спозиционировать) отдельные картинки спрайта, используя свойства position, float и margin (см. скриншот стиля выше). Ниже будет приведен ещё один вариант расположения картинок.

    Скриншот фрагмента веб-страницы
  • И, наконец, файл sprites.png – это наш спрайт (мастер-спрайт, спрайт-лист – называйте как хотите). Скриншот css спрайта

    Если вы просматриваете эту страницу в IE6, то вы увидите помимо чёрного фона у двух картинок также сероватый фон у других картинок вместо белого (точнее – прозрачного), которого нет в нормальных браузерах. Это напоминание о переводе результирующего файла png в 8-битовый формат с заново устанавливаемой прозрачностью. Для наглядности картинка здесь ограничена рамкой в 1px.

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

Скриншот горизонтального расположения спрайта

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

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

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

Скриншот программы DoHTMLSprite

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

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

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

Скриншот выбора папок

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

Скриншот сообщения DoHTMLSprite

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

Скриншот выходных файлов DoHTMLSpriteСкриншот css спрайта

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

Пойдем дальше. На нижерасположенном скриншоте приведен HTML-код демо-страницы

Скриншот кода HTML

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

Скриншот фрагмента веб-страницы

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

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

Скриншот css-файла

Здесь можно увидеть координаты всех наших картинок в спрайте. При внимательном просмотре координат видно, что они учитывают жёстко заданные программой промежутки между изображениями в спрайте в 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, но это не тема сегодняшнего обзора)
  • Оптимизируйте стили (можно использовать онлайн-сервисы, программы Free CSS Toolbox, TopStyle, Rapid CSS и т.п. или править вручную)
  • Оптимизируйте спрайты – очень удобно и эффективно для этого использовать онлайновый сервис TinyPNG (http://tinypng.org) или программу Riot, рассмотренную в следующем обзоре (очень её рекомендую)
  • Используйте спрайты для простого и элегантного способа реализации rollover-эффекта изображений на ваших страницах без использования скриптов
  • И в дальний путь…, флаг вам в руки…, вперёд и с песней…

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

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

Скриншот файла до оптимизации

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

Скриншот файла после оптимизации

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

Скриншот веб-страницы до и после оптимизации

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

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

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

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

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

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

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

Скриншот интерфейса SpriteGenerator 0.2

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

Скриншот выходных файлов SpriteGenerator 0.2

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

Скриншот спрайта

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

Скриншот css-файла

Первое, что здесь можно отметить: программа сохранила имена входных картинок, вместо задания безликих имён в выше рассмотренных программах. Второе, отступов, которые мы задавали, как я считал свойством 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 спрайты в Gimp. Рекомендую также ознакомиться с несколько другим подходом к css спрайтам и определению их координат и размеров в статье «Калькулятор координат css спрайтов Sprite Cow».

a-v-i.ru