Содержание

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 и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.

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

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

<a> , например: <a href=". .."></a>

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

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

CSS спрайты. Примеры построения | Все о создании сайтов

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

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

страница будет загружаться в разы быстрее. Вот и весь принцип оптимизации.

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

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

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

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

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

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

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

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

#css-sprite-ul {position:relative;height: 100px;margin: 0}

#css-sprite-ul li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

#css-sprite-ul li, #css-sprite-ul a {height:100px;display:block;}

#css-sprite-001 {left:0px;width:100px;heigth:100px;background:url(‘/images/css-sprite-01. png’) 0 0;}

#css-sprite-002 {left:200px;width:100px;heigth:100px;background:url(‘/images/css-sprite-01.png’) 100px 0;}

#css-sprite-003 {left:400px;width:100px;heigth:100px;background:url(‘/images/css-sprite-01.png’) 0 100px;}

#css-sprite-004 {left:600px;width:100px;heigth:100px;background:url(‘/images/css-sprite-01.png’) 100px 100px;}

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

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

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

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

html-код:

<ul>

<li></li>

</ul>

Код css-файла:

#css-sprite-button {position:relative;height: 35px;margin: 0}

#css-sprite-button li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

#css-sprite-button li, #css-sprite-button a {height:35px;display:block;}

#css-sprite-button-hover {left:0px;width:220px;heigth:35px;background:url(‘/images/css-sprite-button-hover. png’)0 0}

#css-sprite-button-hover:hover {background: url(‘/images/css-sprite-button-hover.png’)0 35px}

Как это делается?

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


Возможно, Вам будет интересно ↓↓↓

Как сделать CSS-спрайт для сайта

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

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

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

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

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

Скачать исходник

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

HTML разметка

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

<div>
 <p>Подписывайтесь на обновления</p>
 <ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
 </ul>
</div>

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

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 {
 background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
 transition: .3s;
}

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

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

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

Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 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-спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.

Спрайты css. Ускоряем загрузку страниц.

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

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

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

Как сделать спрайт правильно?

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

Практические замечания по использованию css спрайтов

  • Если небольшие элементы дизайна сайта (пункты меню, различные кнопки и тд) меняют свой фон при наведении на них мыши или клике по ним мы должны пользоваться методом, поскольку это не просто оптимизирует загрузку страницы, а позволяет нам избежать бага с «пустой» кнопкой, когда после наведения на что-то мы пару секунд видим пустое место, а после появляется картинка. При использовании спрайтов файл картинки один, следовательно загружается он один раз при переходе на страницу и смена фона при наведении происходит мгновенно, ведь меняется лишь область картинки показываемая пользователю.
  • Метод используется для картинок из оформления сайта, а не из содержательной его части. Не стоит склеивать картинки несущие на себе смысловую нагрузку и тд. Разница в загрузке 3 или 5 файлов никак не повлияет на скорость подгрузки страницы, а может иметь ряд негативных последствий с точки зрения сео. Подробнее о этом можно почитать тут.
  • Если область показа картинки предполагает, что вокруг картинки будет свободное пространство, то это также нужно учитывать при склейке спрайта, оставляя необходимые зазоры по краям.
  • Сохраняйте исходники с не слитыми слоями при склейке картинки. Возможна ситуация, когда в дальнейшем вам, к примеру, придется поменять размер пары элементов дизайна, тогда при отсутствии исходника придется ради пары мелких правок перерисовывать спрайт с нуля.
  • Не переборщите с размером картинки. Знайте во всем меру, ведь если ваш файл будет весить несколько мегабайт, то возможна ситуация, когда пользователь будет наблюдать экран без оформления несколько секунд после его загрузки.
  • Применяйте фантазию при создании спрайтов. Правильно расположить в нем иконки не так просто, как может показаться на первый взгляд. К примеру, при расположении иконок слева от элемента дизайна можно склеить спрайт лесенкой, что ограничит зону видимости других картинок спрайта и в целом файл спрайта останется компактным. (ниже линиями помечены зоны видимости иконок).

Подводя итоги

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

Оценок: 4 (средняя 5 из 5)

  • 2079 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

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

Главная / Вебмастеру / Лучшие программы

21 января 2021

  1. Снижаем число подгружаемых файлов для ускорения сайта
  2. Создание CSS спрайтов (sprites) из фоновых изображений сайта
  3. Вносим изменения в файл CSS при подключении спрайтов

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

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

