Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Спрайты существуют не первый день. Разработчики игр активно используют этот инструмент, чтобы ускорять отображение анимации на экране. В этой статье пойдёт речь об использовании спрайтов для улучшения пользовательского опыта посетителей сайтов.</p>

2 <h2>Содержание</h2>

3 <ul><li><a>Что такое спрайты в CSS</a></li>

4 <li><a>CSS-спрайты: быстрый обзор возможностей</a></li>

5 <li><a>Преимущества использования спрайтов</a></li>

6 <li><a>Как правильно создавать таблицы спрайтов</a></li>

7 <li><a>Как правильно работать с CSS-спрайтами</a></li>

8 <li><a>Вместо заключения: присоединяйтесь к гигантам, которые используют CSS-спрайты</a></li>

9 </ul><h2>Что такое спрайты в CSS</h2>

10 <p>Спрайт - изображение, которое является частью сцены в игре. Несколько спрайтов объединяются в одно изображение, которое называется таблицей спрайтов (sprite sheet). После загрузки таблицы в память спрайты последовательно и быстро отображаются на экране. Это создаёт иллюзию анимации. Чтобы пользователь увидел на экране одну сцену, разработчик использует десятки или сотни разных спрайтов.</p>

11 <p><em>Пример таблицы спрайтов</em></p>

12 <p>Вот главная идея использования спрайтов в CSS: быстрее загрузить одно изображение и показывать его по частям, а не загружать несколько изображений и показывать их по очереди.</p>

13 <h2>CSS-спрайты: быстрый обзор возможностей</h2>

14 <p>CSS-спрайты - технология, которую разработчики применяют для оптимизации веб-страниц. Технология предполагает объединение нескольких небольших изображений с одинаковым разрешением в одно большое изображение, которое также называется таблицей спрайтов. Таблица спрайтов используется, когда нужно показывать пользователям отдельные элементы, которые являются частью большого изображения.</p>

15 <p>Обычно веб-разработчики включают в таблицу спрайтов логотипы, навигационные стрелки, кнопки и так далее. Такие элементы имеют одинаковое разрешение и часто используются на страницах сайта.</p>

16 <h3>Как спрайты помогают веб-разработчикам</h3>

17 <p>Чаще всего при создании сайтов разработчики хранят и используют изображения как отдельные файлы. Когда пользователь открывает страницу, браузер отправляет отдельный<a>HTTP-запрос</a>, чтобы загрузить и отобразить каждый файл. Это увеличивает время загрузки сайта, так как на странице может быть много отдельных изображений, например, кнопок, иконок, логотипов.</p>

18 <p><em>Преимущества спрайтов: один HTTP-запрос против шести</em></p>

19 <p>CSS-спрайты позволяют разработчикам объединять часто используемые маленькие изображения в одно большое. Благодаря этому браузер загружает один файл. Чтобы отобразить нужное маленькое изображение, используется смещение в большом изображении.</p>

20 <h2>Преимущества использования спрайтов</h2>

21 <p>Два основных преимущества использования спрайтов:</p>

22 <ol><li>Повышение скорости загрузки страниц. Изображения на странице становятся доступными, как только браузер загружает один файл: таблицу спрайтов.</li>

23 <li>Увеличение пропускной способности и снижение потребления ресурсов. CSS-спрайты не только улучшают опыт конечного пользователя сайта за счёт более быстрой загрузки страниц. Это технология<a>уменьшает нагрузку на сеть</a>за счёт снижения количества HTTP-запросов.</li>

24 </ol><h2>Как правильно создавать таблицы спрайтов</h2>

25 <p>При работе с отдельными изображениями разработчик использует тег <img> и при необходимости<a>добавляет стили с помощью CSS</a>. А при работе со спрайтами нужно уделить внимание двум специфическим вещам: созданию таблицы спрайтов и обеспечению доступа к конкретному элементу с помощью свойства background-position.</p>

26 <p>Чтобы создать таблицу спрайтов, разработчик должен объединить все необходимые элементы в одно изображение. Это можно сделать с помощью редакторов изображений, например, Photoshop или GIMP. Также эту задачу можно решить с помощью онлайн-генераторов CSS-спрайтов, о которых пойдёт речь ниже.</p>

