CSS sprite sheet generátor

Hogyan készíts sprite sheetet

1. Húzd a képeidet a megjelölt területre, vagy kattints rá, és válaszd ki őket. A PNG, SVG, WebP, JPG és a böngésződ által olvasható többi formátum elfogadott, legfeljebb 500 képig. Minden fájl megjelenik a Képek listában a méretével; az × gomb egy képet eltávolít, az Összes kép eltávolítása pedig kiüríti a listát.
2. Válassz Elrendezést: Rács, Tömörített (a legkisebb lap), Vízszintes sáv vagy Függőleges sáv. Rács esetén az Oszlopok (0 = automatikus) az oszlopok számát adja meg.
3. Állítsd be a sprite-ok közötti Belső margó (px) értékét (alapértelmezés szerint 2), és jelöld be a Kettő hatványa méret (256, 512, 1024…) opciót, ha a motorod vagy a GPU-d igényli.
4. Válaszd ki az Adatfájl típusát: CSS (background-position osztályok), JSON (képkockatérkép) vagy CSS és JSON. Módosítsd a Fájlnév és a CSS-osztály előtagja értékét (mindkettő alapértelmezés szerint „sprite”).
5. Nézd meg az előnézetet, a Lap mérete és a Felhasznált hely értékét, majd kattints a ZIP letöltése (PNG + adatok) vagy a Csak PNG letöltése gombra. A Generált kód közvetlenül is másolható.

A képeket a böngésződben dekódolja, semmi nem kerül feltöltésre. A saját szélesség és magasság nélküli SVG-t úgy rasztereli, hogy a hosszabb oldala 256 px legyen.

Az elrendezés kiválasztása

• A Rács minden képnek a legnagyobb kép méretű cellát adja. Automatikus oszlopoknál a rács nagyjából négyzetes. Egyszerű és kiszámítható, és ideális, ha minden sprite egyforma méretű, például egy csempekészletnél.
• A Tömörített (a legkisebb lap) polcos pakolást használ: a képeket a legmagasabbtól kezdve rendezi, és balról jobbra, sorokban helyezi el. Az eszköz sok lapszélességet kipróbál, és a legkisebb területűt tartja meg, figyelembe véve a kettő hatványára kerekítést, ha az opció be van kapcsolva. Vegyes méretű ikonokhoz a legjobb.
• A Vízszintes sáv és a Függőleges sáv egyetlen sorba vagy oszlopba teszi a képeket, a hozzáadásuk sorrendjében. Ezt várja sok animációlejátszó a képkockáktól.

A lap nem lehet nagyobb oldalanként 16 384 px-nél vagy kb. 16,7 megapixelnél, ez a böngészők által megrajzolható határ.

A CSS használata

A CSS egy alaposztályt tartalmaz, amely a lapot background-image-ként és no-repeat értékkel állítja be, majd sprite-onként egy osztályt a fájlnévből képezve: a home.png sprite-home lesz. A nevek kisbetűsek, az ékezetek el vannak távolítva, a többi karakter kötőjellé alakul, az ismétlődések pedig -2, -3 végződést kapnak.

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

Minden sprite-osztály beállítja a width, height értéket és egy negatív eltolású background-position értéket. Az x = 40, y = 20 helyen lévő sprite background-position: -40px -20px értéket kap: az egész lap 40 px-szel balra és 20 px-szel felfelé tolódik az elemen belül, így csak az a sprite látszik át az elem dobozán. A belső margó megakadályozza, hogy a szomszédos sprite-ok átszivárogjanak az oldal nagyításakor vagy a textúra szűrésekor.

Nagy DPI-jű képernyők: rajzold a képeidet a megjelenítési méretük kétszeresére, generáld le a lapot, majd add az alaposztályhoz a lap méretének felére állított background-size értéket, és felezd meg a szélességeket, magasságokat és eltolásokat. Az eszköz ezt nem generálja; kézi finomhangolás.

Hasznosak még a sprite-ok HTTP/2 mellett?

A sprite-okat a HTTP-kérések megspórolására találták ki. A HTTP/2 multiplexelésével sok kis fájl majdnem olyan gyorsan betöltődik, mint egy, ezért a weboldalak nyeresége sokkal kisebb, a skálázható ikonokhoz pedig gyakran jobbak az SVG-ikonok vagy az ikonbetűtípusok. A sprite sheetek a 2D-s játékok és animációs képkockák szabványos eszközei maradnak: egy textúra kevesebb GPU-textúraváltást és egy betöltendő fájlt jelent.