Sprite-Sheet-Packer
Sprite Sheet Packer
Packt viele Bilder in einen Atlas und gibt dazu die CSS- oder JSON-Frame-Map aus.
Ein Atlas und die Koordinaten, die ihn brauchbar machen – denn ein Sprite-Sheet ohne Frame-Karte ist nur ein Bild von ein paar Icons. Der Packer meldet seine Belegung, und das ist die Zahl, die Ihnen sagt, ob sich der Atlas überhaupt lohnt.
Zu packende Icons hier ablegen
Ein Atlas und die Frame-Map, die ihn brauchbar macht.
So funktioniert es
Legen Sie die Icons ab
Die Dateinamen werden die Sprite-Namen, also die CSS-Klassennamen oder die JSON-Schlüssel.
Lassen Sie einen Steg von mindestens zwei Pixeln
Das verhindert, dass ein benachbartes Sprite hineinblutet, wenn das Sheet skaliert oder mit bilinearer Filterung gezeichnet wird – die Linie an der Kante eines Icons, die niemand erklären kann.
Wählen Sie das Kartenformat
CSS ist das einzige, das kein JavaScript braucht. JSON folgt der Hash-Form von TexturePacker, die die gängigen Spiel-Engines bereits parsen.
Setzen Sie das Pixelverhältnis, wenn die Grafik @2x ist
Es teilt jede Zahl in der Karte, sodass das CSS CSS-Pixel beschreibt und nicht Gerätepixel.
Häufige Fragen
Was bedeutet der Belegungswert?
Wie viel des Atlas Sprite ist und nicht leerer Raum. Unter etwa der Hälfte kämpft die Packung mit Sprites sehr verschiedener Formen, und Sie laden viel Transparenz herunter; sie in zwei Sheets aufzuteilen schlägt das meist.
Soll ich über HTTP/2 noch ein Sprite-Sheet verwenden?
Für das Web meist nicht – die Anfragekosten, die Atlanten rechtfertigten, sind größtenteils weg, und ein SVG-Sprite oder einzelne Dateien sind leichter zu pflegen. Für ein Canvas- oder WebGL-Spiel ist es weiterhin die richtige Antwort, weil ein Textur-Bind fünfzig schlägt.
Warum ist der Atlas keine Zweierpotenz?
Weil das Platz kostet und die meisten aktuellen GPUs es nicht brauchen. Schalten Sie die Option ein, wenn Sie Mipmapping verwenden oder einen älteren Texturpfad ansteuern, und nehmen Sie die verschwendete Fläche in Kauf.
Eingabe aus
Bild aufteilen
Image Splitter
Zerschneidet ein Bild in ein N×M-Raster oder in Streifen fester Höhe und packt die Teile als ZIP.
Pixel-Art-Editor
Pixel Art Editor
Zeichnet auf einem Pixelraster mit Stift, Füllen, Radierer, Pipette, Palette und Spiegelsymmetrie, importiert ein ins Raster quantisiertes Foto und exportiert PNG in ganzzahliger Skalierung oder SVG.
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
JPEG-Kompressor
JPEG Compressor
Kodiert ein JPEG mit der gewählten Qualität neu und zeigt die Dateigröße vorher und nachher sowie eine Differenzansicht live an.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Bildgröße ändern
Image Resizer
Skaliert Bilder nach Pixeln, Prozent oder einer Ziel-Kantenlänge, mit Sperre für das Seitenverhältnis und Voreinstellungen für die Stapelverarbeitung.
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
Hintergrund entfernen
Background Remover
Stellt ein Motiv vor einfarbigem Hintergrund per OKLab-Keying frei – ohne Upload, komplett im Browser – und liefert ein transparentes PNG samt Pinsel zum Nachbessern der Kanten.
EXIF-Daten entfernen
EXIF Remover
Entfernt Kamera-, GPS- und Bearbeitungsmetadaten aus Fotos, ohne die Pixel anzurühren – ohne Upload, komplett im Browser.
Favicon-Generator
Favicon Generator
Erzeugt den kompletten Favicon-Satz – ICO, PNGs, Apple-Touch-Icon, Web-Manifest – samt HTML zum Einfügen.