27 <p>Когда таблица спрайтов готова, разработчик обеспечивает доступ к конкретным элементам. Для этого используются следующие атрибуты:</p>

28 <ul><li>width: ширина спрайта;</li>

29 <li>height: высота спрайта;</li>

30 <li>background: ссылка на таблицу спрайтов;</li>

31 <li>background-position: значение смещения в пикселях для доступа к нужной области таблицы спрайтов.</li>

32 </ul><p>Как отмечалось выше, таблицы спрайтов можно делать с помощью популярных редакторов изображений. Но есть более простые способы.</p>

33 <p>Первый: используйте онлайн-генераторы для работы с таблицами спрайтов, например,<a>CSS Sprite Generator</a>. Это бесплатный инструмент. К тому же он автоматически генерирует CSS-код, необходимый для доступа к отдельным элементам. Вы можете корректировать свойства, например, менять отступы и выравнивание.</p>

34 <p><em>Онлайн-генератор спрайтов</em></p>

35 <p>Второй способ: попробуйте Sprity. Если вы используете Grunt, Node или Gulp, установите соответствующий пакет. Sprity создаёт таблицы спрайтов в разных форматах, включая .png, .jpg и так далее.</p>

36 <p>Для<a>установки Sprity</a>используйте команду:</p>

37 <p>Для работы со Sprity в командной строке понадобится пакет<a>sprity-cli</a>.</p>

38 <h2>Как правильно работать с CSS-спрайтами</h2>

39 <p>В качестве примера используем таблицу спрайтов, изображённую на иллюстрации.</p>

40 <p><em>Таблица спрайтов</em></p>

41 <p>В таблице есть шесть иконок социальных сетей. В верхнем ряду иконки, которые пользователи видят по умолчанию. В нижнем ряду иконки, которые пользователь видит при наведении курсора.</p>

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

43 <p>Со спрайтами можно работать с помощью простых редакторов изображений, например, GIMP или MS Paint. Эти инструменты позволяют получить координаты курсора. Поэтому с их помощью можно определить величины x и y, необходимые для определения смещения.</p>

44 <p><em>Определяем x и y с помощью MS Paint или GIMP</em></p>

45 <p>Если у вас есть координаты левой верхней точки нужного спрайта, например, верхней иконки Instagram, вы можете получить доступ к нужному элементу с помощью CSS-кода.</p>

46 <p>В данном случае используются width и height 125px, так как иконки имеют такое разрешение. Чтобы получить доступ ко второй иконке в верхнем ряду, используем такой код.</p>

47 <p>Обратите внимание на значение background-position в примере выше. -128px 0px значит, что мы отступаем в таблице спрайтов по оси X на 128 пикселей влево с учётом отступа между спрайтами и на 0 пикселей по оси Y. Соответственно, для доступа к иконке Twitter из нижнего ряда надо указать background-position:-128px -128px;.</p>

48 <p>Таким способом можно получить доступ к каждому элементу таблицы спрайтов. Вот как выглядит HTML и CSS код целиком.</p>

49 <h5>Шаг 1: указываем нужный HTML-код</h5>

50 <p>В коде ниже мы просто добавляем ссылки на соответствующие ресурсы.</p>

51 <h5>Шаг 2: добавляем стили с помощью CSS</h5>

52 <p>Сначала добавляем стили для общего для всех иконок класса.</p>

53 <h5>Шаг 3: получаем доступ к отдельным элементам верхнего ряда.</h5>

54 <h5>Шаг 4: получаем доступ к элементам нижнего ряда</h5>

55 <h2>Вместо заключения: присоединяйтесь к гигантам, которые используют CSS-спрайты</h2>

56 <p>В число таких гигантов входят Google, Amazon, Facebook и другие компании с громкими именами. Они активно используют спрайты, чтобы уменьшить количество HTTP-запросов на сессию для одного пользователя. Это очень важно для посещаемых сайтов, на которые заходит много пользователей одновременно.</p>

57 <p><em>Адаптированный перевод статьи<a>How to Implement CSS Sprites to Enhance Web-Pages</a>. Мнение администрации Хекслета может не совпадать с мнением автора оригинальной публикации.</em></p>