Снижаем число подгружаемых файлов для ускорения сайта

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

  1. Как измерить скорость загрузки сайта и установить Page Speed
  2. Как объединить и сжать CSS файлы
  3. Как включить Gzip сжатие в .htaccess
  4. Снижение числа http запросов и сжатие изображений

Как я говорил в предыдущей статье, для загрузки каждого изображения в браузер пользователя с web сервера, вне зависимости от того, как оно формируется (с помощью тега IMG или же в CSS с помощью свойства «background»), используется отдельный http запрос. Если графики на вашем проекте довольно много, то и количество таких запросов будет неприлично большим.

Например, на начальном этапе развития моего блога сервис Pingdom (на нем можно измерить скорость загрузки, а так же настроить проверку и мониторинг доступности сайта — аптайм) давал такое заключение:

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

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

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

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

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

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

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

Лучшим онлайн сервисом, на мой взгляд, является «Sprites me» — широко известный и популярный в буржунете, но не заслужено обойденный вниманием в рунете. Вам даже не потребуется загружать в него свои фоновые изображения, которые вы желаете объединить.

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

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

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

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

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

После проведения всех описанных в этих пяти статьях мероприятий по повышению скорости загрузки, Page Speed дает моему блогу KtoNaNovenkogo.ru оценку в 93 балла из ста возможных, и при этом отсутствуют строки помеченные красным, что означает практически полное исполнение мною всех основных требований (см. скриншот выше).

Создание CSS спрайтов (sprites) из фоновых изображений сайта

Итак, для начала вам нужно открыть главную страницу сервиса «Sprites me». Дальнейшие действия могут показаться вам не совсем обычными, ибо потребуется перетащить ссылку под таким же названием «Sprites me» с этой страницы в закладки вашего браузера.

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

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

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

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

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

Попробовав и так, и эдак поиграться с CSS кодом, я счел за благо при создании первого спрайта просто перетащить из него проблемные изображения в нижнюю область «Non-Sprited Images». После этого проблем с его работой уже не наблюдалось. Как я и говорил — все очень просто и наглядно. Хвала создателям этого онлайн генератора.

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

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

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

Точно таким же образом создаете и остальные (просто щелкнув по кнопке «make sprite»), которые вам предлагает создать генератор. Скачиваете полученные файлы спрайтов и заливаете их в папку с картинками на своем ресурсе.

Вносим изменения в файл CSS при подключении спрайтов

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

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

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

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

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

#content .post_bottom{background:#bce3ff url(images/post_bottom.png) no-repeat bottom;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

И после:

#content .post_bottom{background:#bce3ff url(https://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme1.png) no-repeat bottom; background-position: -10px 0px;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

Если в свойстве уже окажется прописанным свойство «background-position», то замените значения в нем на те, которые предлагает данный генератор.

После внесения всех предписанных изменений в style.css обновите открытую в браузере страницу вашего ресурса, удерживая при это нажатой клавишу Shift на клавиатуре (в этом случае статические объекты на вебстранице будут заново запрошены с web сервера).

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

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

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

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 спрайтов:

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

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

SVG спрайты, 4 способа использования

Мы давно собирались делать видео про SVG спрайты, и вот наконец-то случилось. Существует четыре классических способа использования (с CSS и JavaScript), которые мы и рассмотрим, а еще поговорим о способах практического их применения: анимации и работа с кучей иконок.

#

SVG спрайт инлайново в HTML

Первый способ — положить SVG код прямо в HTML, спрятать его с помощью display: none и понаписать там несколько <g> элементов внутри блока <defs>. Это старый способ, который потом улучшили заменив <defs> и <g> на несколько элементов <symbol>.

Обращаться к «символам» можно через блок <use> и атрибут xlink:href по айдишнику.

Но в таком случае браузер ничего не может закешировать и на на помощь приходит способ #2.

#

SVG спрайт в отдельном файле

Отличается от первого только тем, что мы кладем спрайт в какую-нибудь директорию и к элементам обращаемся с помощью того же атрибута xlink:href, но вместо «голого» айдишника нужно сначала написать сам файл.

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

Инструменты для сборки: grunt и gulp.

#

SVG спрайт из CSS файла

Еще один способ — выкладывать SVG напрямую в CSS с помощью data:image или data:url. Нам тут в комментариях советовали, что не стоит копипастить чистый SVG, лучше эскейпить, а то вдруг чего.

Инструменты для сборки: grunt, gulp, онлайн.

