Концепция спрайтов существует уже некоторое время. Это один из наиболее часто используемых в игровой индустрии методов для ускорения процесса отображения анимации на экране. В этой статье мы особенно рассмотрим, как этот метод может помочь нам улучшить взаимодействие с пользователем на веб-страницах с помощью CSS-спрайтов в следующем порядке:
- Что такое спрайт?
- Что такое CSS Sprite - краткий обзор?
- Пример того, как это помогает в веб-разработке?
- Преимущества использования CSS-спрайтов
- Что должен делать разработчик при работе со спрайтами CSS?
- Как создать таблицу спрайтов CSS?
- Как работать с CSS-спрайтами?
- Компании, использующие CSS-спрайты
Что такое спрайт?
Спрайт - это отдельное изображение, которое является частью большой сцены в игре. Затем несколько спрайтов объединяются в большое изображение, называемое листом спрайтов. После того, как таблица спрайтов загружена в память, различные спрайты визуализируются в быстрой последовательности, чтобы создать иллюзию анимации. Это делается одновременно для десятков или сотен различных спрайтов, чтобы создать сцену в игре.
Основная идея состоит в том, что гораздо быстрее загружать изображение и отображать его часть там, где это необходимо, по сравнению с загрузкой нескольких изображений и их отображением.
Что такое CSS Sprite: краткий обзор?
CSS-спрайт - это метод, который часто используется веб-разработчиками для оптимизации производительности веб-страниц. В этом методе несколько меньших изображений, обычно одинаковых размеров, объединяются в одно большое изображение, называемое лист спрайтов или набор плитки . Затем этот лист спрайтов используется для отображения отдельных элементов там, где они нам нужны.
Обычно такие элементы, как логотипы, стрелки навигации, кнопки, включаются в таблицу спрайтов, поскольку они почти одинакового размера и часто используются на веб-странице.
Пример того, как это помогает в веб-разработке?
Как правило, при разработке веб-страниц изображения сохраняются и используются как отдельные файлы. Итак, когда пользователь открывает веб-страницу, браузер должен сделать HTTP-запрос для каждого из этих файлов, загрузить их отдельно и отобразить их. Это приводит к увеличению времени загрузки страницы, поскольку конкретная веб-страница может иметь большое количество меньших изображений, таких как кнопки, значки, логотипы.
CSS-спрайты помогают разработчикам объединить эти часто используемые маленькие изображения в одно большое изображение. После этого браузер должен загрузить только один файл, который затем используется дляотобразить нужный раздел, сместив изображение.
Java найти наибольшее число в массиве
Преимущества использования CSS-спрайтов
Есть два основных преимущества использования CSS-спрайтов перед обычными изображениями:
Более быстрая загрузка страницы: Увеличивает время загрузки страницы, так как изображения, используемые на веб-странице, появляются сразу после загрузки листа.
Большая пропускная способность и меньшее использование ресурсов: Этот метод не только улучшает взаимодействие с конечным пользователем, ускоряя загрузку страницы, но ино это также снижает перегрузку сети, поскольку выполняется меньшее количество HTTP-запросов.
Что должен делать разработчик при работе со спрайтами CSS?
При работе с отдельными изображениями разработчик может просто работать с HTML-тегом. и при необходимости стилизуйте его в CSS. Но при работе со спрайтами CSS разработчик должен делать две конкретные вещи:
- Создание листа спрайтов
Если при разработке веб-страницы разработчик решает использовать CSS-спрайты, он / она должен сначала создать таблицу спрайтов, объединив все желаемые элементы, такие как кнопки, логотипы и т. Д., В виде сетки. Это можно сделать с помощью любой программы для редактирования изображений, например Photoshop или Gimp. Также доступно множество онлайн-инструментов, которые помогут вам создать таблицу спрайтов. Эти инструменты обсуждаются далее в этой статье.
- Доступ к определенному элементу спрайта с помощью CSS background-position свойство
Когда таблица спрайтов готова, разработчик должен использовать атрибуты CSS для доступа к различным частям таблицы.
- ширина: Ширина спрайта
- рост: Высота спрайта
- задний план: Ссылка на таблицу спрайтов
- Фоновая позиция: Значения смещения (в пикселях) для доступа только к необходимой части листа спрайтов
Как создать таблицу спрайтов CSS?
Вы можете использовать любое программное обеспечение для редактирования изображений, чтобы упорядочить ваши меньшие изображения в сетку, но ниже обсуждаются два более простых метода:
1. Инструмент для создания онлайн-таблиц спрайтов
ССЫЛКА НА САЙТ: toptal.com/developers/css/sprite-generator/
Этот инструмент не только бесплатный, но и предоставляет вам необходимый код CSS, который можно использовать при обращении к таблице спрайтов. Кроме того, вы можете поиграть с различными свойствами, такими как отступы между элементами и изменение их выравнивания.
2. Создание таблицы спрайтов с помощью Sprity
Если вы используете Grunt, Node или Gulp, вы можете установить пакет Sprity, который поможет вам создать лист спрайтов в различных форматах, таких как PNG, JPG и т. Д.
Во-первых, вам нужно будет установить Sprity, используя:
npm установить sprity -g
Затем, чтобы создать лист спрайтов, используйте следующую команду:
sprity ./output-directory/ ./input-directory/*.png
Как работать с CSS-спрайтами?
В этом примере мы будем использовать следующий лист спрайтов:
Как вы можете видеть на изображении выше, шесть значков (Instagram, Twitter и Facebook) расположены в виде сетки. В первой строке у нас нормальное состояние, а во второй строке у нас есть их состояние наведения (изображение, которое появляется, когда мы наводим на них курсор мыши).
Если вы создали лист спрайтов с помощью инструментов, которые мы обсуждали выше, тогда вы уже знаете смещения, необходимые в CSS, но если вы использовали какой-то другой инструмент или вам просто дали какой-то лист спрайтов, тогда не волнуйтесь, мы обсудим метод, который поможет получить смещения для необходимого элемента.
Теперь рассмотрим очень простой способ получить требуемые смещения для каждого из шести значков с помощью MS Paint. Возможно, это не идеальное решение для работы со спрайтами, но, поскольку в нем есть функция, которая предоставляет координаты курсора мыши, его можно использовать для получения требуемых координат X и Y.
Сначала откройте изображение листа спрайтов (сетка, содержащая все изображения меньшего размера) и наведите курсор мыши на верхний левый угол спрайта, который вы хотите захватить.
Как только у вас есть координаты верхней левой точки вашего спрайта (верхнее левое изображение Instagram), вы можете отображать этот конкретный спрайт везде, где это необходимо, используя код CSS:
фон: url ('img_sprites.png')
фоновая позиция: 0 0
ширина: 125 пикселей
высота: 125 пикселей
Мы используем ширину и высоту 125 пикселей, так как наши значки имеют этот размер. Чтобы получить следующее изображение (Twitter) в той же строке, мы используем следующий код:
фон: url ('img_sprites.png')
background-position: -128px 0px
ширина: 125 пикселей
высота: 125 пикселей
Обратите внимание на атрибут background-position в приведенном выше фрагменте. (-128px, 0) означает, что мы смещаем наш лист спрайтов влево на 128 пикселей (с учетом заполнения между элементами) и 0 пикселей по оси Y. Если бы мы получили доступ к значку наведения в твиттере, наш атрибут background-position был бы таким:
background-position: -128px -128px
Таким образом, теперь мы можем получить доступ к каждому компоненту нашей таблицы спрайтов с помощью CSS. Давайте рассмотрим полный код HTML и CSS, чтобы узнать, как это сделать.
Шаг 1: Написание необходимого HTML-кода
В приведенном ниже коде мы просто добавляем три ссылки. Также мы свяжем наш HTML с таблицей стилей (screen.css).
Шаг 2: Написание необходимого CSS. Сначала мы стилизуем наш общий класс значков. Здесь вы можете видеть, что мы ссылаемся на созданный нами спрайт-лист.
/ * Класс общего значка * /
span.icon ссылка,
span.icon а: посетил{
дисплей:блокировать
отступ текста:-9999 пикселей
С ++ код сортировки слиянием
фоновая картинка: url (./ img_sprites.png)
фон-повтор:нет повторения
}
Шаг 3: Получение отдельных значков из таблицы спрайтов с использованием смещений.
/ * Значок Instagram * /
span.instagram ссылка,
span.instagram а: посетил{
ширина:125 пикселей
рост:125 пикселей
k означает набор данных примера кластеризации
фоновая позиция:0 0
}
/ * Значок Twitter * /
span.twitter ссылка,
span.twitter а: посетил{
ширина:125 пикселей
рост:125 пикселей
фоновая позиция:-128 пикселей 0
}
/ * Значок Facebook * /
span.facebook ссылка,
span.facebook а: посетил{
ширина:125 пикселей
рост:125 пикселей
фоновая позиция:-257 пикселей 0
}
Шаг 4: Получение значков при наведении из таблицы спрайтов с использованием смещений.
span.instagram а: парение{фоновая позиция:0 -128 пикселей}
span.twitter а: парение{фоновая позиция:-128 пикселей -128 пикселей}
span.facebook а: парение{фоновая позиция:-255 пикселей -128 пикселей}
Компании, использующие CSS-спрайты
Многие крупные имена в отрасли используют CSS-спрайты для улучшения отзывчивости своих веб-сайтов. Такие компании, как Google, Facebook, Amazon, широко используют этот метод, так как он помогает им уменьшить количество HTTP-запросов за сеанс для конкретного пользователя. Это огромное преимущество, если учесть, что эти компании обслуживают миллионы клиентов в любой момент.
Теперь, когда вы знаете, что такое CSS-спрайты и как с ними работать, вы на один шаг ближе к изучению CSS. Такие концепции, как спрайты, меняют правила игры в наше время, поскольку для разработчиков стало чрезвычайно важно извлекать из веб-страницы все, что нужно для повышения производительности.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «HTML-изображения», и мы свяжемся с вами.