Содержание

Как сделать спрайт в CSS?

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

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

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

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

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

  • Как объединить изображения в спрайт
    • Объединение изображений
    • Позиционирование изображения на странице

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

Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер (50 на 50 пикселей):

Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его «sprite.png». Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.

Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок (мегафон) расположен в верхних 50 пикселях нового изображения, а второй (смайлик) — в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS:

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

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

Приведенный выше код CSS указывает ширину и высоту изображения мегафона (50 на 50 пикселей), он также вызывает изображение «sprite. png», которое является объединенным. Часть кода «0 0px» отвечает за отображение спрайта. Указание начинать вывод изображения с «0 0px» означает, что оно должно отображаться с 0 пикселей по оси X и с 0 пикселей по оси Y. Это значит «начинать вывод изображения сверху» и «начинать вывод изображения слева».

Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей (где расположен мегафон). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта. Мы создадим класс CSS под названием «smile»:

.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: «0 -50px». Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат (-50px). Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.

Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом «megaphone»:

<div></div>

Когда нужно вывести смайлик, мы размещаем div с классом «smile»:

<div></div>

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

Вадим Дворниковавтор-переводчик статьи «How to use CSS sprites»

CSS спрайты изображений

Спрайт изображений — это набор разных изображений, которые объединены в одном общем файле изображения.

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

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

Спрайты изображений — Простой пример

Вместо того, чтобы использовать три разных изображения, мы используем одно изображение («img_navsprites.gif») такого вида:

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

В следующем примере определяется, какая часть изображения «img_navsprites.gif» будет отображаться:

<style>
#home {
  width: 46px;
  height: 44px;
  background: url('img_navsprites.gif') 0 0;
}
</style>
<img src="img_trans.gif">

Результат:

Объяснение примера:

  • <img src="img_trans.gif"> — Определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Основное изображение будет фоновым, его мы определяем при помощи CSS.
  • width: 46px; height: 44px; — Определяет используемую нами часть изображения
  • background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его местонахождение (слева 0px, сверху 0px)

Это самый простой способ использования спрайтов изображений. Теперь рассмотрим, как можно использовать их в ссылках и для оформления эффекта наведения мыши.

Спрайты изображений — Создаем список ссылок навигации

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

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

<style>
#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.
 
 asp"></a></li>
</ul>

Результат:

Объяснение примера:

  • #navlist {position:relative;} — устанавливаем относительное позиционирование, чтобы потом внутри этого элемента можно было использовать абсолютное позиционирование
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} — отступы (margin) и поля (padding) устанавливаем в 0, стиль списка (list-style) удаляем, а все элементы списка делаем абсолютно позиционируемыми
  • #navlist li, #navlist a {height:44px;display:block;} — задаем высоту всех изображений 44px

Теперь определяем позицию и стиль для каждой конкретной части:

  • #home {left:0px;width:46px;} — элемент расположен полностью слева и его ширина 46px
  • #home {background:url(img_navsprites.gif) 0 0;} — определяем фоновое изображение и его местонахождение (слева 0px, сверху 0px)
  • #prev {left:63px;width:43px;} — элемент сдвинут на 63px вправо (46px ширины #home + дополнительное место между элементами списка), его ширина 43px
  • #prev {background:url('img_navsprites. gif') -47px 0;} — определяем фоновое изображение в 47px справа (46px от изображения для #home + 1px от разделителя)
  • #next {left:129px;width:43px;} — элемент сдвинут на 129px вправо (#prev начинается на 63px + 43px от #prev + дополнительное место), и его ширина 43px
  • #next {background:url('img_navsprites.gif') -91px 0;} — определяем фоновое изображение в 91px справа (46px от изображения для #home + 1px от разделителя + 43px от изображения для #prev + 1px от разделителя)

Спрайты изображений — Эффект при наведении мыши

Теперь к нашему списку ссылок навигации добавим эффект при наведении мыши.

Стоит сказать, что псевдокласс :hover можно использовать с любыми элементами, а не только с ссылками.

Наше новое спрайтовое изображение («img_navsprites_hover.gif») содержит три изображения для навигации и три изображения для создания нужного эффекта:

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

Чтобы создать нужный эффект, достаточно к коду предыдущего примера добавить всего три строчки, а также заменить img_navsprites.gif на img_navsprites_hover.gif:

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Результат:

Объяснение примера:

  • #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} — для всех трех изображений для эффекта, мы определяем те же самые фоновые позиции, только смещенные на 45px вниз.

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

  • CSS-спрайты
  • О
  • Часто задаваемые вопросы
  • Новости

Спрайты CSS

Спрайты CSS позволяют объединять несколько изображений в один файл.

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

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

1: Загрузите свои изображения

Выберите до 20 файлов общим размером 8 МБ.

2: Выберите параметры

Тип выхода: PNG — рекомендуемый JPEGGIF Настройки JPEG Удаление артефактов JPEG: Качество JPEG: Другие настройки Префикс класса CSS: Отступы между изображениями: 0px1px2px3px4px5px10px20px (Это сделает ваш файл немного больше, но может предотвратить наложение изображений друг на друга)

3: Создайте свой спрайт

О

Автор: RoBorg

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

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

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

Этот инструмент создает:

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

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

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

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

Грег, он же RoBorg, — я профессиональный PHP-программист для Just Say Please.


Вы можете подписаться на меня в Твиттере

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

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

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

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

Являются ли загруженные мной изображения конфиденциальными?

Да.

Есть ли API?

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

Является ли этот проект открытым исходным кодом

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

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

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

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

Август 2017 г.

  • Улучшенный API

Май 2014 г.

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

Январь 2014 г.

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

июль 2011 г.

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

ноябрь 2010 г.

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

Генератор спрайтов CSS | GiftOfSpeed ​​

Выберите 2 или более изображений:

Выбранные вами изображения:

Сохранить как:

PNG гифка JPG


Линейка изображений:

Вертикальная Горизонтальный

Расстояние между изображениями:

пикселей




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

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

Как спрайты ускоряют мой сайт?

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

Для каких изображений следует использовать спрайты?

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

  1. Откройте свой веб-сайт в окне браузера и просмотрите исходный код (как HTML, так и CSS).
  2. Теперь найдите исходный код для всех файлов изображений (файлы png, jpg или gif), используемых на вашем веб-сайте, обычно для дизайна вашего веб-сайта.
  3. Теперь сохраните эти изображения на жесткий диск.
  4. Всегда исключайте фотографии, используемые для статей, или аналогичные изображения, которые используются на вашем сайте только один или два раза.

Как сделать спрайты CSS?

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

Как внедрить код CSS и HTML?

— Скопируйте код на вкладке CSS и вставьте его в скрипт CSS своего сайта.
— Отрегулируйте положение фона: координаты X и Y, чтобы расположить изображение именно в том месте, где вы хотите, чтобы оно отображалось на вашем веб-сайте.

No related posts.