#

SVG спрайт с общим viewbox

Классический спрайт с одним общим «полотном». Обращение к конкретным элементам происходит посредством сдвигания viewox. Используется в основном для различных анимаций. Напримет таких.

See the Pen SVG Sprite Animation #2 by Sarah Drasner (@sdras) on CodePen.

#

Заключение

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

Fallback для старых и хромых веб-дизайнеров браузеров: svg4everybody.

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

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

CSS Sprite Generator

Около

Автор: Роборг

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

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

Что я получу и как им пользоваться?

Этот инструмент генерирует:

  • Файл изображения
  • Блок кода CSS

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

Часто задаваемые вопросы

Кто это написал?

Грег, он же Роборг — я профессиональный программист PHP в Just Say Please.
Вы можете подписаться на меня в Twitter

Как мне сообщить об ошибке?

На данный момент только через Twitter.

Как долго вы храните мои исходные изображения и спрайты?

Они не хранятся на сервере.

Могу ли я загружать изображения только для личных целей?

Да.

Есть ли API?

Да — см. Страницу CSS Sprites API.

Это проект с открытым исходным кодом

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

Как написан этот сайт?

Генератор спрайтов написан на PHP с использованием функций изображения GD. Прозрачные PNG создаются вручную.

Последние новости

августа 2017

Май 2014

  • Улучшенный CSS
  • Улучшенная обработка ошибок
  • Увеличен лимит памяти

Янв 2014

  • Новый интерфейс — загрузчик HTML5 вместо Flash
  • Новый API
  • Использовать URI данных вместо хранения файлов
  • Подсортировать файлы по имени

июл 2011

  • Улучшенная обработка ошибок
  • Обновлен до YUI 2.9,0
  • Добавлено предупреждение Chrome

ноя 2010

  • Исправлена ​​ошибка разряда при определенных обстоятельствах
  • Добавлена ​​опция заполнения
  • Добавлен префикс класса CSS
  • Изменен алгоритм компоновки, когда все изображения имеют одинаковую ширину — теперь загрузка большого количества значков приведет к квадратному изображению вместо гигантского столбца.
  • Обновлен до PHP 5.3 — теперь PNG в оттенках серого загружаются правильно!
  • Добавлено сжатие PNG и фильтры

Автоматизация CSS-спрайтов для крупных организаций | Мэтью Пеннелл

Amazon был одним из первых сторонников CSS-спрайтов.

Спрайт CSS — это метод объединения нескольких изображений в одно изображение и выборочного отображения только его частей с помощью свойства CSS background-position. Первоначально он использовался в основном для того, чтобы заставить: состояния наведения загружаться быстрее, чем обычно используемый в то время эквивалент onmouseover () в JavaScript.Но быстро стало обычной практикой для сайтов объединять все свои значки и декоративные изображения в один оптимизированный «спрайт». Помимо более быстрых ролловеров, это также улучшило производительность сайта, поскольку загрузка одного спрайта почти всегда происходит быстрее, чем загрузка каждого отдельного изображения по отдельности.

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

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

За последние пару лет произошел невероятный скачок вперед в автоматизации многих общих задач, которые веб-разработчики привыкли выполнять вручную. Теперь мы можем выбирать из готовых шаблонов, таких как HTML5 Boilerplate и Rock Hammer. Или мы можем использовать целые библиотеки пользовательского интерфейса, такие как Twitter Bootstrap или Zurb Foundation. И у нас даже есть препроцессоры CSS, такие как LESS и SASS. Этот шаг к автоматизации привел к появлению таких средств выполнения задач, как Grunt и новичок Gulp, которые позволяют разработчикам писать и запускать очень простые задачи, чтобы автоматизировать большую часть скучных, повторяющихся частей их работы.

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

Большинство инструментов спрайтов имеют одни и те же параметры конфигурации, позволяя вам указать исходную и целевую папки, имена классов CSS, пространство, которое вы хотите оставить между изображениями, и используемый алгоритм упаковки. . Некоторые из более продвинутых предлагают возможность вывода спрайтов как в формате SVG, так и в формате PNG, а также спрайты с поддержкой Retina @ 2x. Вывод CSS часто может быть указан как простой CSS, или в формате LESS или SASS.

