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

Как да направите спрайт лист

1. Пуснете изображенията в зоната за плъзгане или щракнете върху нея, за да ги изберете. Приемат се PNG, SVG, WebP, JPG и другите формати, които браузърът ви може да чете, до 500 изображения. Всеки файл се появява в списъка Изображения със своя размер; бутонът × премахва едно изображение, а Премахни всички изображения изчиства списъка.
2. Изберете Подредба: Мрежа, Уплътнена (най-малък лист), Хоризонтална лента или Вертикална лента. При Мрежа Колони (0 = автоматично) задава броя на колоните.
3. Задайте Отстъп (px) между спрайтовете (по подразбиране 2) и отметнете Размер, степен на двойката (256, 512, 1024…), ако вашият енджин или графичен процесор го изисква.
4. Изберете Файл с данни: CSS (класове с background-position), JSON (карта на кадрите) или CSS и JSON. Настройте Име на файла и Префикс на CSS класовете (и двете са „sprite“ по подразбиране).
5. Проверете прегледа, Размер на листа и Използвано място, после щракнете върху Изтегли ZIP (PNG + данни) или Изтегли само PNG. Генериран код може да се копира и директно.

Изображенията се декодират във вашия браузър и нищо не се качва на сървър. SVG без собствена ширина и височина се растеризира с по-дългата страна 256 px.

Избор на подредба

• Мрежа дава на всяко изображение клетка с размера на най-голямото изображение. При автоматични колони мрежата е приблизително квадратна. Проста и предвидима е и е идеална, когато всички спрайтове са с еднакъв размер, като набор от плочки.
• Уплътнена (най-малък лист) използва рафтово подреждане: изображенията се сортират първо по височина, най-високите най-напред, и се поставят отляво надясно по редове. Инструментът пробва много ширини на листа и запазва тази с най-малка площ, като отчита закръгляването до степен на двойката, когато опцията е включена. Най-подходящо за икони с различни размери.
• Хоризонтална лента и Вертикална лента поставят изображенията в един ред или една колона по реда, в който сте ги добавили. Това очакват много плейъри за анимации при кадрите.

Листът не може да надвишава 16 384 px по страна или около 16,7 мегапиксела, границата, която браузърите могат да нарисуват.

Използване на CSS

CSS съдържа базов клас със спрайт листа като background-image и no-repeat, после по един клас за всеки спрайт, наименуван по файла му: home.png става sprite-home. Имената се превръщат в малки букви, диакритиките се премахват, другите символи стават тирета, а дублиращите се получават -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Всеки клас на спрайт задава width, height и background-position с отрицателни отмествания. Спрайт при x = 40, y = 20 получава background-position: -40px -20px: целият лист се измества на 40 px наляво и 20 px нагоре в елемента, така че само този спрайт се вижда през рамката на елемента. Отстъпът пречи на съседните спрайтове да се просмукват, когато страницата е увеличена или текстурата е филтрирана.

Екрани с висока гъстота (high-DPI): нарисувайте изображенията си в двоен размер спрямо показвания, генерирайте листа, после добавете към базовия клас background-size, зададен на половината от размера на листа, и разполовете ширините, височините и отместванията. Инструментът не го генерира; това е ръчна корекция.

Все още ли са полезни спрайтовете с HTTP/2?

Спрайтовете са измислени, за да спестяват HTTP заявки. С мултиплексирането на HTTP/2 много малки файлове се зареждат почти толкова бързо, колкото един, затова печалбата за уебсайтовете е много по-малка, а SVG иконите или шрифтовете с икони често са по-добри за мащабируеми икони. Спрайт листовете остават стандарт за 2D игри и кадри на анимации: една текстура означава по-малко превключвания на текстури в графичния процесор и един файл за зареждане.