CSS-спрайты: что это такое, почему они классные и как их использовать

1. Что такое CSS-спрайты?
2. Зачем использовать CSS Sprites?
3. Как вы используете CSS Sprites?
4. Генерация спрайтов с Grunt / Gulp / Node
5. Генерация спрайтов с компасом
6. Генерация спрайтов с помощью ImageMagick
7. Использование Sprite Cow с вашими спрайтами
8. Генерация спрайтов с помощью Spritepad
9. Генерация спрайтов с помощью SpriteMe
10. Должны ли мои спрайты быть горизонтальными или вертикальными?
11. альтернативы
12. URI данных
13. Иконочные шрифты
14. SVGs
15. Использование <img> и object-position

Эта статья была пересмотрена и переписана несколько раз с момента ее самой первой публикации в 2007 году, чтобы поддерживать актуальность информации. Последняя редакция была сделана Flip Stewart в январе 2015 года.

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

Спойлер: они не феи, которые пишут для вас ваши таблицы стилей. Хотелось бы. Вкратце: CSS Sprites - это средство объединения нескольких изображений в один файл изображения для использования на веб-сайте для повышения производительности.

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

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

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

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

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

Давайте посмотрим на некоторые цифры на реальном примере:

Размер файла изображения Размеры canada.png 1,95 КБ 256 x 128 usa.png 3,74 КБ 256 x 135 mexico.png 8,69 КБ 256 x 147

Это в сумме составляет 14,38 КБ для загрузки трех изображений. Размещение трех изображений в одном файле весит 16,1 КБ. Спрайт заканчивается на 1.72KB больше, чем три отдельных изображения. Это не большая разница, но должна быть веская причина, чтобы принять этот больший файл ... и это так!

Хотя общий размер изображения (иногда) увеличивается со спрайтами, несколько изображений загружаются с помощью одного HTTP-запроса . Браузеры ограничивают количество одновременных запросов, которые может сделать сайт, а HTTP-запросы требуют немного рукопожатия ,

Таким образом, спрайты важны для те же причины что минимизация и объединение CSS и JavaScript важны.

Как вы используете CSS Sprites?

Вот пример спрайта, с тремя флагами разных стран, объединенными в одно изображение:

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

.flags-canada, .flags-mexico, .flags-usa {background-image: url ('../ images / flags.png'); повторение фона: без повтора; } .flags-canada {height: 128px; background-position: -5px -5px; } .flags-usa {height: 135px; background-position: -5px -143px; } .flags-mexico {высота: 147 пикселей; background-position: -5px -288px; }

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

Генерация спрайтов с Grunt / Gulp / Node

Если вы используете Grunt, Gulp или Node в целом, CSS-спрайты (сейчас называется sprity ) - замечательный пакет узлов, который создает спрайты из глобуса изображений. Sprity имеет много замечательных функций, включая форматирование вывода в формате PNG, JPG (или URI данных из них) и создание таблиц стилей в CSS, LESS, Sass и Stylus.

Чтобы скомпилировать спрайты через командную строку, установите css-sprite глобально с помощью:

$ npm установить sprity -g

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

$ sprity ./output-directory/ ./input-directory/*.png

Для получения дополнительной информации об использовании css-sprite с Grunt или Gulp (или многими другими средами), обратитесь к репозиторий проекта на GitHub ,

Генерация спрайтов с компасом

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

Начните с создания каталога в вашем каталоге `images` (да, он должен находиться внутри вашего каталога` images` для работы) с именем, которое соответствует спрайтам, которые вы хотите создать. Убедитесь, что изображения, которые вы конвертируете в спрайты, являются PNG и поместите их в новый каталог. Я создаю спрайты для флагов, поэтому я назвал флаги своего каталога и поместил в него три PNG.

В новом файле SCSS, который я назвал `flags.scss` (имя здесь не важно), следующие три строки по порядку будут импортировать инструменты создания спрайтов Compass, глобально импортировать PNG для преобразования в спрайты ( обратите внимание, что путь здесь не включает images /), а затем сгенерируйте CSS для спрайтов. Помните, что среднее слово оператора @include должно соответствовать каталогу в строке перед ним .

@import "компас / утилиты / спрайты"; @import "flags / *. png"; @include all-flags-sprites;

Это довольно простой процесс генерации спрайтов, но у него есть несколько недостатков / странностей:

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

Генерация спрайтов с помощью ImageMagick

ImageMagick может использоваться для создания таблицы спрайтов из командной строки с помощью следующих команд:

convert * .png -append sprites.png # добавьте вертикально конвертируйте * .png + добавьте sprites.png # добавьте горизонтально

Это возьмет все файлы PNG, выбранные глобусом, и объединит их в один файл, но не создаст соответствующую таблицу стилей. Если вы используете ImageMagick для создания своих спрайтов, вы можете прочитать раздел ниже об использовании Sprite Cow.

Использование Sprite Cow с вашими спрайтами

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

Генерация спрайтов с помощью Spritepad

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

Генерация спрайтов с помощью SpriteMe

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

Должны ли мои спрайты быть горизонтальными или вертикальными?

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

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

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

Хотя другой возможный способ обойти это используя псевдоэлемент ,

альтернативы

Есть несколько альтернатив CSS-спрайтам, но, как и следовало ожидать, у каждого из них есть свои преимущества и недостатки.

URI данных

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

Иконочные шрифты

Шрифты Icont похожи на спрайты тем, что достигают одного и того же: объединение нескольких изображений в один запрос.

SVGs

Изображения SVG также могут быть объединены в спрайт и использованы как система значков , Это немного другой подход, использующий синтаксис и сильные стороны SVG. Возможно, вам придется подумать о резервной системе, поскольку SVG не имеет такой глубокой поддержки браузера, как CSS background-image (которая по существу не имеет проблем с поддержкой браузера вообще).

Grunticon а также Iconizr Возможности для работы со SVG-спрайтами, которые помогают с запасными вариантами.

Использование <img> и object-position

Робин Рендл имеет отличный пост по этой умной технике Вот ,

Примеры

Дальнейшее чтение