Sprite 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 »

SVG спрайты

В целях оптимизации и удобства при многократном использовании SVG изображений можно объединить в один файл-спрайт. Как это сделать? Для примера возьмем несколько изображений:

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.  54-6.53-1.42-1.42-6.53,6.54Z"/></g>
</svg>

HTML

У SVG есть несколько элементов-контейнеров – <g>, <defs> и <symbol>, лучшим для спрайтов является <symbol> т.к. он поддерживает все атрибуты как у <svg>.

Итак, нужно создать файл icons.svg, в нём будет общий контейнер <svg>...</svg>, далее в него помещаются изображения, с заменой <svg> на <symbol>

оставляя все другие параметры и добавляется атрибут id для дальнейшего вывода.

<svg>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www. w3.org/2000/svg">
		<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
	</symbol>
</svg>

HTML

Вывод осуществляется с помощью элемента <use> с ссылкой на файл спрайта и id изображения.

<svg><use xlink:href="/icons.svg#icon-1"></use></svg>
<svg><use xlink:href="/icons.svg#icon-2"></use></svg>
<svg><use xlink:href="/icons. svg#icon-3"></use></svg>

HTML

Результат:

Минусы

Если открыть файл спрайта в браузере, то изображения выводится не будут.
В старых браузерах (до IE9) тег <use> не поддерживается. Но для них есть плагин https://github.com/jonathantneal/svg4everybody.

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

Поиск

10 февраля 2020 г.

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

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

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

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

В строках ниже мы приведем простой пример, в котором мы будем использовать наше 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;
}


<тело>
  <ул>
   wordpress.com/">

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

Похожие статьи см. в разделе CSS: советы и рекомендации.

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

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

Начните с базового HTML-документа, содержащего HTML-список с любым количеством элементов списка. За это Как сделать, у меня будет 25 элементов списка, что позволит мне создать сетку 5×5. Присвойте каждому элементу списка уникальный идентификатор .

  <голова> <мета-кодировка="UTF-8">Спрайт CSS

Штирлиц — Сеть печатных салонов в Перми

Sprite css: создание, применение — учебник CSS

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

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

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

SVG спрайты

Результат:

Минусы

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

Заключение

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

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

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