Генератор спрайтов css: Генератор Css спрайтов

CSS спрайты для увеличения скорости загрузки сайта

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

Буквально на днях я вновь вернулся к этой теме и, наконец-то, добился желаемого результата. Начну с рассказа о том, что такое CSS спрайты, каково их предназначение и самое главное — как самостоятельно создать спрайт.

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

Что такое CSS спрайты, их польза и предназначение на сайте

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

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

CSS Sprite — это способ уменьшить количество изображений путём объединения нескольких изображений в одно. Затем используетcя CSS-свойство позиционирования background-position для отображения только той части изображения, которая вам нужна.

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

Для ручного объединения элементов в один файл потребуется графический редактор и немного времени. Затем необходимо определить относительные координаты каждого элемента в спрайте и написать свойства позиционирования для файла стилей. Я предлагаю облегчить задачу благодаря онлайн инструменту.

CSS Sprites Generator и тонкости, которые нужно знать

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

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

• применяя свойство repeat-x располагайте элементы спрайта по вертикали или размещайте одно повторяющееся фоновое изображение крайним правым в случае горизонтального спрайта;
• применяя свойство repeat-y располагайте элементы спрайта по горизонтали или размещайте одно повторяющееся фоновое изображение крайним нижним в случае вертикального спрайта.

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

Порядок создания CSS спрайта с помощью генератора

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

Переходим на страницу онлайн генератора спрайтов CSS Sprites Generator и загружаем заранее подготовленные файлы нажатием конки Choose files или простым перетаскиванием на страницу методом Drag & Drop.

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

Настройки состоят из двух параметров:

• Padding between elements (px) — отступ между элементами в пикселях,
• Align elements — выравнивание элементов.

Используйте отступы между элементами, чтобы при масштабировании страницы элементы не «наезжали» друг на друга. Ниже разберёмся с вариантами выравнивания элементов.

Binary Tree — бинарное дерево — наиболее эффективный по размеру алгоритм размещения элементов:

Diagonal — диагональ — каждый элемент может иметь неограниченное горизонтальное или вертикальное фоновое заполнение без пересечения с другими элементами спрайта:

Diagonal (Alternative) — диагональ (альтернатива) — то же самое, что диагональ, но используется диагональ в другом направлении:

Top-down — сверху вниз — элементы расположены вертикально поочерёдно сверху вниз:

Left-right — слева направо — элементы расположены горизонтально поочерёдно слева направо:

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

После выбора и загрузки файлов на странице CSS Sprites Generator вы увидите готовые стили, которые необходимо скопировать и добавить в файл style.css. На основе примера я получил следующий код:

.bg-RSS {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -10px -10px;
}
 
.bg-Twitter {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -115px -10px;
}
 
.bg-Mail {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -220px -10px;
}

Дело остаётся за малым — нажатием кнопки Download скачать готовый файл спрайта с именем css_sprites.png и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.

В конечном итоге результатом работы онлайн генератора стало такое изображение, в котором собраны воедино все три иконки:

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

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

Представьте ситуацию, в которой необходимо заменить одно изображение на другое — придётся менять стили всех элементов, так как изменятся координаты. Избежать подобных проблем позволит создание нескольких спрайтов, объединяющих группы элементов (иконки меню, иконки навигации и т.д.). А вы используете спрайты?

краткое описание, основные техники и полезные рекомендации

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

Полезные свойства спрайтов

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

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

В обычном процессе разработки сайта необходимо делать много картинок. Очень часто эти картинки занимают очень мало места, но представляют собой всегда отдельный файл. Для любой операционной системы любого сервера открытие файла — это операция, отнимающая много времени, однако не будет существенно отличаться по времени, когда открывается файл на 13 на 13 пикселей, и когда открывается файл из 16 картинок 52 на 52 пикселя. В первом случае необходимо иметь 16 файлов и 16 операций открытия/чтения, во втором случае 16 картинок будут получены в результате открытия только одного файла.

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

Обратная сторона медали

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

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

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

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

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

Автоматизация и CSS-спрайты

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

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

Тематическая выгода от использования спрайтов

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

Например, законченный вариант меню: просто подключив несколько css-правил, js-функций и включив в код несколько HTML-дивов, можно получить результат. Изменив содержание картинки спрайта, можно изменить вид этого меню. Уточнив тело функции, можно скорректировать функционал.

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

Игрушки — золотое дно для спрайтов

Азарт и программирование — несовместимые понятия, но квалификация программиста, пишущего игры, заметно отличается от общебытовой (простое кодирование) и творческой (проектирование и разработка новых технологий, идей).

Дизайн игр апеллирует к векторной графике, потому сочетание SVG-спрайты + CSS-правила не только востребовано, но и часто превращается из объекта разработчика (сайта) в объект реальной игры. В частности, популярная игра Counter Strike применяет к терминам спрайты, спреи вполне осмысленные синонимы: взрыв, кровь, прицел…

Фраза «установить спрайты css v34» для посвященного вполне нормальна и понятна. Спрайты обрели не только полезность в применении по своему существу, но и образовали нишу, которая стала вполне полнофункциональной, доступной и понятной определенному кругу потребителей.

CSS-спрайты: пример

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

Очевидные недостатки спрайтов

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

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

Стандарт и следующие ему разработчики утверждают, что коль спрайты связаны с правилом background, то это исключительно фоновое изображение, а не элемент сайта. Графическая составляющая элементов страницы должна манипулировать тегами img.

С этим трудно согласиться на том простом основании, что background мало когда воспринимался в качестве общего фона. Это просто фон, неважно чего — миниатюрного элемента или всей страницы в целом.

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

Разумное использование

Несмотря на то что термины «интернет-технологии» и «высокие технологии» принято считать синонимами, на деле это трудоемкий и местами очень нетехнологичный труд. Спрайты не особенно выделаются на фоне других узких мест как в чистом программировании на JavaScript или PHP, так и в части разработки необходимого функционала, настройки процессов наполнения сайтов информацией или, например, фонового создания архивных копий.

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

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

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

Категория: Сайтостроение, Опубликовано: 2018-02-19

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

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

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

• Что такое спрайты css и зачем они нужны?
• Зачем использовать CSS спрайты?
• Использование CSS спрайтов для создания эффектов при наведении
• Удобный генератор спрайтов CSS

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

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

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

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

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

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

<a href=»#»></a> <a href=»#»></a>

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

.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; /*смещение фона по горизонтали и вертикали*/ }

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

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

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

<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; /*смещение фона по горизонтали и вертикали*/ }

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

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

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

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

Недостатки:

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

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

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

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

Как здесь:

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

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

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

   1 2 3 4 5 6

   .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 спрайтов будет интересна ещё кому то 🙂

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

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

CSS спрайты (sprites) — что это и как их сделать?

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

Как создать CSS спрайты

Вручную создавать CSS спрайты достаточно трудоемко. Но есть различные сервисы, автоматизируют эту работу. Ниже описывается один из таких сервисов — www.spriteme.org.

Перейдите на сайт и перетащите с его страницы ссылку с надписью «Sprites me» в закладки своего браузера — таким образом в браузере сохраняется javascript код, который будет анализировать ваш сайт. Просто хватаете левой кнопкой мыши надпись «Sprites me» и тащите ее в панель закладок браузера:

Далее переходим на сайт, для которого нужно создать CSS спрайт и кликаем в панели закладок по только что созданной закладке сервиса «Sprites me». В правом верхнем углу откроется окно «Sprites me», в котором можно создать CSS спрайт для вашего сайта, а затем скачать .

Посмотрите внимательно на изображение выше: в области «Suggested Sprites» (Предлагаемые спрайты) предлагается создать три спрайта из фоновых изображений темы оформления WordPress. В первый спрайт будет включено девять изображений, а в остальные по два. В самом низу окна генератора css спрайта в области «Non-Sprited Images» приведены фоновые изображения, которые не представляется возможности объединить в спрайты.

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

Итак, чтобы создать css спрайт кликните по кнопке «make sprite», которая находится в правом верхнем углу каждой области предлагаемых CSS спрайтов.

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

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

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

С этим не должно возникнуть проблем: генератор спрайтов предоставляет инструкцию, в которой написано что в вашем файле CSS нужно изменить. Для получения этой инструкции кликните по кнопке «export CSS» в правом верхнем углу окна «Sprites me».

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

Обратите внимание, что в приведенной инструкции путь (URL) до изображений CSS спрайтов нужно поменять на свой.

Если в CSS правиле уже окажется прописанным свойство «background-position», то замените значения в этом свойстве на те, которые предлагает сервис по созданию спрайтов. После внесения всех предписанных изменений в файл CSS стилей обновите открытую в браузере страницу вашего ресурса, удерживая при это нажатой клавишу Shift на клавиатуре (в этом случае статические объекты на вебстранице будут заново запрошены с web сервера вашего ресурса).

Если никаких изменений и перекосов в дизайне вашего сайта после применения CSS спрайтов (sprites) вы не заметите, то можно вас поздравить с удачным повышением скорости загрузки через CSS спрайты (sprites). Если перекосы после применения CSS спрайта все же появились, то попробуйте определить их причину, и при невозможности устранения возникшей проблемы просто создайте данный спрайт заново, но уже исключив из него те изображения, которые не корректно отображались (перетащите их мышью в область «Non-Sprited Images»).

Полезные ссылки для создания CSS спрайтов:

• Создание CSS спрайтов в онлайн генераторе Sprites Me — оригинал этой статьи
• www.spriteme.org — онлайн сервис для создания css спрайта
• wearekiss.com/spritepad — еще один drag-and-drop сервис для создания спрайтов

Понравилось? =) Поделись с друзьями:

Опубликовано в рубрике SEO

« Joomla: оптимизация быстродействия

Exchange 2003: SMTP: Non-Delivered Report (NDR) Generated »

Оптимизация изображений: сжатие png, jpg, gif; генераторы css-спрайтов

Рассмотрим инструменты для оптимизации и сжатия изображений PNG, JPG, GIF и генераторы css-спрайтов. Предыдущие меры по увеличению скорости загрузки сайта: сокращение кода, сжатие gzip, включение кэша для браузеров принесли плоды, что показала проверка в PageSpeed. Оптимизация изображений принесла ещё один бал в общую копилочку:

Не исправленными остались только внешние ресурсы. Итак, программа FileOptimizer 6.50.302, кроме оптимизации изображений без потери качества, позволит сжать файлы html, css и др. форматов. Это бесплатная программа, с чрезвычайно простым и понятным интерфейсом. Она используется для пакетного сжатия изображений, и показала отличные результаты.

Для её использования требуется знать всего две кнопки: открыть файлы (1) и начать оптимизацию (2). Причём добавлять файлы можно не по одному, а сразу много, выделив их в окошке открытия, есть поддержка перетаскивания. Кнопка (3) ведёт к настройкам: можно задать, например, степень сжатия css-файла.

Программа заменяет оригинальные файлы на оптимизированные, а оригиналы отправляет в Корзину — позаботьтесь о копиях, если нужно. Многие подобные инструменты, которые должны производить сжатие без потери качества, на практике таковыми не оказываются. Убедился в этом, апробировав несколько аналогичных программ, но к FileOptimizer это никак не относится.

Я вообще сделал копию локального сайта и использовал её в качестве полигона. Вначале оптимизировал 10 изображений PNG и получил средний показатель сжатия 33%. Затем тщательно сравнил в браузере страницы с оптимизированной графикой и оригинальные. Результатами остался вполне доволен: визуального отличия не заметил вовсе.

Далее действовал смелее, и выяснилось, что маленькие по размеру PNG сжимаются ещё больше. Для эксперимента оптимизировал несколько JPG и получил результат 8%, а для GIF — 45%, правда, последние были все крохотными. После этого, оптимизацию оставшихся изображений выполнил за один раз. Результирующий итог для всей графики сайта: в оригинале было 4.71 Мб — стало 3.27 Мб, сжатие составило 31% — весьма впечатляющие цифры.

Удобно в программе ещё и то, что для каждой позиции выводится процент предполагаемого сжатия, а результирующая разница для всего пакета — внизу, слева от индикатора процесса. Скачать FileOptimizer 6.50.302 можно по ссылке — если она, со временем, будет битая, то воспользовавшись поиском, найти программу не составит труда.

Я сознательно не рассматриваю инструменты с командной строкой, выбрав только те, у которых современный интерфейс. Приведу, на всякий случай, онлайн сервисы для оптимизации изображений с высокими показателями сжатия: TinyPNG.org и PunyPNG.com, но у них лимиты на количество и размер картинок, если пользоваться бесплатно. Перейдём ко второму этапу оптимизации графики — генерации css-спрайтов.

1. Первым будет генератор css-спрайтов SpriteMe.org — очень мощная и удобная онлайн штука. Генератор автоматически определяет фоновые изображения, которые стоит объединить в css-спрайты. Отмеченную на скриншоте ссылку нужно перетащить на панель закладок браузера, а затем задействовать на вкладке с нужным сайтом:

Работоспособность генератора опробовал в двух браузерах. В IE 8 нет поддержки перетаскивания: в этом случае, просто скопируйте ссылку (клик правой кнопкой мыши — «Копировать ярлык») и вставьте в папку «Панель избранного» (через меню «Избранное»). С Chrome всё гораздо проще, — должно работать и в других «нормальных» браузерах, — как сказано в справке сервиса.

Перейдём к рабочей панели инструмента. Под указателем (1) на следующем скриншоте находятся два окошка: генератор предложил сделать два спрайта — далее об этом подробно. Нижнее окно (2) содержит список фоновых изображений, которые не могут быть объединены в спрайт. При наведении курсора мыши на любую строчку, видим окошко визуализации (3):

Чтобы сделать спрайт нужно нажать ярлычок (4): в окне останется одна строчка — объединённое изображение, которое можно будет посмотреть в окне визуализации. А скачать готовый спрайт можно через ярлычок (5): само изображение и txt-файл с кодом css. Если в списке окошек (1) присутствуют лишние img — перетащите их в окно (2). Это могут быть img внешних ресурсов: счётчиков посещаемости, кнопок соцсетей.

Гипотетически все фоновые картинки могут быть объединены в один единственный css-спрайт, на практике их, как правило, будет больше. Тут играет роль значение свойства background-repeat для конкретных элементов. Если все значения no-repeat, т.е. фоновые картинки не повторяются по горизонтали и вертикали, например: иконки, то их собрать в один спрайт проще.

Исходной точкой координат для background-position служит левый верхний угол. Если спрайт (вертикальный) состоит из иконок 16 на 16 px, то код css будет следующим, при условии, что между иконками нет промежутков, тогда нужно учитывать и их:

элемент1{background:url(../images/sprites.png) 0 0 no-repeat}
элемент2{background:url(../images/sprites.png) 0 -16px no-repeat}
элемент3{background:url(../images/sprites.png) 0 -32px no-repeat}
...

Вам необходимо будет изменить первоначальный css-код, скорее всего, это будет касаться только имя файла и координат. Если фоновые изображения имеют значения repeat-x, repeat-y или repeat, то количество спрайтов увеличится — у меня их получилось два. Для оперативной оптимизации сервис SpriteMe подходит как нельзя лучше.

Исходные файлы для css-спрайта были в формате PNG и GIF, а объединённое изображение — в PNG. Если по каким-нибудь причинам вам не удалось решить эту задачу, то коротенько представлю ещё пару генераторов. Выбрал я их из десятка похожих за более-менее простой интерфейс и отсутствие заморочек. Хотя они англоязычные, но разобраться с их инструментарием несложно.

2. Spritepad (wearekiss.com/spritepad) — автоматики здесь нет, кроме генерации самого спрайта. Добавлять изображения надо вручную, есть поддержка перетаскивания. Сетка поможет разместить img, а координаты в коде меняются в реальном времени, не пугайтесь длинных дробей — их потом нужно округлить до целых чисел:

3. Stitches (draeton. github.io/stitches/) — пользоваться этим генератором ещё проще. «Open» — открыть, можно сразу много файлов, или перетащить. «Clear» — очистка рабочего поля генератора. «Settings» — настройки во вкладке справа, там же можно будет загрузить готовый спрайт и код, если нажать «Downloads».

Объединённые изображения, полученные спрайты, тоже желательно оптимизировать (сжать).

Поделиться с друзьями:

О партнёрках

получить

Сайт с нуля

получить

Примеры спрайтов. Что такое CSS-спрайты? Спрайты с иконками

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак, рассмотрим основные примеры CSS спрайтов:

У нас есть перечень иконок в одном файле. Задача: вывести некоторые картинки в рандомной последовательности.

Картинка (css-sprite-01.png ) ниже — спрайт.

После применения списка стилей иконки остаются выведенными в произвольном порядке.

Давайте более детально разберемся с этим примером. Разрешение первоначальной изображения-спрайта: 200 * 200 px . Главная картинка разделена на 4 куска, каждый из которых имеет разрешение 100*100 px . Нам необходимо создать в документе список с идентификатором css-sprite-ul . Пункты списка пронумеруем как 001, 002, 003 и т.д.

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

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

Пример 2. Изображение меняется при наведении.

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

Как выглядит спрайт:

html-код:

Спрайты — это довольно интересная и простая технология. Сейчас я расскажу о ней немного подробнее.

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

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

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

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

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

Терминология

Чтобы не путаться давайте сразу обозначим термины:
Спрайт — это одна картинка из файла с несколькими изображениями.
Набор спрайтов — это сам файл с несколькими изображениями.

Особенности использования спрайтов

Когда стоит использовать спрайты? Ответ в общем то один — спрайты нужно использовать если у вас на странице много мелких изображений. Неважно какие это изображения. Если у вас много градиентов с одинаковым расположением, много кнопок, много иконок и.д. Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

На странице как правило бывают три вида картинок — jpg, png и gif. У всех этих форматов есть два режима загрузки — это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

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

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

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

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

Спрайты с иконками

В одном спрайте у меня будут иконки для:

1. Списка — одна иконка
2. Ссылок — три иконки
3. Формы поиска — одна иконка

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

В итоге первый пример будет выглядеть так:

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы. Как подобрать эти отступы? Можно конечно рассчитать все по пикселям, но наш случай довольно простой, поэтому здесь лучше всего подобрать эти отступы на картинке экспериментальным путем. Сначала объединяем изображения просто на глаз, потом берем самую верхнюю картинку, ставим ее на нужное место. Если картинка находится на своем месте, но при этом откуда то торчит кусок другого изображения, то значит отступ нужно увеличить.

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

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

• Пункт списка
• Еще один пункт списка
• Пункт списка
• Еще один пункт списка,
  но в две строки
• Пункт списка
• Еще один пункт списка

Это html код списка. Теперь применим к нему наш спрайт:

Ul li{ padding:0 0 0 21px; background:url(«sprites.png») 0 -94px no-repeat; }

Что мы тут сделали? Сделали отступ в каждом

от левого края в 21 пиксель, чтобы текст не заслонял картинку. Потом в качестве фоновой картинки ставим sprites.png. Высота всей картинки со спрайтами в данном случае 110 пикселей и зеленая стрелка находится в самом конце. Высота зеленой стрелки 16 пикселей, то есть стрелка начинается после 94-го пикселя от верха картинки. Это означает что фон мы должны сдвинуть на 94 пикселя вверх. В css коде это написано так «0 -94px», то есть сдвинули на 0 пикселей вправо и 94px пикселя вверх.

Закончим со списком. Теперь сделаем примерно так же ссылки:

A{ padding:0 0 0 20px; background:url(«sprites.png») 0 -42px no-repeat; } a{ padding:0 0 0 20px; background:url(«sprites..png») 0 -21px no-repeat; }

Что означают селекторы a? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://сайт/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку — ссылку на мой блог.

1. Определяем нужную ссылку по href.. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
2. Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
3. Указываем в качестве фонового изображения картинку sprites.png
4. Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»

Домашнее задание

Спрайты с градиентами

Теперь посмотрим второй пример.

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

Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты — 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

Теперь напишем html код окошка:

Начинаем применять спрайты. Начнем с заголовка окна:

#window-header{ height:30px; background:#C0C0FF url(«gradients.png») 0 0 repeat-x; }

В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

Точно так же как и заголовок поставим градиент для подвала:

#window-footer{ height:30px; background: #C0FFC0 url(«gradients.png») 0 -60px repeat-x; }

Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

CSS код будет следующий:

#window-body{ position:relative; } #window-body-gradient{ position:absolute; left:0; top:0; width:100%; height:30px; background:url(«gradients.png») 0 -30px repeat-x; } #window-body-text{ position:relative; }

Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива — 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

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

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

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

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

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

Для тех, кто не в теме, то спрайт выглядит так:

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

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

А в этом посте я постараюсь показать вам внутреннюю кухню того, как используются спрайты в вебе, на примере иконок своего блога.

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

Создание css спрайта – html разметка

Теперь нужно набросать html – разметку. Ничего необычного. Ненумерованный список:

Подписывайтесь на обновления

Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте title ссылкам. И переходим к добавлению стилей!

Создание css спрайта – css разметка

Задаем стили контейнера:

Socseti {
width: 270px;
height: 150px;
margin:200px auto;
background: url(../images/bg-soc.png) no-repeat;
padding: 15px;
}

Описываем стили для текста и ненумерованного списка, который флоатим по левому краю (стандартная процедура для менюшек и подобных элементов)

Socseti ul {
overflow: hidden;
width: 246px;
margin:20px auto;
}

Socseti ul li {
float: left;
margin-left:2px;
}

Socseti ul li: last-child{
margin-right: 2px
}

Теперь начинается самое интересное. Зададим общие стили для ссылок:

Socseti ul li a {
display: block;
width: 59px;
height: 59px;
}

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим…
Зададим фоновое изображение первой ссылке.

