CSS sprite lapu ģenerators

Kā izveidot sprite lapu

1. Ievelciet attēlus nolaišanas zonā vai noklikšķiniet uz tās, lai tos izvēlētos. Tiek pieņemti PNG, SVG, WebP, JPG un citi formāti, ko spēj nolasīt jūsu pārlūkprogramma, līdz 500 attēliem. Katrs fails parādās sarakstā Attēli ar savu izmēru; poga × noņem vienu attēlu, bet Noņemt visus attēlus iztukšo sarakstu.
2. Izvēlieties Izkārtojums: Režģis, Blīvi sapakots (mazākā lapa), Horizontāla josla vai Vertikāla josla. Ar Režģis lauks Kolonnas (0 = automātiski) nosaka kolonnu skaitu.
3. Iestatiet Atkāpe (px) starp spraitiem (pēc noklusējuma 2) un atzīmējiet Divnieka pakāpes izmērs (256, 512, 1024…), ja to prasa jūsu dzinējs vai GPU.
4. Izvēlieties Datu fails: CSS (background-position klases), JSON (kadru karte) vai CSS un JSON. Pielāgojiet Faila nosaukums un CSS klases prefikss (abi pēc noklusējuma ir „sprite“).
5. Pārbaudiet priekšskatījumu, Lapas izmērs un Izmantotā vieta, pēc tam noklikšķiniet uz Lejupielādēt ZIP (PNG + dati) vai Lejupielādēt tikai PNG. Ģenerētais kods ir arī tieši nokopējams.

Attēli tiek atkodēti jūsu pārlūkprogrammā, un nekas netiek augšupielādēts. SVG bez sava platuma un augstuma tiek rasterizēts ar garāko malu 256 px.

Izkārtojuma izvēle

• Režģis katram attēlam dod šūnu, kas ir tikpat liela kā lielākais attēls. Ar automātiskām kolonnām režģis ir aptuveni kvadrātisks. Tas ir vienkāršs un paredzams, un ideāls, ja visi spraiti ir vienāda izmēra, piemēram, flīžu komplektā.
• Blīvi sapakots (mazākā lapa) izmanto plauktu pakošanu: attēli tiek sakārtoti no augstākā uz zemāko un novietoti rindās no kreisās uz labo. Rīks izmēģina daudzus lapas platumus un patur to, kuram ir mazākais laukums, ņemot vērā noapaļošanu līdz divnieka pakāpei, ja šī opcija ir ieslēgta. Vislabāk der dažāda izmēra ikonām.
• Horizontāla josla un Vertikāla josla novieto attēlus vienā rindā vai kolonnā tādā secībā, kādā tos pievienojāt. To gaida daudzi animācijas atskaņotāji kadriem.

Lapa nedrīkst pārsniegt 16 384 px katrā malā vai aptuveni 16,7 megapikseļus – ierobežojumu, ko spēj uzzīmēt pārlūkprogrammas.

CSS izmantošana

CSS satur bāzes klasi ar lapu kā background-image un no-repeat, pēc tam vienu klasi katram spraitam, nosauktu pēc tā faila: home.png kļūst par sprite-home. Nosaukumi tiek pārvērsti mazajos burtos, diakritiskās zīmes tiek noņemtas, citas rakstzīmes kļūst par defisēm, bet dublikātiem pievieno -2, -3.

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

Katra sprita klase iestata width, height un background-position ar negatīvām nobīdēm. Spraitam pie x = 40, y = 20 tiek iestatīts background-position: -40px -20px: visa lapa elementā tiek nobīdīta par 40 px pa kreisi un 20 px uz augšu, tāpēc cauri elementa rāmim redzams tikai šis spraits. Atkāpe neļauj kaimiņu spraitiem ieplūst, kad lapa tiek tuvināta vai tekstūra tiek filtrēta.

Augstas izšķirtspējas ekrāni: zīmējiet attēlus divreiz lielākus par to attēlošanas izmēru, ģenerējiet lapu, pēc tam bāzes klasei pievienojiet background-size, kas iestatīts uz pusi no lapas izmēra, un uz pusi samaziniet platumus, augstumus un nobīdes. Rīks to neģenerē; tā ir manuāla korekcija.

Vai spraiti joprojām ir noderīgi ar HTTP/2?

Spraitus izgudroja, lai ietaupītu HTTP pieprasījumus. Ar HTTP/2 multipleksēšanu daudzi mazi faili ielādējas gandrīz tikpat ātri kā viens, tāpēc ieguvums vietnēm ir daudz mazāks, un mērogojamām ikonām bieži labāk der SVG ikonas vai ikonu fonti. Sprite lapas joprojām ir standarts 2D spēlēm un animācijas kadriem: viena tekstūra nozīmē mazāk GPU tekstūru pārslēgšanu un vienu ielādējamu failu.