Creation

Generátor sprite listů

Kombinujte více obrázků do sprite listu s výstupem CSS, JSON a SCSS pro vývojáře.

Your files stay on your device - processed locally via WebAssembly, never uploaded

Drop sprites (PNG, JPEG, WebP)

Drop multiple files at once. Add more anytime.

All packing happens in your browser. Sprites are never uploaded.
Share this tool with othersHelp others discover free tools
Embed this tool on your website

Copy this code to add the Generátor sprite listů to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.

<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Generátor sprite listů by OptiPix" loading="lazy"></iframe>
<p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Generátor sprite listů</a></p>

❤️ Love this tool? Support our team.

No ads, no tracking, no limits. Tips keep 104 tools free for everyone.

$

Secure payment via Stripe · No account needed

About Generátor sprite listů

Last updated: May 2026

OptiPix Sprite Sheet Generator kombinuje více obrázků do jediného optimalizovaného sprite sheetu s připraveným CSS, JSON souřadnicemi a SCSS proměnnými. Vyberte rozložení: horizontální pruh, vertikální pruh, mřížka (vlastní počet sloupců) nebo zabalené (bin-packed pro minimální plýtvání místem). Nastavte odsazení mezi spritem, abyste zabránili krvácení okrajů. Výstupem je jeden PNG sprite sheet plus vygenerované CSS pro každý sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), mapa souřadnic JSON a SCSS proměnné. Podporováno škálování Retina @1x a @2x. Každý sprite je pojmenován podle názvu zdrojového souboru. Vše běží lokálně - vaše obrázky nikdy neopustí vaše zařízení. Vytvořeno pro vývojáře her, webové vývojáře používající CSS spritů a kohokoli, kdo chce spojit malé ikony do jednoho síťového požadavku.

How It Works

Každý vstupní obrázek je načten do paměti; zvolený algoritmus rozložení (pruh, mřížka nebo shelf bin-pack) vypočítá souřadnice (x, y, w, h) pro každý sprite; sprite sheet je vykreslen na plátno; CSS / JSON / SCSS jsou generovány ze stejné mapy souřadnic.

Use Cases

  • Spojení UI ikon do jednoho PNG + CSS sprite sheetu
  • Vytvoření sprite atlasu pro 2D hru v Phaser nebo Pixi
  • Kombinace ikon sociálních médií do jednoho CSS spritu pro rychlejší web
  • Zabalení snímků animace postav do horizontálního pruhu
  • Vytvoření sprite sheetu připraveného pro Retina @2x ze zdrojových obrázků

You Might Also Like

If you find Generátor sprite listů useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.

Frequently Asked Questions

Jaké rozložení bych měl použít?
Pro ikony stejné velikosti použijte Mřížku. Pro spritem s proměnnou velikostí použijte Zabalené (bin-packing) k minimalizaci plýtvání průhledným místem. Horizontální/vertikální pruhy jsou užitečné pro animace postav.
Co je to bin-packing?
Bin-packing uspořádá obdélníky různých velikostí do nejmenšího možného ohraničujícího obdélníku. OptiPix používá jednoduchý algoritmus shelf-pack, který poskytuje téměř optimální výsledky pro většinu sad spritů bez režie WebAssembly.
Mohu exportovat CSS / JSON / SCSS?
Ano - všechny tři. CSS vám poskytne připravené definice tříd. JSON vám poskytne mapu souřadnic pro herní enginy. SCSS vám poskytne proměnné přátelské k mixinům.
Proč používat sprite sheet?
Sprite sheets spojují desítky malých obrázků do jednoho HTTP požadavku, což dramaticky snižuje dobu načítání, počet požadavků a náklady na CDN. Stále relevantní pro ikony, herní assety a CSS pozadí.
Jsou mé obrázky nahrávány?
Ne. Sprity jsou uspořádány na lokálním plátně a exportovány jako PNG - nic není odesíláno na žádný server.

Related Tools

More Content Creation Tools

All 102 Tools

Image CompressorBackground RemoverVideo CompressorImage UpscalerOCR Text ExtractorFormat ConverterImage ResizerEXIF RemoverFace BlurDepth EstimationQR Code GeneratorWatermark MakerColor Palette ExtractorPhoto FiltersImage to PDFObject DetectionImage ClassifierImage CaptionerAI Image GeneratorMeme GeneratorGIF MakerPhoto Collage MakerImage CropPhoto EffectsImage to SVGColor ChangerNoise RemoverPhoto RestorationColor PickerFavicon GeneratorImage to Base64Image Metadata ViewerImage AnnotatorPassport Photo MakerDocument ScannerASCII Art GeneratorImage ComparisonSprite Sheet GeneratorObject RemoverPanorama MakerWord CounterCase ConverterLorem Ipsum GeneratorUUID GeneratorUnix Timestamp ConverterText DiffURL Encoder / DecoderHTML Entity Encoder / DecoderBase64 Text Encoder / DecoderText to Binary / Hex / OctalHash GeneratorJSON Formatter / ValidatorRandom String GeneratorCSV ↔ JSON ConverterMarkdown EditorUnit ConverterPercentage CalculatorBMI CalculatorAge CalculatorTip CalculatorCSS Gradient GeneratorCSS Box Shadow GeneratorCSS Border Radius GeneratorGlassmorphism GeneratorNeumorphism GeneratorCSS Text Shadow GeneratorFlexbox PlaygroundCSS Grid GeneratorAudio TrimmerAudio ConverterAudio MergerAudio RecorderVideo to Audio ExtractorAudio Speed ChangerAudio Volume BoosterRingtone MakerVocal RemoverText to SpeechSpeech to TextAudio Noise RemoverAudio EqualizerAudio EffectsVideo TrimmerVideo MergerVideo ResizerVideo Speed ChangerVideo RotatorVideo to MP4 ConverterAdd Music to VideoMute VideoVideo LooperReverse VideoVideo ScreenshotAdd Subtitles to VideoVideo WatermarkScreen RecorderWebcam RecorderSlideshow MakerVideo FiltersCron Expression BuilderRegex TesterUnix Timestamp Converter