a. tvitter {

transition: .3s;
}
a. tvitter: hover{

transition: .3s;
}

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

Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 59px, то мне необходимо подвинуть фон на -59px. А также, я хочу чтобы цвет менялся с серого на цветной. Для этого мне нужно опустить фон на 59px. Что и показано здесь:

a. tvitter {
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
}

Для того, чтобы при наведении изменялись стили класса, необходимо задать псевдокласс hover. Что я и делаю тут:

a. tvitter: hover{
background: url(../images/css-sprite-iconok2. png) -59px 0 no-repeat;
transition: .3s;
}

А для того, чтобы картинка меняла положение — изменил координаты отображения.

Свойство transition — используется для задания скорости изменения положения. Я поставил 0,3 секунды.

Аналогичным способом необходимо задать положение для остальных элементов спрайта, двигая его на 118 рх для отображения RSS — иконки, и вернуть в 0 px для отображения иконки «ВК».

Надеюсь статья была вам полезна, и теперь вы будете использовать css спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.

Слово спрайт (англ. sprite — фея, призрак) впервые было использовано мультипликаторами Диснея в несколько ином качестве, мультипликаторы для более быстрого и удобного создания и «оживления» мульт героев сначала рисовали все фазы их движения на прозрачных плёнках, а затем накладывали эти плёнки на основной фон — сцену, и получали кадры мультика, тем самым экономя время, деньги и нервы художников. . эти самые плёнки они и называли спрайтами.

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

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

Что слишком много слов.. покажу пример..

Это спрайт который присутствует на каждой странице данного сайта:

Просто в «спокойном» состоянии Вам показывается одна его часть, а при наведении курсора другая.

Как это сделать? На самом деле все достаточно просто.

В данном примере для блока с фиксированными размерами мы в качестве фона загружаем «двойное» изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую «часть» фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.

Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:

Открываем значит фотошоп и рисуем в нём примерно такой рисунок:

Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет «скакать». Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..

Итак, у нас получилась «двойная» картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.

Он у меня получился таким.. смотрим результат и читаем комментарии в коде:


CSS спрайты



---


Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4

Думаю, многие читатели задаются вопросом: «А зачем вообще нужны эти спрайты если тоже самое можно сделать с помощью двух отдельных картинок, где одна фон для просто ссылки, а вторая для ссылки с :hover , при этом, не сражаясь с фотошопом и не высчитывая координаты фона для CSS??»

Во-первых: Скорость загрузки изображений увеличивается в разы!! Несмотря на то что «двойная» картинка весит столько же, сколько и две отдельно взятых маленьких «одинарных», загрузка одной большой картинки происходит быстрее, так как браузером не создаются дополнительные HTTP запросы серверу.

Помните, когда я Вам показывал свой логотип-спрайт, говорил что слукавил? Так вот моё лукавство заключается в том, что данная картинка содержит в себе не две логических части изображения, а восемнадцать!!

И полностью она выглядит так:

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

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

Браузер : Здравствуй Сервер! я тут от тебя же, по моему запросу, получаю HTML и CSS документы, так вот в них указано, что у тебя в папке «графика».. должна лежать картинка с названием: «картинка1» скинь а?
Сервер : Привет Браузер, давненько не виделись, сейчас посмотрю.. ага есть у меня такая картинка! Лови!!
Браузер : Спасибо, поймал! Но мне еще нужна «картинка2» в той же папке. .
Сервер : Да и такая есть.. отправляю..
Браузер : Загрузил.. но тут еще «картинка3» указана.
Сервер : И не спится же тебе! Держи свою картинку!!
Браузер : Спасибо! Да мне уже саму если честно надоело, но мой пользователь хочет догрузить страницу полностью.. короче у тебя там еще «картинка4» должна быть..
Сервер : Ты меня начинаешь напрягать! На свою картинку!!
Браузер : Извини, но я же не виноват, что здесь столько изображений!!! Нужна «картинка5»!
Сервер : У меня от тебя уже процессор кипит!! Заколебал!! Забирай свою картинку!!
… … …

Дальнейший диалог озвучивать не буду, ибо дальше идет нецензурная брань..

К чему вся эта болтовня между сервером и браузером (клиентом) на которую уходит уйма времени и трафика, к тому же нагружает сервер при большом количестве посетителей сайта, если гораздо быстрее и экономичнее сделать один HTTP запрос и получить все 18 картинок в одном пакете!!

Во-вторых: Загрузка второго изображения при использовании псевдокласса :hover происходит лишь только в тот момент когда пользователь навел курсор на ссылку с первым изображением. Если это небольшое изображение типа кнопки из примера выше, то ничего особо страшного не произойдёт — вторая картинка быстро подгрузится и пользователь ничего не заметит.. а если это большая картинка по весу и размеру?? Тогда пользователь будет наблюдать, как она загружается, хотя он психологически был готов к быстрой смене изображений! Еще один плюс спрайтам! … хотя, если честно, одновременно это и минус.. минус в том случае если пользователь в течении сессии так и не навел курсор.. картинка загрузилась, но так ему и не пригодилась.. но поверьте эта «жертва трафика» оправдывает себя практически всегда!

Ну и в-третьих: Как бы Вам это не показалось странным, но это удобно!! Удобно в коде указывать путь к одному и тому же изображению, удобно его править в фотошопе, к примеру, сделать весь сайт поярче или потемнее работая с одним единственном рисунком, удобно хранить, удобно загружать на сервер, да даже в CSS работать с большим спрайтом удобно! — хотя для этого и нужны определённые навыки и привычка. .

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

Как комбинировать изображения с помощью спрайтов CSS в WordPress

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

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

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

Что означает объединение изображений с помощью спрайтов CSS?

Без спрайтов CSS каждое изображение на вашем сайте WordPress представляет собой отдельный файл. Когда кто-то посещает ваш веб-сайт, браузер этого человека отправляет HTTP-запрос на загрузку каждого отдельного файла изображения, что вы можете увидеть, если посмотрите на диаграмму каскадного анализа в инструменте тестирования оптимизации производительности, таком как Pingdom.

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

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

Чтобы исправить это, вы можете объединить свои изображения в как можно меньше изображений, используя спрайты CSS.

По сути, это означает, что вы объединяете все свои отдельные изображения в один файл изображения. Затем вы используете CSS для управления этим единственным изображением, чтобы оно отображало только конкретное изображение, которое вы хотите в каждом месте. Таким образом, вы по-прежнему можете отображать пять отдельных изображений на своей странице — просто все они взяты из одного файла изображения.

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

Когда следует комбинировать изображения с помощью спрайтов CSS в WordPress?

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

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

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

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

Некоторые примеры использования спрайтов CSS:

• Декоративные значки на главной странице ( если вы еще не используете шрифт значков )
• Логотипы/изображения ваших клиентов или людей, оставивших вам отзывы
• Значки социальных сетей

Обычно это изображения, которые вы показываете на сайте или на основных статических страницах.

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

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

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

Как спрайты CSS работают на высоком уровне

Вот базовый двухэтапный процесс объединения изображений с помощью спрайтов CSS:

1. Используйте инструмент генератора спрайтов CSS, чтобы объединить несколько изображений в один файл изображения.
2. Используйте CSS и HTML, которые предоставляет инструмент генератора спрайтов, чтобы отображать только определенную часть общего файла изображения, содержащую изображение, которое вы хотите отобразить.

