CSS спрайты. 10+ генераторов

26.03.2012

CSS спрайты

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

Удачного дня

follow us in feedly

,

Комментариев: 10

  1. Ивашка

    Отличная подборка, есть с чего выбрать, респект автору

    Ответить
    • GerinG

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

      Ответить
  2. Maxim Gol

    Сорри, за love me tender, но предыдущий коммент, по делу, куда то исчез.
    Я про CSS Sprites — генератор мертв. Пробовал в FF 21 и Хроме. Ноль реакций, все зависает (а потом просто игнорирует) на процессе загрузки иконок. Размер менее 5 кб.

    Ответить
  3. Maxim Gol

    — не работает ни под хромом, ни под firefox 21. Все виснет на стадии загрузки. Опережая вопросы — «а сколько весят файлы» — от 0,1 кб до 3,8 кб. Жаль, этот сервис мне (визуально) понравился больше других.

    Ответить
  4. Allpa

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

    А вот в качестве сервиса, который выдаст чёткое расположение/размеры отдельных иконок, — тут SpriteCow вне конкуренции.

    Ответить
  5. sweatego

    SpriteMe — самый приятный на мой взгляд, сам все делает

    Ответить
    • Виктор Милашечкин

      Я его не использую, мне больше нравится Spritefy, люблю сам полностью контролировать результат. Плюс — недавно начал вникать в SASS, поэтому присматриваюсь к CSS Sprites

      Ответить
  6. akkad

    Sprite Cow — ничего не делает. Две кнопки — ни одна не работает.
    Project Fondue — пока не испытывал.
    CSS Sprites generator — это мне понравился, но CSS не генерирует как надо, только — background-image: url();, картинки в спрайте не выделяются.
    Статья отличная, но не хватает примера на CSS как пользоваться. background-position, насколько понимаю?

    Ответить
    • Виктор Милашечкин

      SpriteCow — только под Огнелиса и Хром. У вас вроде как Опера была любимой Обновил статью. 
      Насчет примера использования — backgroung-position, он самый. Не ставил задачей рассказ о применении, пересмотрю свое решение, спасибо за идею

      Ответить