---
title: "Ustvarjalnik CSS sprite – ikone na en list, brezplačno"
description: "Več ikon spakirajte na en prozoren list sprite PNG in dobite razrede CSS ter zemljevid JSON vseh sličic, poimenovanih po vaših datotekah. Do 50 ikon."
url: "https://imagecompressor.si/sl/css-sprite-generator"
lang: "sl"
---

# Ustvarite list CSS sprite

Ikone združite v eno sliko in za vsako dobite razred CSS, pripravljen za uporabo na strani ali v igri.

## Kako deluje

1. **Dodajte slike** Povlecite in spustite, prilepite ali izberite datoteke. Naložijo se prek šifrirane povezave.
2. **Izberite kakovost ali ciljno velikost** Uporabite drsnik kakovosti ali povejte natančno, koliko KB ali MB potrebujete.
3. **Prenesite** Shranite posamezne datoteke ali vse naenkrat kot ZIP.

Stran s štiridesetimi majhnimi ikonami lahko naredi štirideset zahtev, preden se umiri. List sprite jih vse postavi na eno prozorno sliko, zato brskalnik prenese eno samo datoteko, vsaka ikona pa se pokaže tako, da se ozadje premakne na njeno mesto. Ista zamisel na eno teksturo spakira sličice lika v igri ali ploščice zemljevida.

Dodajte ikone, do petdeset, v katerem koli formatu, ki ga beremo: PNG, SVG, WebP in drugih. Vsaka obdrži svojo velikost in se spakira v vrste, najvišje najprej, z izbranim razmikom med njimi, da se robovi nikoli ne zlijejo. Rezultat pokaže spakiran list in CSS: en osnovni razred z listom in en razred za vsako ikono z njeno širino, višino in položajem, poimenovan po datoteki.

ZIP vsebuje sprite.png, sprite.css in sprite.json, zemljevid vseh sličic za igralne pogone in skripte. Ikone se obdelajo na našem strežniku in izbrišejo, ko je list narejen.

## Uporaba CSS

sprite.png postavite ob slog in vključite sprite.css. Prazen span z obema razredoma, na primer icon in icon-search, nato pokaže to ikono v njeni velikosti. Če je icon na vašem spletnem mestu že uporabljen, spremenite predpono; razredi ji sledijo.

Po vsaki spremembi ikon list znova naredite in zamenjajte obe datoteki skupaj.

## Poimenovanje datotek

Imena razredov nastanejo iz imen datotek, z malimi črkami, presledki in znaki pa postanejo vezaji: Search Button.png postane icon-search-button. Dve datoteki z enakim imenom dobita številko. Če želite določena imena razredov, datoteke preimenujte, preden jih dodate.

## Ostre ikone na zaslonih visoke ločljivosti

Za ostre ikone na telefonih in prenosnikih z gostimi zasloni ikone naredite v dvakratni velikosti, kot jih prikazujete, sestavite sprite in v CSS nastavite background-size na polovico širine lista. Ikone SVG dajo najčistejši rezultat, saj se narišejo v polni velikosti.

## Sprite za igre

sprite.json pod imenom vsake sličice navede njen položaj in velikost, v obliki, ki jo večina igralnih ogrodij in orodij bere ali jo lahko prebere s kratkim nalagalnikom. Sličice animacije dodajte po vrsti, z imeni, kot sta run-1 in run-2, in v zemljevidu ohranijo ta vrstni red.

Za teksture iger pustite razmik vsaj dveh pik, da pri povečevanju nikoli ne zajamete roba sosednje sličice. Pri ikonah za spletne strani je pogosto dovolj že ena pika razmika.

## Pogosta vprašanja

### Koliko ikon lahko dodam?

Od dveh do petdeset na enem listu.

### Ali je ozadje prozorno?

Da. List je PNG s prozornostjo, vsaka ikona pa ohrani svojo.

### Ali so dovoljene velike slike?

Slike nad 1024 pik se pomanjšajo, da se prilegajo, in obdržijo obliko; list ima največ 8192 pik na stranico.

### Ali lahko spremenim vrstni red?

Pakiranje višje ikone postavi naprej, zato vrstni red na listu ni vrstni red dodajanja. CSS in JSON vsako najdeta po imenu.

### Ali se moje ikone hranijo?

Ne. List se spakira na našem strežniku, ikone pa se z njega zbrišejo, ko je ZIP poslan.

### Ali obstaja API?

Da: POST /api/v1/sprite ikone sprejme kot dele multipart in vrne isti ZIP.

### Ali s HTTP/2 še potrebujem sprite?

Manj kot nekoč, saj je veliko majhnih zahtev danes poceni. Sprite še vedno pomaga pri nizih ikon in teksturah iger, kjer je ena datoteka preprostejša za upravljanje in nalaganje.

## Sorodna orodja

- [Generator faviconov](https://imagecompressor.si/sl/favicon-generator): Ena slika noter, vse ikone, ki jih spletno mesto potrebuje, ven, skupaj s HTML-jem.
- [Pretvorite sliko v Base64](https://imagecompressor.si/sl/image-to-base64): Dobite data URI, oznako HTML in vrstico CSS za svojo sliko, pripravljene za lepljenje v kodo ali predlogo e-pošte.
- [Združite slike eno ob drugi](https://imagecompressor.si/sl/combine-images): Dve ali več slik postavite v vrsto, na isti višini, z razmikom ali brez njega.