Допустим, вы хотите разместить на главной странице два отдельных изображения:

1. Флаг США
2. Флаг Франции

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

В нашем примере мы используем флаги США и Франции.

Затем вы должны добавить CSS, который инструмент предоставляет на свой сайт, а затем отобразить каждое изображение, добавив

или с этим классом CSS в вашем контенте.

Не волнуйтесь, если это пока не имеет смысла — в следующем разделе мы покажем вам шаг за шагом, как это сделать на вашем сайте WordPress!

Как комбинировать изображения с помощью спрайтов CSS в WordPress

Теперь давайте возьмем описанный выше высокоуровневый процесс и применим его конкретно к тому, как комбинировать изображения с помощью спрайтов CSS в WordPress.

Давайте продолжим пример с флагом и добавим третий флаг для Вьетнама ( вот где я живу! ).

Вот как выглядит пример страницы без спрайтов CSS . Каждое изображение представляет собой отдельный файл изображения, поэтому всего имеется три изображения и три HTTP-запроса для изображений:

Как выглядит страница без спрайтов CSS

А вот как это содержимое выглядит в редакторе WordPress — снова вы можете увидеть три отдельных блока изображений:

Как выглядит страница без спрайтов CSS: Редактор WordPress

Теперь давайте объединим эти изображения с помощью спрайтов CSS!

1.

Объедините изображения с помощью генератора спрайтов CSS

Для начала используйте инструмент генератора спрайтов CSS, чтобы объединить отдельные файлы изображений в один файл.

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

Есть много хороших генераторов, но мне нравится этот, который называется CSS Sprites Tool.

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

Инструмент CSS Sprites: кнопка «Создать CSS Sprites»

Затем вы должны увидеть три части вывода:

1. Некоторый код CSS
2. Некоторый код HTML
3. Комбинированный файл изображения

Инструмент CSS Sprites: Output

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

2. Загрузите комбинированное изображение в медиатеку WordPress

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

Загрузка объединенного файла изображения в медиатеку WordPress

3. Добавьте код CSS на свой сайт WordPress

Чтобы добавить код CSS на свой сайт WordPress, перейдите Внешний вид → Настройка → Дополнительный CSS .

Затем вставьте код CSS из генератора спрайтов на шаге 1. При этом замените поле background:url прямой ссылкой на объединенный файл изображения в вашей медиатеке WordPress:

Добавление кода CSS через настройщик WordPress

4. Используйте HTML-код для отображения изображений

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

Если вы работаете в редакторе блоков WordPress, это означает, что вместо использования блока изображения для отображения каждого изображения вы должны использовать пользовательский блок HTML. Вот как это выглядит:

Использование HTML-кода для отображения изображений

Помните, что вы можете получить этот HTML-код из генератора спрайтов CSS на шаге №1 .

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

Загрузка одного файла изображения вместо трех отдельных изображений

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

Каждое изображение отображается с использованием CSS

Вот как можно комбинировать изображения с помощью спрайтов CSS в WordPress!

Можно ли объединять изображения в CSS-спрайты с помощью WP Rocket?

Нет, WP Rocket не предлагает функцию, помогающую объединять изображения в спрайты CSS в WordPress. К сожалению, сложно надежно автоматизировать этот процесс, поэтому вам нужно следовать ручному методу, который мы подробно описали выше, вместо того, чтобы просто установить плагин WordPress и завершить его.

При этом WP Rocket предлагает множество других способов оптимизации изображений и другого медиа-контента на вашем сайте WordPress.

Например, WP Rocket может помочь вам реализовать ленивую загрузку изображений, которая позволяет ускорить время загрузки, ожидая загрузки контента ниже сгиба, пока пользователь не начнет прокручивать страницу вниз.

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

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

Начните работу с CSS-спрайтами WordPress сегодня

CSS-спрайты помогут вам ускорить работу сайта WordPress, объединив несколько файлов изображений в один файл.

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

Но для декоративных изображений, например, на вашей домашней странице, спрайты CSS — это умный метод оптимизации производительности.

Чтобы объединить изображения с помощью спрайтов CSS в WordPress, вы можете:

1. Используйте инструмент генератора спрайтов CSS WordPress для объединения нескольких изображений в одно.
2. Загрузите объединенный файл изображения на свой сайт.
3. Добавьте код CSS на свой сайт WordPress с помощью настройщика WordPress.
4. Добавьте предоставленный HTML-код, где вы хотите отображать каждое изображение.

У вас есть дополнительные вопросы о том, как комбинировать изображения с помощью спрайтов CSS в WordPress? Оставить комментарий!

Генератор спрайтов | Tiki Wiki CMS Groupware :: Development

Это должно быть переоценено после перехода на Bootstrap и значки SVG или шрифты, чтобы увидеть, по-прежнему ли это важно.


Генератор спрайтов для всех изображений, включенных в установку Tiki: это может быть круто для повышения производительности, но есть разные точки зрения. Пример: CSS-спрайты глупы — давайте вместо них будем использовать архивы! (демонстрация Firefox)

Вы бы предпочли что-то, что является частью процесса сборки? (и, таким образом, работает только со связанными изображениями) или что-то, что запускается каждым Tiki (немного похоже на минимизацию)

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

Assetic

• Нет встроенной поддержки спрайтов в активах (пока) Если вы не используете scss/sass, где у вас есть компас


упоминается https://github.com/pminnieur/sprites

http://csssprites.org/
https://github.com/carrotsearch/smartsprites

InstantSprite

http://instantsprite.com/
https://github.com/bgrins/InstantSprite

SpriteMe

SpriteMe упрощает создание спрайтов CSS. С открытым исходным кодом, на PHP. Связанный:
http://jaredhirsch.com/coolrunnings/about/

WebSpriteGenerator

http://westhoffswelt.de/projects/web-sprite-generator.html
https://github.com/jakobwesthoff/веб-спрайт-генератор

Генератор спрайтов CSS (Project Fondue)

https://launchpad.net/css-sprite-generator
http://spritegen.website-performance.org/

CSS-Sprite-Generator (mikesmullin)

https://github.com/mikesmullin/CSS-Sprite-Generator

Генератор спрайтов (IndyHall Labs)

https://github.com/IndyHallLabs/css-sprite-generator/

CSSsprite

http://code.google.com/p/csssprite/

• http://spritely.net
• http://eworldproblems.mbaynton.com/2012/07/json-packaging/
• https://www.ohloh.net/tags/csssprites
• https://www.ohloh.net/tags/php/spritegenerator
• http://code.google.com/hosting/search?q=label:csssprites
• http://code.google.com/hosting/search?q=label:spritegenerator
• https://github. com/search?type=Everything&language=php&q=sprite+generator&repo=&langOverride=&x=25&y=26&start_value=1

псевдоним

• SpriteMe

История Источник

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

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

