• Free consultations 24/7
  • Иконка телефона +1 (310) 933-4443
    Поддержка: Онлайн

    Ждем вашего звонка :)

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

    Поддержка: Офлайн

    Будем онлайн через: 2h 34 min

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

CSS и Sprite Sheets: примеры, инструменты и полезные приложения.

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

Существенным плюсом использования CSS Sprite Sheets является то, что сервер может обработать только один файл, содержащий все изображения, а не множество отдельных картинок. Через CSS можно отобразить любой маленький сегмент этого файла в качестве фона для элемента. Некоторые полагают, что несколько отдельных изображений могут «обмануть» пользователя: появление разных картинок могут создать впечатление, что процесс загрузки быстрый. Однако, это ложное преимущество, так как по-настоящему высокая скорость загрузки всегда предпочтительнее. Другой недостаток этого метода в том, что, как упоминалось, каждая картинка хранится в отдельном файле. Поэтому обработка каждого изображения на сервере засчитывается как HTTP-запрос. Важно сохранить количество HTTP-запросов на вашем сайте как можно меньшим, так как браузер может сделать лишь ограниченное число запросов к любому серверу одновременно. Объединение картинок в один файл дает возможность не только значительно снизить количество HTTP-запросов, но и уменьшить общий размер файла изображения.

Есть несколько подходов к созданию спрайт-листов – до создания сайта и после. Можно поместить все ваши изображения в спрайт-лист до начала проектирования сайта и редактировать его по мере продвижения разработки. Также вы можете создать все ваши изображения в виде отдельных файлов, а как только сайт будет готов, делать спрайт-листы вручную или с помощью специальных инструментов. Такой метод рекомендован для новичков в веб-дизайне. Обратите внимание на приложения, которые помогут вам в генерации спрайт-листов. Большинство из них находится в свободном доступе.

Инструменты и приложения:

  1. Compass. Содержит прекрасный генератор стилей, использующий ваши изображения в заданной папке. Бесплатно.

Дополнительная информация:

http://enva.to/z12V70
http://compass-style.org/

 

  1. Lemonade. Прост и легок в использовании, среди инструментов присутствует Sass (вы добавляете туда строку кода и ваш спрайт-лист сформирован). Обновлений программы в ближайшее время не предвидится. Бесплатно.

Дополнительная информация:

http://www.hagenburger.net/blog_ru/Lemonade-CSS-Sprites-for-Sass-Compass.html

 

  1. SpriteMe. Фантастический генератор листов и просмотрщик в одном флаконе. Вы можете проектировать сайт с помощью отдельных изображений, а затем запустить приложение. Созданный спрай-лист можно экспортировать. Бесплатно.

Дополнительная информация:

http://spriteme.org/

 

  1. Fireworks CS6. Последняя версия Adobe Creative Suite включает в себя генератор спрай-листов. Платно.

Дополнительная информация:

http://enva.to/IURM73
http://www.adobe.com/devnet/fireworks/articles/css-sprites.html

 

Posted on 06.10.2012

Category: Разработка (html5, css и т.п.)

Article tags

Вы дизайнер?

Join Us

всего в сообществе

~150.1k дизайнеров


Related Articles

Стилизация чекбоксов (Checkboxes) и радиокнопок (Radio Buttons) средствами CSS.

Разработка (html5, css и т.п.)

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

Что под «капотом» у сайта?

Разработка (html5, css и т.п.)

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