CSS Sprite: координати растрового спрайту

CSS Sprite: онлайн-інструмент для координат растрового спрайту

CSS Sprite допомагає швидко зчитати точні координати окремих іконок усередині растрового спрайт-аркуша й одразу отримати готовий CSS. Завантажте зображення, наведіть курсор на потрібну іконку — інструмент сам підсвітить її межі — і клікніть, щоб скопіювати background-position, width та height.

Це сучасна альтернатива класичному Sprite Cow: окрім PNG тут підтримується формат WebP, а множник пікселів можна виставити не лише 2×, а й 3× та 4× — для спрайтів під екрани високої щільності.

Що вміє інструмент

• відкриття PNG- і WebP-спрайтів повністю у браузері, без завантаження на сервер;
• автоматичне визначення меж іконки по альфа-каналу під час наведення;
• виділення довільної області мишкою з обрізанням прозорих країв;
• множники 1×, 2×, 3× і 4× з коректним background-size для retina;
• піпетка кольору тла, масштабування перегляду та копіювання CSS одним кліком.

Коли потрібен такий інструмент

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

Як працює визначення меж іконки

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

Питання про CSS Sprite

Як отримати CSS-координати іконки?
Завантажте спрайт, наведіть курсор на іконку, щоб побачити її межі, і клікніть. Зʼявиться готовий CSS із background-position, width і height, який копіюється однією кнопкою.

Чи підтримується WebP?
Так. Інструмент відкриває і PNG, і сучасні WebP-спрайти — на відміну від старих сервісів, що вміли лише PNG. Браузер декодує зображення, а координати зчитуються попіксельно по альфа-каналу.

Навіщо множники 2×, 3×, 4×?
Якщо спрайт намальований у подвійній, потрійній чи четвертій щільності, виберіть відповідний множник. Координати поділяться на нього, а у CSS зʼявиться background-size для коректного відображення на retina.

Це ще один інструмент розділу — усі утиліти зібрані на сторінці онлайн-інструментів.