Доступность (WAI и 508)
Бухгалтерский учет
Администрация
Аякс
статей и материалов
Обратные ссылки
Баннер
Пакет
BigBlueButton аудио/видео/чат/демонстрация экрана
Блог
Закладка
Совместимость с браузером
Календарь
Категория
Чат
Комментарий
Коммуникационный центр
Консистенция
Контакты Адресная книга
Свяжитесь с нами
Шаблон контента
Вклад
Печенье
Авторское право
Кредиты
Пользовательская домашняя страница (и домашняя страница группы)
База данных MySQL — MyISAM
База данных MySQL — InnoDB
Дата и время
Консоль отладчика
Диаграмма
Каталог (гиперссылок)
Ссылка на документацию с Tiki на doc. tiki.org (справочная система)
Документы
Корм ​​для собак
Ничья — заменена Диаграммой
Динамический контент
Настройки
Динамическая переменная
Внешняя аутентификация
Часто задаваемые вопросы
Избранные ссылки
Ленты (RSS)
Галерея файлов
Форум
Дружеская сеть (Сообщество)
Гант
Группа
Групповая почта
Справка
История
Горячее слово
HTML-страница
i18n (многоязычный, l10n, Babelfish)
Галерея изображений
Импорт-Экспорт
Установить
Интегратор
Совместимость
Межпользовательские сообщения
ИнтерТики
jQuery
Управление видео Kaltura
Карма
Живая поддержка
Журналы (система и действия)
Потеря защиты от редактирования
Почтовая рассылка
Карта
Меню
Метатег
Отсутствующие функции
Визуальное картографирование
Мобильный
Моды
Модули
МультиТики
MyTiki
Информационный бюллетень
Блокнот
Независимость от ОС (не Linux, Windows/IIS, Mac, BSD)
Органические группы (самоуправляемые команды)
Пакеты
Оплата
PDF
Производительность Скорость/Нагрузка/Сжатие/Кэш
Разрешение
Опрос
Профили
Викторина
Рейтинг
Настоящее имя
Отчет
Утверждение редакции
Планировщик
баллов
Поисковая оптимизация (SEO)
Поиск
Безопасность
Семантические ссылки
Поделиться
Корзина для покупок
чат
Идентификатор сайта
Слайд-шоу
Умный шаблон
Социальные сети
Защита от спама (Анти-бот CATPCHA)
Проверка орфографии
Электронная таблица
Постановка и утверждение
Статистика
Обследование
Подсветка синтаксиса (Codemirror)
Сортировщик столов
Теги
Задача
Расскажи другу
Положения и условия
Тема
ТикиТестс
Табель учета рабочего времени
Доступ к токену
Панель инструментов (быстрые теги)
Туры
Трекеры
ОТДЕЛКА
Администрирование пользователей
Пользовательские файлы
Меню пользователя
Часы
Веб-почта и групповая почта
Веб-сервисы
История вики, переименование страниц и т. д.
Вики-плагины расширяют базовый синтаксис
Текстовая область синтаксиса Wiki, парсер и т. д.
Структура вики (книга и оглавление)
Рабочее пространство и перспективы
ВИСИВТСН
ВИСИВИКА
WYSIWYG
XMLRPC
XMPP

1. Структуры; Улучшить иконки действия объекта структуры
2. Структуры, вики-страницы; Не должно быть возможности создать страницу через структуру с «незаконным» именем.
3. Интерактивный помощник перевода сломан в мастере (следующий Tiki 25)
4. Трекеры; Избегайте скрытого дублирования «дочерних» элементов при дублировании одного элемента.
5. Группы администраторов, пользовательский интерфейс; Меню действий (гаечный ключ) не закрывается и перекрывает кнопку отправки

1. WYSIWYG и уценка
2. Предварительные тестовые серверы для процесса выпуска Tiki 24
3. Прогрессивное веб-приложение
4. Гитпод
5. Ручная очистка отказов электронной почты

. ..подробнее

PhpStorm от JetBrains

Спрайты CSS | Как создать спрайты изображения

Поиск

10 февраля 2020 г.

Использование спрайтов CSS — это способ объединения нескольких изображений в один файл изображения для использования на вашем веб-сайте с целью повышения производительности.

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

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

Таким образом, вместо трех отдельных изображений мы будем использовать одно изображение. С помощью CSS мы можем отображать только ту часть изображения, которую хотим использовать или отображать. Ниже приведены три изображения спрайтов, созданные с помощью генератора спрайтов CSS . В этой статье мы будем использовать первый из них (sprites.gif) размером 132x43px:

В строках ниже мы приведем простой пример, в котором мы будем использовать наше CSS-изображение sprites.gif:

 

<голова>
<стиль>
#дом {
  ширина: 43 пикселя;
  высота: 43 пикселя;
  фон: url(sprites.gif) 0 0 без повтора;
}
#следующий {
  ширина: 43 пикселя;
  высота: 43 пикселя;
  фон: url(sprites. gif) -89px 0 без повтора;
}
#назад {
  ширина: 43 пикселя;
  высота: 43 пикселя;
  фон: url(sprites.gif) -43px 0 без повтора;
}


<тело>








 

Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS. Ширина: 43 пикселя, соответственно высота 43 пикселя — определяет часть изображения, которую мы хотим использовать; background: url (sprites.gif) 0 0 без повтора; — определяет фоновое изображение и его позицию (слева 0px, сверху 0px) со свойством no-repeat. Атрибут img определяет небольшой прозрачный gif, потому что свойство src нельзя оставить пустым. Изображение показано выше, рядом с кодом.

Далее мы будем использовать изображение спрайта («sprites.gif») для создания списка навигации. В приведенном ниже примере мы будем использовать список HTML, поскольку он может быть ссылкой и принимать фоновое изображение.

Пример:

 

<голова>
<стиль>
#навлист {
  положение: родственник;
}
#навлист ли {
  маржа: 0;
  заполнение: 0;
  стиль списка: нет;
  положение: абсолютное;
  сверху: 0;
}
#navlist li, #navlist a {
  высота: 43 пикселя;
  дисплей: блок;
}
#дом {
  слева: 0px;
  ширина: 43 пикселя;
  фон: url('sprites. gif') 0 0;
}
#предыдущий {
  слева: 63px;
  ширина: 43 пикселя;
  фон: url('sprites.gif') -46px 0;
}
#следующий {
  осталось: 129пкс;
  ширина: 43 пикселя;
  фон: url('sprites.gif') -89px 0;
}


<тело>
  <ул>
  

  


   

В строках ниже мы хотели бы добавить эффект прохождения в наш список навигации, который был создан выше. Мы будем использовать эффект наведения на спрайты изображений. Для этого нам также понадобится спрайт изображения при наведении, в нашем случае sprites_hover.gif, который имеет точно такие же размеры, как исходное изображение, sprites.gif. Вы можете создать любой эффект на изображении при наведении. Таким образом, изображение, которое мы будем использовать, содержит три небольших навигационных изображения и три небольших изображения для эффекта, который мы хотим использовать, а именно для эффектов загрузки. Учитывая, что это единое изображение, а не отдельные файлы, в основном скорость загрузки изображения не будет задерживаться. Мы добавим несколько строк кода, чтобы добавить эффект наведения:

 #дома:наведите {
  фон: url('sprites_hover.gif') 0-43px;
} 

Полный пример приведен ниже:

 

<голова>
<стиль>

/*position установлено относительное, чтобы разрешить абсолютное позиционирование внутри него*/
#навлист {
  положение: родственник;
}
/*поле установлено на 10 пикселей, стиль списка удален, все элементы списка имеют абсолютное позиционирование, верхнее поле установлено на 20 пикселей */
#навлист ли {
  поле: 10 пикселей;
  стиль списка: нет;
  положение: абсолютное;
  верх: 20 пикселей;
  отступ слева: 2px;
}