При рассмотрении решения, которое было бы полезно для большой команды, мы имели в виду несколько конкретных требований:

  • Он должен работать, если у нас есть только файлы PNG в качестве входных данных, поскольку не всем веб-дизайнерам комфортно работать с файлами SVG, или иметь лицензию на приложение для векторной графики.
  • Он должен включать автоматизацию псевдоклассов, таких как: hover и: active
  • Должна быть возможность интеграции в нашу существующую систему сборки
    Хотя с задачами Grunt весело играть, ни с одним из те, на которые мы смотрели, удовлетворяли всем нашим требованиям.

Glue — это инструмент командной строки, который легко настраивается и предлагает все функции, которые мы искали. В качестве входных данных он принимает папку или несколько подпапок файлов PNG. Создание псевдоклассов осуществляется посредством именования файлов. Например, если у вас есть два файла с именами «foo.png» и «foo__hover.png», сгенерированный CSS будет содержать правило: hover для вашего класса .foo.

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

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

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

  • Перетащите новый образ в папку / source.
  • Запустите команду Glue, чтобы повторно спрайт изображений вместе и повторно сгенерировать CSS.
  • Добавьте соответствующую разметку на страницу:

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

Хотя изначально Glue поставлялся в комплекте с библиотекой OptiPNG, он был удален в версии 0.9, поэтому настоятельно рекомендуется прогнать полученный спрайт с помощью инструмента оптимизации перед его запуском. Существует множество вариантов, как в интерактивном режиме, так и в командной строке, в том числе:

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

Наведение на родительские элементы

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

. К этому общему шаблону можно обратиться с помощью умных манипуляций с шаблоном Jinja:

Здесь мы проверяем псевдосостояние, и если оно присутствует, мы добавляем дополнительное правило, которое запускает изменение изображения, если родительский элемент с определенным классом. спрайт-контейнер тоже зависает. Теперь мы можем создать такую ​​разметку:

При наведении курсора на

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

Идентичные изображения

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

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

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

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

Инструмент CSS Sprites: кнопка Generate CSS Sprites

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

  1. Немного кода CSS
  2. Немного кода HTML
  3. Файл комбинированного изображения
Инструмент CSS-спрайтов: результат

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

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

CSS Image Sprites — за и против

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

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

Таким образом, это считается одним из лучших способов уменьшить количество HTTP-запросов на странице; это относится к изображениям, таблицам стилей CSS, файлам Javascript и т. д.

Image Sprites — это метод, используемый в CSS для уменьшения количества HTTP-запросов на странице. Это просто делается путем объединения большинства статических фоновых изображений на веб-сайте в одно большое изображение, которое называется Image Sprite!

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

Вот хороший пример того, как это можно реализовать с помощью Image Sprite: http://jsfiddle.net/videsignz/eAp2H/

ProS

  • Меньше HTTP-запросов, что означает меньшую нагрузку на сервер.
  • Меньшее количество HTTP-запросов также означает сокращение времени загрузки страницы в браузере.
  • Изображения появляются быстрее (особенно изображения в состоянии наведения), потому что Image Sprite загружается раз и навсегда.

Минусы

  • Больше времени на разработку для нарезки изображений, их комбинирования и программирования позиций фона в CSS.
  • Больше времени на обслуживание. Всякий раз, когда требуется модификация, необходимо тщательно заново сгенерировать весь спрайт
  • Менее оптимизирован для SEO. Некоторые изображения лучше размещать в HTML, а не в качестве фона. Изображения HTML могут содержать заголовки и альтернативные тексты, которые более полезны для SEO, а фоны CSS — нет.

В конце концов, это зависит от каждого случая. Спрайты изображений полезны, когда дело доходит до оптимизации производительности. Может потребоваться немного больше усилий, но это эффективно.Ниже приведена ссылка на полезный инструмент, который помогает быстро создавать спрайты изображений, а не делать это вручную: http://spritegen.website-performance.org/

Если у вас есть какие-либо комментарии или вопросы о Image Sprites или сокращении HTTP-запросов на странице, оставьте их в разделе комментариев ниже.

Устойчивый веб-дизайн: CSS Sprites

Серия «Устойчивый веб-дизайн» № 5

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

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

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

Пример CSS-спрайта: меню навигации Apple

Как помогают CSS-спрайты?

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

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

Для более глубокого изучения CSS-спрайтов ознакомьтесь со статьей Smashing Magazine, в которой описаны методы, инструменты и руководства, которые вам понадобятся, чтобы узнать, как реализовать их на своем веб-сайте.

Зайдите в Ecograder и посмотрите, насколько экологичен ваш веб-сайт.

