Pixel-Art-Vergrößerer
Pixel-Art ohne Verwischen vergrößern – ganzzahlige Skalierung, ein einfarbiger Block pro Pixel
Sprites hier hineinziehen
oder klicke, um Dateien auszuwählen – bis zu 20 gleichzeitig
Jedes Quellpixel wird in einen einfarbigen Quadratblock kopiert. Nichts wird hochgeladen und nichts vermischt.
Skalierung
Nur ganze Zahlen. Ein Faktor wie 1.5× würde manche Pixel als 2×2-Block und andere als 1×1-Block darstellen. Deshalb kann ein „Nearest-Neighbor“-Ergebnis trotzdem falsch aussehen.
Verfügbar, wenn eine Datei eine ganzzahlige Vergrößerung eines kleineren Originals ist.
img.pixel-art,
canvas.pixel-art {
image-rendering: pixelated;
}Ohne das macht der Browser den Sprite jedes Mal wieder unscharf, wenn er ihn für die Anzeige skaliert.
Bevor du beginnst mit Pixel-Art-Vergrößerer
Vergrößere Pixel-Art und Sprites mit Nearest-Neighbor-Skalierung bei ganzzahligen Faktoren, damit Kanten hart statt unscharf bleiben.
Am besten für
- Pixel-Art-Sprites, Kacheln, Symbole und kleine Spielressourcen vergrößern
- Jedes Quellpixel als scharfkantigen Block erhalten
- Bis zu 20 ähnlich skalierte PNG-Ausgaben in einem Stapel verarbeiten
Vor dem Start wissen
- Das Werkzeug vervielfacht vorhandene Pixel; es erfindet keine neuen Details und vergrößert keine Fotos
- Skalierungsfaktoren sind ganze Zahlen von 2× bis 32×
- Die Ausgabe ist PNG, damit scharfe Kanten und Transparenz erhalten bleiben
Arbeitsablauf fortsetzen
So verwendest du es
1. Sprites hineinziehen
Bis zu zwanzig Dateien gleichzeitig, von deinem Browser dekodiert und niemals hochgeladen. Jede wird Pixel für Pixel ausgelesen und bewertet: ein echtes 1× Original ist bereit zum Skalieren; bereits N× bedeutet, dass die Datei eine exakte Blockvervielfachung eines kleineren Originals ist. Der Bereich bietet an, dieses zuerst wiederherzustellen; weiche Kanten bedeutet, dass die Palette für Pixel-Art viel zu groß ist und die Grenzen bereits bei einer früheren Skalierung vermischt wurden. Die Prüfung liest die Pixel aus und ist keine Garantie. Sie beschreibt das Aussehen der Datei als Entscheidungshilfe und behauptet nie, etwas zu beheben, das sie nicht beheben kann.
2. Ganzzahligen Faktor auswählen
Wähle eine der Auswahlflächen oder gib eine ganze Zahl von 2 bis 32 ein. Die Zeile jeder Datei zeigt den vollständigen Ablauf, bevor du ihn startest – 32×32 → 8× → 256×256, oder 256×256 → restore to 32×32 → 8× → 256×256 wenn der Wiederherstellungsschalter aktiviert ist. Die Wiederherstellung nimmt pro erkanntem Block einen repräsentativen Pixel, den oben links, und wendet dann deinen Faktor auf dieses kleinere Bild an. Sie ist nur verfügbar, wenn die Datei tatsächlich als ganzzahlige Vergrößerung erkannt wurde. Browser begrenzen die Arbeitsflächengröße. Ein Faktor, der ungefähr 16,384 Pixel pro Seite oder insgesamt 256 Megapixel überschreiten würde, wird deshalb abgelehnt. Statt unbemerkt ein leeres Bild auszugeben, wird der größte passende Faktor genannt.
3. Vorschau prüfen und herunterladen
Die Vorher- und Nachher-Bereiche werden beide gerendert mit image-rendering: pixelated, sodass du den tatsächlichen Dateiinhalt siehst und nicht eine vom Browser geglättete Darstellung. Lade ein einzelnes Ergebnis herunter oder alle Ergebnisse als ZIP. Die Ausgabe ist immer PNG: Ein verlustbehaftetes Format würde weiche Kanten und Ringing-Artefakte in ein Bild zurückbringen, dessen Zweck gerade scharfe Kanten sind. Der CSS-Codeausschnitt im Bedienfeld ist die andere Hälfte der Arbeit. Kopiere ihn in dein Stylesheet, damit der Browser beim Skalieren des Sprites für die Anzeige das Ergebnis nicht wieder zunichtemacht.
Warum der Skalierungsfaktor eine ganze Zahl sein muss
Nearest-Neighbor-Skalierung bedeutet, dass jedes Ausgabepixel einfach die Farbe des nächsten Quellpixels kopiert. Es wird nichts gemittelt, deshalb entstehen keine neuen Farben und keine weichen Kanten. Das allein genügt nicht. Der Faktor muss außerdem ganzzahlig sein, und genau das machen die meisten Werkzeuge unbemerkt falsch.
Bei 3× wird jedes Quellpixel zu einem identischen 3×3-Quadrat. Das Raster bleibt gleichmäßig, und jedes Originalpixel erhält genau denselben Anteil am Ausgabebild. Bei 1.5× geht das Abtastraster nicht mehr gleichmäßig auf: Zwei Quellpixel müssen sich drei Ausgabepixel teilen. Eines wird deshalb zu einem 2 Pixel breiten Block, sein Nachbar zu einem 1 Pixel breiten Block, abwechselnd über das gesamte Bild hinweg. Es findet weiterhin keine Vermischung statt – technisch ist das Ergebnis Nearest Neighbor –, aber die Pixelgrößen sind sichtbar uneinheitlich. Gerade Linien werden unregelmäßig versetzt, Diagonalen entwickeln Treppenstufen, die in der Grafik nie vorhanden waren, und ein Schachbrett-Dithering wird zu Streifen. Das wirkt eher diffus falsch als offensichtlich unscharf und wird deshalb bei Prüfungen so oft übersehen.
Die praktische Konsequenz ist, die Zielgröße rückwärts zu bestimmen. Soll ein 48×48-Sprite in einem Layout ungefähr 150 Pixel groß sein, exportiere ihn mit 3× (144) oder 4× (192) und lass CSS oder dein Raster den Unterschied ausgleichen. Verlange vom Skalierungswerkzeug nicht exakt 150. Deshalb verwendet dieses Werkzeug einen Faktor statt einer Zielbreite: Es gibt keinen ehrlichen Weg, mit Pixel-Art einen beliebigen Pixelzielwert zu treffen. Daher bietet es keinen an.
Fragen
Kann das ein bereits unscharfes Sprite korrigieren?
Nein, und auch nichts anderes kann das. Sobald eine bilineare oder bikubische Größenänderung benachbarte Farben zu neuen Zwischenpixeln gemittelt hat, sind die ursprünglichen harten Grenzen weg. Beim Schreiben dieser Zwischenpixel wurde die Information verworfen, wo eine Farbe endete und die nächste begann. Schärfen erhöht den Kantenkontrast, stellt aber das diskrete Farbraster nicht wieder her. Ein KI-Vergrößerer erfindet plausible Details, statt die echten zurückzugewinnen. Das Werkzeug kennzeichnet diesen Fall als weiche Kanten damit du es weißt, bevor du Zeit investierst. Die Lösung ist, zur ursprünglichen, nicht verschwommenen Quelle zurückzukehren und diese zu skalieren.
Warum nur PNG?
PNG ist verlustfrei. Die Pixel in der Datei entsprechen deshalb genau den berechneten Pixeln. JPG ist für Fotos ausgelegt: Es verwirft hochfrequente Details. Eine harte Grenze zwischen zwei einheitlichen Farbflächen gehört zu den höchsten Frequenzen, die ein Bild enthalten kann. Daher entstehen an jeder Kante Überschwinger und auslaufende Farben – genau die Artefakte, die dieses Werkzeug verhindern soll. Verlustbehaftetes WebP hat dasselbe Problem in abgeschwächter Form. Beide anzubieten würde eine Möglichkeit bieten, die geleistete Arbeit wieder zunichtezumachen.
Was ist mit hqx, xBRZ und scale2x?
Diese Algorithmen betrachten die Nachbarn jedes Pixels und versuchen, Treppenstufen auf Diagonalen und Kurven ohne Unschärfe zu glätten. Bei Sprites mit sauberen Konturen können sie ausgezeichnet aussehen. Bei geditherten oder verrauschten Grafiken können sie deutlich schlechter wirken, weil die Mustererkennung das Dithering als Kanten interpretiert und bewusst gesetzte Details glättet. Dieses Werkzeug implementiert sie nicht, weil einfache ganzzahlige Nearest-Neighbor-Skalierung die vorhersehbare und standardmäßig gewünschte Wahl ist. Unser Leitfaden zum Vergrößern von Pixel-Art erklärt, was jeder davon tatsächlich tut und wann sich sein Einsatz lohnt.
Warum wirkt mein Bild nach dem Download im Browser unscharf?
Weil der Browser es bei der Darstellung erneut mit seiner eigenen Standardglättung skaliert hat. Responsive Container, Seitenzoom oder ein Bildschirm mit hoher Pixeldichte können das auslösen, selbst wenn die Datei bereits die gewünschte Anzeigegröße hat. Ergänze image-rendering: pixelated zu dem <img> oder canvas-Element – genau diesen Codeausschnitt zeigt der Werkzeugbereich – und der Browser verwendet stattdessen Nearest-Neighbor-Abtastung. In einer Spiel-Engine liegt dieselbe Einstellung an der Textur: Point- oder Nearest-Filterung, unabhängig von deiner Exportskalierung eingestellt.
Funktioniert es bei Fotos?
Es funktioniert, aber Nearest Neighbor ist für Fotos das falsche Werkzeug. Ein Foto ist eine abgetastete Version einer kontinuierlichen Szene. Seine Verläufe sollten daher tatsächlich glatt sein. Das Vermischen benachbarter Abtastwerte rekonstruiert etwas, das einer höher aufgelösten Aufnahme nahekommt. Jedes Pixel stattdessen zu einem harten Quadrat zu vervielfältigen, erzeugt sichtbare Blöcke ohne zusätzliche Details. Verwende für Fotos normale Größenänderung und dieses Werkzeug für auf einem Pixelraster gezeichnete Grafiken.
Verwandt
Die vollständigen Hintergründe – warum bilineare Skalierung Pixel-Art ruiniert, was Punktfilterung in Unity und Godot bewirkt und wo hqx und xBRZ einzuordnen sind – findest du unter wie vergrößere ich Pixel-Art, ohne sie unscharf zu machen. Wenn deine Grafik als Sprite-Sheet mit Einzelbildern statt als einzelne Sprites vorliegt, schneide sie zuerst auseinander: Sprite-Sheet-Schneidewerkzeug teilt ein Sprite-Sheet in einzelne, korrekt begrenzte PNGs auf. Anschließendes Skalieren jedes Einzelbilds hält alle auf demselben Raster.