/*высота всех изображений 43px*/
#navlist li, #navlist a {
  высота: 43 пикселя;
  дисплей: блок;
}

/*Позиционировано полностью влево, ширина изображения 43 пикселя, фоновое изображение sprites.gif и его позиция слева 0 пикселей, сверху 0 пикселей и без повтора*/
#дом {
  слева: 0px;
  ширина: 43 пикселя;
  background: url('sprites. gif') 0 0 без повтора;
  
}
/*Располагается на 63 пикселя влево, ширина изображения составляет 43 пикселя, фоновое изображение — sprites.gif, а его положение — на 44 пикселя справа от исходного изображения*/
#следующий {
  слева: 63px;
  ширина: 43 пикселя;
  background: url('sprites.gif') -44px 0 без повтора;
}
/*Позиция 129px влево, а ширина изображения — 43 пикселя, а фоновое изображение — sprites.gif, а его положение — 89 пикселов справа от исходного изображения*/
#назад {
  слева: 129 пикселей;
  ширина: 43 пикселя;
  background: url('sprites.gif') -89px 0 без повтора;
}
/*Позиция 0, ширина изображения 43 пикселя, фоновое изображение sprites_hover.gif */
#дома:наведите {
  фон: url('sprites_hover.gif') 0-43px;
  поле слева: 1px;
}
/*Располагается на расстоянии 44 пикселя справа от исходного изображения при наведении курсора, ширина изображения составляет 43 пикселя, а фоновое изображение — sprites_hover.gif */

#далее:наведите {
  фон: url('sprites_hover.gif') -44px -43px;
  поле справа: 5px;
  отступ: 1px;
}
/*Расположение на 89px прямо из исходного изображения при наведении курсора, ширина изображения составляет 43 пикселя, а фоновое изображение — sprites_hover. gif */
#назад:наведите {
  фон: url('sprites_hover.gif') -89px -43px;
  поле справа: 5px;
}


<тело>

<ул>
  

  

  




 

Заключение

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

Популярные статьи

Рекомендуемые

стежков: бесплатный генератор спрайтов CSS

Как мы знаем, чем меньше файлов для загрузки, тем выше скорость загрузки и воспроизведения страниц. Поэтому иконки и другие изображения, особенно маленькие изображения, часто объединяются в спрайт. Спрайт — это набор нескольких изображений, помещенных в один файл изображения. Создание спрайта вручную требует некоторой работы. Изображения расположены в файле изображения, и их положение, ширина и высота должны быть определены в таблице стилей. Генератор спрайтов Stitches значительно ускоряет эти процессы.

Загрузить простые изображения

Вероятно, нет более простого способа создания спрайтов, чем с помощью Stitches. Изображения, которые вы хотите объединить в файл спрайтов, можно загрузить через веб-интерфейс. Он поддерживает форматы JPG, PNG и GIF. После загрузки изображения автоматически размещаются в рабочей области. Вы можете определить, хотите ли вы, чтобы изображения были расположены в виде компактного блока, рядом друг с другом или одно под другим. Вы также можете настроить расстояние между отдельными изображениями. Каждое изображение требует отдельного имени, чтобы впоследствии его можно было присвоить HTML-элементу. Кроме того, к спрайту добавляется префикс, предшествующий всем классам, которые будут сгенерированы. После того, как все файлы изображений будут загружены и названы, вы можете загрузить файл спрайта в формате PNG вместе с соответствующей таблицей стилей. Файл таблицы стилей содержит общий класс с префиксом имени, в который встраивается файл спрайта в качестве фонового изображения. Более того, для каждого изображения определяется класс, указывающий положение изображения в спрайте через «фоновое положение». Он также содержит информацию о ширине и высоте изображений. Имя класса для каждого изображения состоит из префикса и конкретного имени, которое вы дали каждому изображению в генераторе. После того как вы встроите таблицу стилей в HTML-документ, вы можете назначить каждое изображение спрайта HTML-элементу через соответствующий класс.

 <дел> 

В приведенном выше примере мы предполагаем, что префикс спрайта называется «спрайт». Это имя по умолчанию. Помимо класса «sprite», элементу

также назначается «sprite-facebook». Таким образом, будет отображаться изображение с названием «facebook». Высота и ширина изображения также присваиваются элементу

.

Еще более компактный с URI данных

Если вы обнаружите, что PNG и файл таблицы стилей по-прежнему вызывают слишком много запросов, вы можете поместить весь спрайт со всеми файлами изображений в таблицу стилей. Для этого вставьте файл изображения, используя URI данных в файле таблицы стилей. Обратите внимание, что размер URI данных больше, чем размер «обычных» файлов, но у вас будет один файл, содержащий все содержимое. В зависимости от количества изображений, которые вы помещаете в спрайт, вы можете встроить несколько одиночных запросов в один запрос. Если вы не используете URI данных, это будет как минимум два запроса. Если вы используете LESS, вы можете выбрать синтаксис LESS вместо стандартного файла CSS.

Сохранить настройки

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

Хост вышивает сам

Если вы не хотите использовать Stitches на сайте проекта разработчика, вы можете разместить генератор самостоятельно. Он распространяется под лицензией MIT и может быть быстро установлен. Для библиотеки требуются jQuery, Bootstrap и Modernizr. Stitches не использует язык программирования на стороне сервера и поэтому может работать в автономном режиме. Пакет загрузки содержит все необходимые файлы, включая внешние библиотеки. После добавления всех файлов JavaScript и таблиц стилей в заголовок HTML вам нужно только разметить контейнер.

 <дел> 

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

 <дел>
  
 

В приведенном выше примере встроен файл PNG. Имя для изображений определяется атрибутом данных «имя данных». Сайт проекта содержит исчерпывающую документацию, которая поможет вам выполнить установку и настройку. Здесь вы найдете хорошо прокомментированный исходный текст всех файлов JavaScript.

Заключение

Stitches — полезный инструмент для простого создания спрайтов. Что делает его еще более интересным, так это то, что генератор можно использовать независимо от сайта проекта. Stitches работает в современных браузерах, поддерживающих HTML5, поскольку использует API-интерфейсы HTML5. (dpe)

CSS Image Sprite Maker в Python

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

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

Обзор проекта

Этот проект состоит из файла с именем spritemaker.py для модуля и другого файла с именем spritemakerconsole.py , содержащего основную функцию для опробования модуля. Программе действительно нужен графический интерфейс, который я напишу для будущего проекта.

Загружаемый ZIP-файл и репозиторий GitHub также содержат несколько значков социальных сетей, которые мы объединим в одно изображение, хотя, конечно, вы можете заменить их своими собственными. Это комбинированное изображение.

А это предварительный просмотр одного из классов CSS, сгенерированных программой.

.YouTube { background: url(‘sprites.png’) без повторения; ширина: 36 пикселей; высота: 36 пикселей; отображение: встроенный блок; background-position: -180px 0px; }

В последней строке обратите внимание, что координата x отрицательна. Это потому, что нам нужно указать, насколько нужно переместить изображение относительно его положения по умолчанию 0,0, а не положения изображения в файле. Координата X значка YouTube составляет 180 пикселей, поэтому нам нужно переместить изображение на -180 пикселей (т.е. влево), чтобы привести значок YouTube к 0.

Вы можете загрузить исходный код и образцы изображений в виде zip-файла или клонировать/загрузить репозиторий GitHub.

ZIP-файл
GitHub