9 Бесплатный онлайн-генератор спрайтов CSS

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

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

Зачем нужен онлайн-генератор спрайтов?

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

Преимущества и недостатки использования CSS Sprites Generator:

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

  • Одно большое изображение использует меньшую полосу пропускания по сравнению с несколькими меньшими изображениями.
  • Меньше изображений == Меньше HTTP-запросов = более быстрая загрузка в целом

Единственным недостатком использования CSS-спрайтов является то, что они не работают согласованно во всех браузерах, таких как IE и Opera, Chrome и Firefox более близки к стандартам.Хотя, если вас не волнуют устаревшие браузеры IE, вам не о чем сильно беспокоиться. Небольшая настройка CSS может сделать ваш полный код кроссбраузерным.

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

1. CSS-Sprit.es

2. Веб-сайт Performace CSS Sprite Generator
Это лучший из всех Online и Offline CSS Sprite Generator. Он позволяет загружать изображения, игнорировать повторяющиеся изображения, изменять размер изображений, выводить изображения и т. Д.
Data URI Sprites

3.Модуль генератора CSS-спрайтов Drupal

Duris.ru — универсальный инструмент для веб-дизайнеров. Он предлагает несколько функций, таких как сжатие изображений, оптимизация изображений, сжатие или объединение Js, сжатие или объединение CSS.

4. Генератор спрайтов CSS

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

css sprites

5. Projekt Fondue CSS Sprite Generator
Этот генератор позволяет игнорировать повторяющиеся изображения, изменять размер исходных изображений, определять горизонтальное и вертикальное смещение, определять цвет фона и прозрачности, назначать префиксы классов CSS и многое другое.
6. Sprite Creator 1.0
Этот инструмент позволяет загружать изображение и создавать код CSS для выбранных областей спрайта.

7. SpriteMe: Генератор спрайтов CSS в один клик


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

8. InstantSprite

9. SpritePad

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

Сообщите нам, какой сайт-генератор спрайтов вы используете для создания онлайн-спрайтов CSS? Вы используете CSS-спрайты на своем веб-сайте для оптимизации скорости вашего блога?

Повышение скорости загрузки сайта | Как использовать CSS-спрайты

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

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

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

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

Возможно, вы знакомы с техникой CSS для отображения состояния «включено / выключено» для кнопки, которая содержится в одном изображении и позиционируется с помощью атрибута CSS background-position на : hover (см. Учебное пособие по кнопка, использующая спрайты CSS).CSS-спрайты в основном имеют ту же концепцию: изображение отображается на странице с использованием координат, указанных в вашем CSS, и будет видна только эта область.

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

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

Создание простого фонового спрайта изображения CSS

Давайте обсудим эту тему на примере. Используя Photoshop, я создал документ с серией изображений (логотипов компаний) и разделил область на фрагменты по 100 пикселей (см. Изображения ниже).Я сохранил файл и назвал его logos.jpg .

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

Фоновое изображение CSS ориентировано на отображение только первого логотипа, обозначенного зеленой рамкой, координаты которой равны y = 0 и x = 0.

Чтобы расположить их, мы используем атрибут background-position .

Чтобы отобразить второе изображение рядом с первым, все, что необходимо, — это настроить координаты по оси x.

Из-за того, как мы построили изображение (с интервалом в 100 пикселей), все, что нам нужно сделать, это добавить строку CSS, продвигающую ось x на 100 пикселей для отображения каждого логотипа.

CSS для фонового спрайта CSS 
 #logos {height: 64px; маржа: 0; отступ: 0; позиция: относительная;}

#logos li {background: url (/ logos.jpg) без повтора вверху слева; маржа: 0; отступ: 0; стиль списка: нет; позиция: абсолютная; вверху: 0;}

# логотипы a {height: 64px; дисплей: блок;}
  // Первый логотип 
#logos li a.jaz {background-position: 0 0}
  // Второй логотип 
#logos li a.iberotel {background-position: 0 -100px;}
  // Третий логотип 
#logos li a.solymar {background-position: 0 -200px;}
  // Четвертый логотип 
#logos li a.travcotels {background-position: 0 -300px;}
  // Пятый логотип 
#logos li a.междугородний {background-position: 0 -400px;}

Результаты использования CSS-спрайтов

В приведенном выше примере можно было уменьшить размер файла с 52 КБ до 22 КБ и количество HTTP-запросов с 5 до 1.

No related posts.