Вступ до CSS Image Sprites: їх легко вивчити і цікаво знати

Спрайт-зображення є тут з 1970-х років. Їх використовували для перших комп’ютерних анімацій на Atari та інших консолях. Із часом вони використовувались все менше і менше розробниками, які бажали вдосконаленої (читай: реалістичної) графіки для 3D та віртуальної реальності.

Однак за останні роки вони повернулися.

Спрайт - це термін комп’ютерної графіки для двовимірного растрового зображення, інтегрованого у велику сцену.

За останні кілька років Facebook, Twitter, Instagram та багато інших платформ соціальних медіа зросли як шалені. З ростом з’явилася потреба їх оптимізувати, де це можливо, і зменшувати розмір запитів сервера. Саме тоді спрайти CSS-образів повернулися до загального потоку.

Для такої платформи, як Facebook, яка налічує понад 1 мільярд користувачів, показ ікон, зображень та подібного вмісту вимагає декількох запитів сервера. Запити надмірно перевантажують трафік.

То що ви робите для зменшення запитів на сервер та пропускної здатності? Зверніться до спрайтів зображень CSS.

Замість того, щоб робити запит на зображення профілю, зображення профілю друга, ескізи альбому тощо, спрайти дозволяють використовувати одне зображення, що означає лише один запит. Ви можете маніпулювати цим зображенням, щоб відображати ці зображення як частини одного більшого зображення.

Давайте подивимось приклад із прапорами:

А тепер давайте подивимось, як це працює:

Як ви можете бачити в наведеному вище коді, ми створили базу, яка складається з трьох div, де кожен div буде носієм спрайтів.

Спочатку ми вибрали div з ідентифікатором first. Наш div матиме розмір висоти та ширини, який буде показано на нашій сторінці. Як фон ми завантажимо зображення із URL-адресою (“//i.postimg.cc/R0N7nkH9/flags.png") .

Наступне - зменшити / збільшити наше фонове зображення із розміром фону: 1400px. (Ми можемо використовувати фактичний розмір пікселя, відсоток, em або rem.) Цей параметр дозволить нам «збільшувати» зображення до точки, де буде відображатися лише певна частина зображення.

Нарешті, два параметри, які йдуть після фону:

URL (“// i.postimg.cc/R0N7nkH9/flags.png"), перемістить частину основного зображення, яка буде видно вздовж осей X і Y. Це означає, що в цьому випадку фон:

URL (“// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; ми покажемо ту частину, яка зміщена зверху зображення на 87 пікселів зверху та 86 пікселів зліва .

Перше число ( -86px ) означає вісь X, де негатив означає переміщення зліва направо, а позитив - перехід справа наліво. Другі числа (-87px) використовуються для зміщення зверху вниз, де застосовуються перевернуті правила, позитивне число означає просування знизу вгору, а негативне, звичайно, зверху вниз.

Як ви можете бачити на оригінальному зображенні, прапор, який ми отримали (Боснія), справді другий зверху та другий зліва.

Досить добре? Добре, продовжимо.

Тепер заповнимо div з ідентифікатором секунди. Застосовуватимуться ті самі правила налаштування, і єдиною зміною буде те, що в цьому випадку ми залишимось на початковій осі X (0 пікселів), а напрямок Y буде рухатися від нижньої частини до верхньої (89 пікселів). Знову ж таки, якщо ви перевірите оригінальне зображення, ви можете побачити, що (Узбекистан) спочатку знизу, а спочатку зліва.

І останнє, але не менш важливе ...

Так, нарешті, ми заповнюємо останній div ідентифікатором третього. Правила однакові, і якщо ви здогадалися, що ми рухалися знизу до верху, то це правда.

Тепер момент істини ...

У наведеному вище випадку ми рухалися вздовж осей X та Y, щоб показати певні частини зображення прапорами. Праворуч ліворуч і вниз ми отримали Боснію (вісь X), знизу і ліворуч (вісь Y) - Таїланд та Узбекистан. Як ви вже бачили, ми використовуємо лише одне зображення, а це означає лише один запит на зображення.

Важливо знати, що коли ви будуєте спрайти, це базове зображення повинно мати однакові частини зображень для власної зручності. Як у цьому випадку, коли ми рухаємось вліво та вправо, зверху та знизу, за розміром порції плюс пробіл. Узбекистан (89 пікселів) та Таїланд (178 пікселів) мають різницю у 89 пікселів, що є їхнім фактичним розміром (87 пікселів) плюс пробіли (1 піксель + 1 піксель).

Так, ви також можете робити анімацію.

Для того, щоб зробити цей стиль солодкої, крутої анімації старої школи, нам потрібні лише властивості анімації CSS. У цьому випадку ми переміщали оригінальне зображення вздовж осі X, і ми отримуємо цю анімацію старого стилю. Повірте зі спрайтами, тут немає меж.

Це так просто :)

Сподіваюся, вам сподобалось читати цю статтю.

Слідкуйте за новинами…