Это исходный код для spritemaker.py .

spritemaker.py

импорт ОС из pathlib импорт Путь импорт PIL из импорта изображения PIL def create_sprites (путь к изображению, путь к файлу спрайта, путь к файлу css): «»» Создает изображение спрайта, объединяя изображения в кортеже imagepaths в одно изображение. Это сохраняется в spritefilepath. Также создает файл классов CSS, сохраненный в cssfilepath. Имена классов — это исходные имена файлов изображений без расширения имени файла. Возникают ошибки ввода-вывода. «»» размер = _calculate_size(пути к изображениям) _create_sprite_image(пути к изображениям, размер, «sprites. png») _create_styles(imagepaths, «spritestyles.css», «sprites.png») def _calculate_size (пути к изображениям): «»» Создает кортеж ширины/высоты, определяющий размер изображения. необходимо для объединенных изображений. «»» общая ширина = 0 максимальная высота = 0 пытаться: для пути к изображению в пути к изображению: изображение = Image.open(путь к изображению) общая ширина += изображение.ширина maxheight = max(image.height, maxheight) кроме IOError как e: поднимать возврат (общая ширина, максимальная высота) def _create_sprite_image(путь к изображению, размер, путь к файлу спрайта): «»» Создает новое изображение и вставляет в него исходные изображения, затем сохраняет его в spritefilepath. «»» спрайты = PIL.Image.new(«RGBA», размер, (255,0,0,0)) х = 0 пытаться: для пути к изображению в пути к изображению: изображение = Image.open(путь к изображению) sprites.paste(изображение, (x, 0)) х += изображение.ширина sprites. save(spritefilepath, compress_level = 9) кроме IOError как e: поднимать def _create_styles(путь к изображению, путь к файлу css, путь к файлу спрайта): «»» Создает набор классов CSS для изображений спрайтов. и сохраняет его в spritefilepath. «»» стили = [] х = 0 пытаться: для пути к изображению в пути к изображению: изображение = Image.open(путь к изображению) имя класса = Путь(путь к изображению).основа стиль = [«.»] style.append(f»{имя класса}\n») style.append(«{\n») style.append(f»    background: url(‘{spritefilepath}’) без повторения;\n») style.append(f»    ширина: {image.width}px;\n») style.append(f»    высота: {image.height}px;\n») style.append(»    display: inline-block;\n») style.append(f»    background-position: -{x}px 0px;\n») style.append(«}\n\n») х += изображение.ширина стиль = «».join(стиль) стили.append(стиль) стили = «».join(стили) f = open(cssfilepath, «w+») f.write(стили) е.закрыть() кроме IOError как e: поднимать

Импорт и Pillow

Нам нужно несколько импортов для обработки файлов, а также еще два для Pillow, библиотеки изображений Python, которая используется для создания изображений. Использование Pillow в этом проекте очень простое и не требует пояснений, но если вы хотите узнать больше, у меня также есть полная статья под названием An Introduction to Image Manipulation in Python with Pillow.

create_sprites

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

• imagepaths — кортеж отдельных файлов
• spritefilepath — путь для сохранения объединенного изображения в
• cssfilepath — путь для сохранения файла CSS на

_calculate_size

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

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

_create_sprite_image

Сначала мы создаем новое изображение подушки необходимого размера, а затем итерируем входные изображения, вставляя каждое в новое изображение с соответствующей координатой x. Наконец, новое изображение сохраняется по указанному пути; обратите внимание на press_level = 9, о котором я расскажу позже.

_create_styles

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

Затем список классов также объединяется в строку, которая затем сохраняется по указанному пути.

Теперь давайте посмотрим на spritemakerconsole.py .

spritemakerconsole.py

импортировать создатель спрайтов определение main(): «»» Простое консольное приложение для тестирования модуля spritemaker. «»» imagepaths = («icons/facebook. png», «icons/github.png», «icons/linkedin.png», «icons/pinterest.png», «icons/twitter.png», «icons/youtube.png» ) пытаться: spritemaker.create_sprites(пути к изображениям, «sprites.png», «spritestyles.css») кроме IOError как e: печать (е) главный()

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

Это кодирование завершено, поэтому мы можем запустить его с помощью этой команды:

Запуск программы

python3.8 spritemakerconsole.py

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

Использование в HTML

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

<голова> css» rel=»stylesheet» type=»text/css» /> <тело> <дел>

Файл HTML включен в репозиторий ZIP и GitHub, и если вы откроете его, то увидите это.

Несколько слов о размерах файлов

Формат PNG или Portable Network Graphics не имеет потерь, но, как вы видели в коде, можно указать уровень сжатия при сохранении файлов. Это влияет на размер файла и скорость кодирования/декодирования, но не влияет на качество изображения. Уровень сжатия представляет собой целое число от 0 (без сжатия, большой размер файла, быстрое кодирование/декодирование) и 9.(максимальное сжатие, малый размер файла, медленное кодирование/декодирование). Исходные файлы, используемые в этом проекте, были сохранены с уровнем сжатия 9, как и выходной файл спрайта, чтобы можно было осмысленно сравнивать размеры.

Общий размер шести входных файлов составляет 5 252 байта, а размер выходного файла составляет 4 365 байт или около 83 % отдельных размеров. Каждый по нитке!

Что насчет HTTP/2

Во время исследования этого проекта я нашел на сайте Mozilla статью под названием Реализация спрайтов изображений в CSS. Он включает примечание «При использовании HTTP / 2 на самом деле может быть более благоприятным для пропускной способности использование нескольких небольших запросов», но не объясняет или не расширяет это. Похоже, мне нужно исследовать это дальше и, возможно, написать статью на эту тему…!

«Но я предпочитаю JavaScript…»

Если вы предпочитаете JavaScript, у меня есть версия этой программы для NodeJS в разработке. Наблюдайте за этим пространством.

Как спрайты CSS могут повысить производительность | Kyle DeGuzman

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

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

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

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

Пример спрайта

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

К счастью, спрайты вовсе не новый инструмент для разработчиков. Если вы погуглите «CSS Sprite Generator», вы легко найдете множество различных инструментов для создания спрайтов. Или, если вы предпочитаете старомодный способ, вы определенно можете создавать спрайты в Photoshop самостоятельно.

Двигаемся дальше, теперь пришло время поговорить об использовании спрайтов.

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

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

свойства фона для спрайтов CSS

Это три обязательных основных свойства фона.

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

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

Третье свойство фона, вероятно, наиболее важно при использовании спрайтов.

Давайте вернемся на несколько шагов назад, чтобы понять это.

Когда мы используем спрайты, как вы помните, мы не вводим спрайт на нашу веб-страницу с помощью тега изображения HTML. Вместо этого мы создадим элемент и установим фоновое изображение этого элемента в виде спрайта. Ради аргумента предположим, что выбранный нами элемент — это div. Мы собираемся установить фоновое изображение этого элемента div на спрайт.

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

Если вы это сделаете, должно отображаться только первое изображение во всем спрайте. Черный квадрат, окружающий первое изображение, представляет собой div. Каждый пиксель спрайта, который содержится в пределах размеров div, будет виден.

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

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

Итак, поняв это, мы можем углубиться в третье свойство: фоновое положение.

По умолчанию позиция фона будет 0 0. Вот почему первый элемент в этом конкретном спрайте был виден без написания каких-либо обучающих стилей CSS.

No related posts.