CSS-spraitilehe generaator

Kuidas spraitilehte teha

1. Lohista oma pildid tõmbealale või klõpsa sellel nende valimiseks. Aktsepteeritakse PNG-, SVG-, WebP-, JPG- ja teisi vorminguid, mida sinu brauser loeb, kuni 500 pilti. Iga fail ilmub loendisse Pildid oma suurusega; nupp × eemaldab ühe pildi ja Eemalda kõik pildid tühjendab loendi.
2. Vali Paigutus: Ruudustik, Pakitud (väikseim leht), Rõhtriba või Püstriba. Valikuga Ruudustik määrab Veerge (0 = automaatne) veergude arvu.
3. Määra spraitide vaheline Ääris (px) (vaikimisi 2) ja märgi Kahe astme suurus (256, 512, 1024…), kui sinu mootor või GPU seda vajab.
4. Vali Andmefail: CSS (background-position klassid), JSON (kaadrite kaart) või CSS ja JSON. Kohanda Failinimi ja CSS-klassi eesliide (mõlemad vaikimisi „sprite“).
5. Vaata üle eelvaade, Lehe suurus ja Kasutatud ruum, seejärel klõpsa Laadi alla ZIP (PNG + andmed) või Laadi alla ainult PNG. Loodud kood on ka otse kopeeritav.

Pilte dekodeeritakse sinu brauseris ja midagi ei laadita üles. SVG, millel pole oma laiust ja kõrgust, rasteriseeritakse nii, et selle pikem külg on 256 px.

Paigutuse valimine

• Ruudustik annab igale pildile suurima pildi suuruse lahtri. Automaatsete veergudega on ruudustik ligikaudu ruudukujuline. See on lihtne ja etteaimatav ning ideaalne, kui kõik spraidid on sama suured, näiteks plaadikomplektis.
• Pakitud (väikseim leht) kasutab riiulipakkimist: pildid sorteeritakse kõrgeimast alates ja paigutatakse vasakult paremale ridadesse. Tööriist proovib paljusid lehe laiusi ja jätab alles väikseima pindalaga; kahe astme ümardamist võetakse arvesse, kui see valik on sees. Parim eri suurusega ikoonide jaoks.
• Rõhtriba ja Püstriba panevad pildid ühte ritta või veergu sinu lisamise järjekorras. Seda ootavad paljud animatsioonipleierid kaadrite jaoks.

Leht ei tohi ületada 16 384 px külje kohta ega umbes 16,7 megapikslit, mis on brauserite joonistamispiir.

CSS-i kasutamine

CSS sisaldab põhiklassi, mille background-image on leht ja no-repeat, seejärel ühte klassi iga spraidi kohta, mis on nimetatud faili järgi: home.png muutub klassiks sprite-home. Nimed tehakse väiketähtedeks, diakriitikud eemaldatakse, muud märgid muutuvad sidekriipsudeks ja duplikaadid saavad -2, -3.

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

Iga spraidiklass määrab width, height ja background-position negatiivsete nihetega. Sprait kohal x = 40, y = 20 saab background-position: -40px -20px: kogu leht nihutatakse elemendi sees 40 px vasakule ja 20 px üles, nii et elemendi kasti kaudu paistab ainult see sprait. Ääris hoiab naabersprite’id sisse imbumast, kui lehte suurendatakse või tekstuuri filtreeritakse.

Kõrge DPI-ga ekraanid: joonista oma pildid kaks korda suuremana kui kuvasuurus, loo leht, seejärel lisa põhiklassile background-size, mis on pool lehe suurusest, ja poolita laiused, kõrgused ning nihked. Tööriist ei loo seda; see on käsitsi tehtav kohandus.

Kas spraidid on HTTP/2 ajastul veel kasulikud?

Spraidid leiutati HTTP-päringute säästmiseks. HTTP/2 multipleksimisega laadivad paljud väikesed failid peaaegu sama kiiresti kui üks, seega on veebilehtede võit palju väiksem ja skaleeritavate ikoonide jaoks on sageli parem SVG või ikoonifont. Spraitilehed jäävad 2D-mängude ja animatsioonikaadrite standardiks: üks tekstuur tähendab vähem GPU tekstuuri vahetusi ja üht laaditavat faili.