Генератор css из спрайта

Optimize your website using CSS Sprites! Generate CSS Sprites to speed up your website by reducing HTTP requests.


What is a CSS Sprite?

A CSS Sprite is a load of images lumped together into a single image file. They’re used as a technique to make your websites load faster, by decreasing the number of HTTP requests your users have to make. Each request will contain the overhead of HTTP headers (including cookies) and the connection’s latency. By using a single image file instead of many, you can dramatically decrease the time it take your pages to load.

What do I get and how do I use it?

  • An image file
  • A block of CSS code

First upload the image file and add the CSS to your stylesheet. Then replace your images with code to load the sprite. CSS classes are generated from the image filenames you upload, so for example: might become

Frequently Asked Questions

Who wrote this?

Greg, AKA RoBorg did — I’m a professional PHP programmer for Just Say Please.
You can follow me on Twitter

How do I report a bug?

How long do you store my source images and sprite for?

They’re not stored on the server.

Are images I upload private?

Is there an API?

Is this project open source

Not at the moment, but if I receive enough interest I might clean up the code and release it.

How is this website written?

The sprite generator is written in PHP, using the GD image functions. The transparent PNGs are manually generated.

Retina CSS Sprite Generator

Sprites reduce bandwidth used to request images from a server and help speed up your page load time by combining icons, logos, and other static images into a single file.

Retina and other double density pixel displays have to enlarge your images to display at the correct size. This causes the images to appear blurry.

This sprite generator creates sprites that look good on both Retina and normal screens. Using CSS, your website can easily use a normal size sprite for regular displays and a 2x large sprite for high density displays to prevent blurring.

Sprites reduce bandwidth used to request images from a server and help speed up your page load time by combining icons, logos, and other static images into a single file.

This sprite generator combines your images and generates the CSS needed to display them on your website.


Add Images

The Images panel is divided into two boxes. The first larger one is where you add and sort the images that go into the generated sprites. For most browsers, you can simply drag the images into the box. If your browser does not support dropping files, you can also click the box to open a file dialog.

The images you add should be 2x larger than the actual size of the image you want to display on your webpage. In other words, add only your Retina images and the normal size sprite will be generated automatically.

If there are already images in the box, do not drop new images onto them or click them to add new files. This action has a different function described next.

Add Pre-made Normal Images

Normal sized images are automatically generated for you. However, you can also choose to supply pre-made normal sized images per Retina image. This is useful if the built in image scaling is not satisfactory for a particular image.

To specify a normal sized image for a particular Retina image, click the Retina image and select its counterpart from the file dialog or simply drag the normal image onto the Retina image. The size of the image selected must be 50% of the Retina image size or the operation will not be allowed. To account for half pixels, the width and/or height of the image can be up to 1px smaller than 50% of the Retina image.

Читайте также: Втулка крепления генератора приора

Arrange Images

You can arrange the order of the images in your sprite by dragging the images in the large image box. This is less effective when the sprite orientation is set to ‘Packed’ and the images are of different sizes.

Remove Image

If you need to remove an image, drag it to the second smaller box beneath the main image box.

CSS Sprites Generator


What Are CSS Sprites?

CSS sprites make it possible to to join multiple images into one image. You can then use this one image to call the multiple images by using CSS X and Y background coordinates to tell the browser where the multiple specific images are located in the one bigger picture and where to place them on your page.

How Do Sprites Make My Site Faster?

One of the ways to improve site speed is reducing the number of HTTP requests your site requires to fully display your page. Using a lot of images for design or functional purposes will create a lot of these additional requests. A good way to combat this is to combine images using CSS sprites.

Which Images Should I Use Sprites For?

You should only use sitewide images. In other words, images which are used on most of your websites’ pages. Follow these steps to detect and download them:

  1. Open your website in a browser window and take a look at your source code (both HTML and CSS).
  2. Now search for the source code for all the sitewide images files (png, jpg or gif files) your website uses, usually for the design of your website.
  3. Now save these images to your hard disk.
  4. Always exclude photos used for articles or similar images which are only used once or twice on your site.

How To Make CSS Sprites?

Select the images you have saved by following the four steps outlined in the above paragraph and use the CSS Sprites Generator to combine them into one image file by clicking the «Build» button. The generator will also automatically create the CSS code you need to call the multiple images on your site.

How To Implement The CSS and HTML Code?

— Copy the code in the CSS tab and paste it to your site’s CSS script.
— Asjust the background-position: X and Y coordinates to position the image in the exact spot you want it to appear in your website your website. For example:background-position: -808px 25px;

What If I already used CSS to call images?

If you already used CSS to call your images instead of HTML tags you should replace your old CSS code used to call images with the new code found in the CSS tab:
For instance, replace background-image: url(‘image.png’) with background-image: url(‘sprite.png’) background-position: 0px -197px; width: 365px; height: 360px;


Let us take care of your website’s performance as we’ve taken care of our own:

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

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

По большей части моя работа со спрайтами сводилась к следующему:

Итак, начнем с самого начала

Читайте также: Генератор ключей для сброса памперса epson

Краткая история


Давным-давно я верстал сайты. Начальство требовало ускорить загрузку страниц и поэтому я начал объединять картинки в спрайты.

