Ordnen Sie die Bilder an und prüfen Sie die Vorschau. Das erzeugte CSS gibt jedem Bild seine eigene Größe und Hintergrundposition im Sheet; das ZIP enthält PNG und Stylesheet zusammen.
Läuft lokal in deinem BrowserDer Generator zeichnet die ausgewählten Bilder auf ein transparentes PNG und schreibt das CSS, das jedes Bild mit background-position wieder an seinen Platz setzt. Canvas baut das Sheet, JSZip packt das Archiv — beides läuft in der Seite, hochgeladen wird nichts.
Jede Zelle ist so breit und so hoch wie das größte Bild der Auswahl, und jedes Bild wird in seiner Zelle zentriert. Die Regeln behalten die eigene Größe jedes Bildes: Ein 16 × 16-Symbol und ein 64 × 4-Streifen teilen sich ein Sheet, ohne skaliert zu werden.
Die Datei beginnt mit einer Basisklasse — .sprite-<Präfix> mit display: inline-block, background-image: url("voritools-sprite.png") und background-repeat: no-repeat — gefolgt von je einer Regel pro Bild: .<Präfix>-<Name> mit Breite, Höhe und negativer background-position im Sheet.
Präfix und Dateinamen werden gleich normalisiert: kleingeschrieben, Folgen anderer Zeichen zu einem Bindestrich, führende und schließende Bindestriche entfernt. my icon.png wird zu my-icon, ein wiederholter Name bekommt -2 und -3, und ein Präfix ohne Rest fällt auf icon zurück, damit Basisklasse und Regeln zusammenpassen.
Ein Durchlauf verarbeitet höchstens 50 Dateien und 250 MB. Das Canvas darf 16384 Pixel pro Seite und 32.000.000 Pixel gesamt nicht überschreiten; ein größeres Sheet bricht mit „Die erzeugte Canvas ist für eine zuverlässige Browser-Verarbeitung zu groß.“ ab und exportiert nichts.
Eine 51. Datei wird nicht still verworfen: Die Statuszeile nennt die Anzahl der Dateien über dem Limit, die Liste behält die ersten 50. Spalten und Abstand werden vor der Verwendung auf ganze Pixel gerundet — aus 2,5 werden 3 Spalten — und das Feld zeigt anschließend den verwendeten Wert.
Alles läuft im Browser. Bilder hinzufügen, erzeugen, CSS kopieren, ZIP laden und die Liste leeren lösten im Test (en, fr, ja) nach dem Laden der Seite keine einzige Netzwerkanfrage aus; die Bilder verlassen das Gerät nicht.
Das Sheet nutzt den Bilddecoder des Browsers, deshalb laden PNG-, JPEG- und SVG-Dateien wie überall sonst; eine abgeschnittene oder leere Datei wird mit „Dieser Browser kann dieses Dateiformat nicht decodieren.“ abgelehnt. Ein SVG ohne width und height wird mit der Standardgröße 300 × 150 des Browsers gezeichnet.