В Photoshop я резал макет на части и затем объединял их с помощью PHP скрипта. Честно, я был удивлен, что в Photoshop нельзя объединить выделенные области в один файл, но в любом случае ожидать от редактора изображений еще и автоматической генерации стилей — уже явный перебор. Я простил разработчиков за такой скудный функционал и написал php скрипт, который генерировал спрайты и файл со стилями.

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

Признаюсь, был один недостаток в таком подходе. Качество картинок, которые выдает PHP мягко говоря «не очень». Поэтому я настраивал скрипт таким образом, чтобы в стилях расширения файлов были jpg, png, gif, а картинки генерировались в BMP формат. И потом я вручную конвертировал в нужный формат с помощью Photoshop.


Спустя много лет мне опять пришлось сверстать макет с помощью спрайтов. И тут мне стало интересно. Что появилось за это время для упрощения процесса?

Photoshop опять меня не порадовал. Зато генератор спрайтов появился в Fireworks CS6. Но просмотрев несколько видео и статей, я понял, что он мне не подходит, так как не выполняет всех моих требований.

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

Каким я вижу генератор спрайтов

Если коротко, то генератор спрайтов должен:

  • Уметь разрезать исходные картинки на части
  • Уметь соединять порезанные части в спрайты
  • Одновременно генерировать стили
  • Главное — иметь удобный графический интерфейс

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

Но раз уж делать графический интерфейс, то и Photoshop особо не нужен. Выделение областей и разрезание картинки — задача тривиальная для javascript и HTML5.

Все эти четыре пункта явно хотят объединиться в один единственный редактор.

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

Как видно, в файл проекта должны сохраняться все исходные картинки и все правила разбивки, объединения картинок и генерации стилей.

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

  • Кнопочки для открывания картинок, правил или всего проекта.
  • Кнопочки для сохранения результата и проекта.
  • Настройка правил разбиения картинки на области. То есть: пользователь выделяет области, видит список областей, может их редактировать.
  • Настройка правил группировки областей в спрайт. Тут должна быть возможность указать в каком месте спрайта должна быть картинка
  • Настройка правил генерации стилей. Для каждой картинки в спрайте должны настраиваться способ генерирования стилей: генерировать или нет ширину, высоту, repeate-x, repeate-y, no-repeate, имя класса

Главное — при добавлении картинок в проект должны генерироваться некие стандартные правила, чтобы избавить пользователя от лишних действий по настройке. Например, добавили мы иконку «firefox.png». Программа должна автоматически создать область «firefox» (на всю ширину и высоту) и стиль:

И потом уже мы можем переместить область в другой спрайт или отредактировать генерацию стилей.

Обзор решений

Теперь кратко, почему мне не подошли существующие решения.

Compass — написан на Ruby. Пишутся стили с особым синтаксисом и программа потом генерирует обычные стили со спрайтами.
Lemonade — суть такая же и на сайте написано что он теперь встроен в тот же Compass.
Glue — командная строка для генерации спрайтов.

Читайте также: Реле генератора мтз 1221

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

SpriteMe — перетаскиваем ссылку в букмарклет и потом можно редактировать спрайты на просматриваемом сайте. Но мне не нужно редактировать спрайты на существующем сайте. Мне нужен редактор на этапе, когда сайт еще верстается.

Spritepad — методом drag-and-drop перетаскиваем картинки на спрайт и справа выводятся все стили. Уже ближе к тому что я хотел. Но почему только drag-and-drop? Неужели сайт лишь демонстрирует новую фичу браузеров? Мне не всегда удобно перетаскивать, я хочу добавлять картинки через обычную кнопку «Открыть». Картинки сохраняются только в PNG? Нельзя создавать одновременно несколько спрайтов? Все-таки этот генератор сильно прост.

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

Еще онлайн сервисы:

  • css-sprit.es,
  • csssprites.com,
  • spritegen.website-performance.org,
  • css.spritegen.com

В них процесс выглядит следующим образом:

  1. загрузка картинок,
  2. настройка параметров,
  3. генерация

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

Не захотел я мириться с таким положением вещей и сваял свой генератор.

Рад представить

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

На главной странице в разделе «Examples» есть несколько проектов-примеров. Надеюсь они помогут разобраться в возможностях программы.

Генератор спрайтов работает онлайн. Собран из Bootstrap, Knockoutjs и само собой Jquery.

Главное, в ходе разработки проекта было получено много опыта особенно по Knockoutjs. Этот опыт вылился в две статьи на хабре:

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

Так же существует офлайн версия под Windows. Она представляет собой оболочку на Awesomium в которую просто вставляются web-файлы. Но на самом деле мне пришлось поработать чтобы все функции заработали в этой оболочке. Так что могу поделится и этим опытом.

Что дальше

За процессом разработки можно следить на smartprogress

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

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

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

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

В любом случае опыт бесценен!
И если мне понадобится сверстать сайт спрайтами, то у меня уже будет для этого удобный инструмент!

  • Свежие записи
    • Как я ремонтировала свой автомобиль
    • Автомобильные зеркала
    • Ностальгия по «бугатти»
    • Тест драйв. OPEL MOKKA – лучший полноприводный кроссовер в своем классе
    • McFarlan — от рассвета до заката