Pixel-Art vergrößern, ohne sie zu verwischen

Warum normale Skalierung Pixel-Art unscharf macht

Jedes allgemeine Bildgrößenwerkzeug – das im Browser, der Vorschaubildbetrachter deines Betriebssystems, Photoshops Standardeinstellung und die automatische Bildoptimierung der meisten Web-Frameworks – verwendet eine Form der Interpolation. Am häufigsten ist bilinear, und die aufwendigeren Varianten (bikubisch, Lanczos) verfeinern dieselbe Idee: Um ein neues Pixel zu berechnen, werden benachbarte Pixel im Ausgangsbild betrachtet und nach ihrem Abstand gewichtet miteinander vermischt.

Für ein Foto ist das die richtige Vorgehensweise. Ein Foto hat auf Pixelebene nicht wirklich harte Kanten: Ein Verlauf auf einer Wange oder ein unscharfer Hintergrund soll weich aussehen. Das Mischen benachbarter Abtastwerte rekonstruiert etwas, das einer höher aufgelösten Aufnahme nahekommt. Die Berechnung nimmt an, dass das Bild eine abgetastete Version einer kontinuierlichen Szene ist.

Pixel-Art ist kein abgetastetes Foto. Jeder Pixel ist eine bewusste, einzelne Entscheidung eines Künstlers: genau diese Farbe in genau dieser Zelle, mit einer harten Grenze zur nächsten. Vergrößert ein bilineares Skalierungswerkzeug das Bild, erzeugt es Verlaufspixel zwischen Farben, die nie vermischt werden sollten. Es kann nicht wissen, dass die Grenze beabsichtigt ist. Das Ergebnis ist der bekannte weiche, verschwommene Eindruck: Scharfe schwarze Konturen werden zu grauen Säumen, und einheitliche Farbflächen erhalten einen leichten Verlauf, den es in der Quelle nie gab.

Nearest Neighbor: die grundlegende Korrektur

Nearest Neighbor Skalierung stellt eine andere Frage. Für jeden Ausgabepixel wird nichts vermischt, sondern einfach die Farbe des nächstgelegenen einzelnen Quellpixels kopiert. Ein 16×16-Sprite mit Nearest Neighbor auf 64×64 zu skalieren bedeutet, dass jeder Quellpixel zu einem gefüllten 4×4-Block gleicher Farbe wird. Keine neuen Farben werden erfunden, keine Kanten werden weich. Das ist die Mindestanforderung, damit Pixel-Art nach dem Skalieren wie Pixel-Art aussieht.

Die meisten Werkzeuge bieten das als ausdrückliche Option statt als Standard an, weil Nearest Neighbor für Fotos schlecht geeignet ist: Es erzeugt dort blockige, gezackte Ergebnisse. Du musst es aktiv auswählen:

• Photoshop / GIMP: stelle vor dem Skalieren die Abtastmethode auf „Nearest Neighbor“ (Photoshop) oder „None“ (GIMP).
• ImageMagick: -filter point vor -resize.
• Canvas API (Browser/JS): ctx.imageSmoothingEnabled = false bevor das skalierte Bild gezeichnet wird.
• Python / Pillow: Image.resize(size, Image.NEAREST).

Warum der Skalierungsfaktor ganzzahlig sein muss

Nearest Neighbor allein reicht nicht. Die zweite Voraussetzung ist ein ganzzahliger Skalierungsfaktor: 2x, 3x, 4x, nicht 1.5x und keine beliebige Zielbreite, die zwischen sauberen Vielfachen liegt.

Bei einem ganzzahligen Faktor wird jedes Quellpixel auf einen gleich großen Block aus Ausgabepixeln abgebildet: 3x bedeutet, dass jedes Pixel zu einem sauberen 3×3-Quadrat wird. Das Raster bleibt gleichmäßig, und jedes Originalpixel wird gleich groß und konsistent dargestellt.

Bei einem nicht ganzzahligen Faktor wie 1.5x werden manche Quellpixel als 2×2-Block aus Ausgabepixeln dargestellt, andere als 1×1-Block oder ungleichmäßiger 2×1-Block, weil das Abtastraster nicht gleichmäßig aufgeht. Technisch ist das Bild weiterhin „Nearest Neighbor“, sodass keine Farben vermischt werden. Die Pixelgrößen werden jedoch sichtbar uneinheitlich: Manche Blöcke wirken gröber als andere, und ursprünglich gerade diagonale Linien erhalten einen unregelmäßigen Versatz. Das Ergebnis wirkt subtil und schwer benennbar falsch statt sauber vergrößert.

Praktisch bedeutet das: Wähle deine Zielgröße ausgehend von einem ganzzahligen Vielfachen der Quellabmessungen und nicht von einem festen Pixelziel. Ist die Quelle 48×48 groß und soll ungefähr mit 150px angezeigt werden, nutze 3x (144px) oder 4x (192px). Lass CSS oder dein Layout den Unterschied ausgleichen, statt vom Bildgrößen-Werkzeug exakt 150px zu verlangen.

Mit CSS scharf halten

Die Datei selbst zu skalieren löst im Web nur die Hälfte des Problems. Selbst ein mit Nearest Neighbor skaliertes PNG wird wieder unscharf, wenn der Browser es beim Rendern mit seiner standardmäßigen Glättung erneut skaliert. Die Lösung ist eine CSS-Eigenschaft für das angezeigte <img> oder canvas-Element:

image-rendering: pixelated;

Das weist den Browser an, immer Nearest-Neighbor-Abtastung zu verwenden, wenn er das Bild für die Anzeige skalieren muss. Dazu gehören Fälle, die du nicht direkt kontrollierst, etwa Seitenzoom durch den Nutzer oder ein Bild in einem responsiven Container, dessen Größe sich mit dem Ansichtsfenster ändert. Alle aktuellen großen Browser unterstützen das. Eine ältere, weniger einheitlich unterstützte Alternative ist image-rendering: crisp-edges;, was einige Browser identisch behandeln und andere als leicht abweichenden Schärfungsalgorithmus; speziell für Pixel-Art ist pixelated ist die vorhersehbarere Wahl.

Punktfilterung in Spiel-Engines

Spiele-Engines haben dasselbe Problem eine Ebene tiefer. Sprites werden zur Laufzeit durch Kamerazoom, Bildschirmauflösung und Pixel-pro-Einheit-Einstellungen skaliert, nicht nur einmal beim Export. Jede Engine bietet eine Texturfiltereinstellung, und die für Pixel-Art sichere Wahl heißt durchgängig in irgendeiner Form „point“ oder „nearest“:

• Unity: Filter Mode in den Textur-Importeinstellungen auf Point (no filter) setzen, ausführlich erklärt in unserem Leitfaden zum Unity-Sprite-Import.
• Godot: die Filtereigenschaft der Textur auf Nearest gesetzt, entweder pro Textur oder als projektweite Voreinstellung für 2D-Pixel-Art-Projekte.
• Unreal: Texture Group oder Filter bei Sprite-Texturen auf Nearest Neighbor setzen.

Ein aktiv gebliebener bilinearer oder linearer Standardfilter ist der häufigste einzelne Grund, warum ein Pixel-Art-Spiel in der Engine unscharf aussieht, obwohl die Quelldateien scharf sind.

Spezielle Skalierungsalgorithmen für Pixel-Art

Nearest Neighbor ist unverfälscht, aber blockig. Bei starker Vergrößerung zeigen diagonale Linien und Kurven der Originalgrafik sichtbare Treppenstufen, weil der Algorithmus keine Linien kennt, sondern nur einzelne Pixel. Eine speziell für Pixel-Art entwickelte Algorithmusfamilie versucht, diese Treppenstufen ohne Unschärfe zu glätten. Sie untersucht lokale Pixelmuster, statt jedes Pixel isoliert zu behandeln.

• Scale2x / Scale3x (auch AdvMAME2x/3x genannt): der einfachste der Familie. Er betrachtet die vier direkten Nachbarn jedes Pixels. Wird ein diagonales Kantenmuster erkannt, teilt er den vergrößerten Pixel so, dass die Kante schräg statt stufenförmig erscheint. Schnell und eine vernünftige Voreinstellung für einfache Sprites mit sauberen Konturen.
• EPX / hqx (hq2x, hq3x, hq4x): erweitert dieselbe Idee durch eine größere Nachschlagetabelle benachbarter Pixelmuster und mehr mögliche Ausgabeformen pro Muster. Dadurch entstehen rundere, kurvenähnlichere Ergebnisse. Das funktioniert gut bei handgezeichneten Sprite-Konturen und weniger gut bei geditherter oder verrauschter Pixel-Art, bei der die Mustererkennung falsche Kanten findet.
• xBRZ: ein neuerer, im Allgemeinen hochwertigerer Nachfolger derselben Familie, abgestimmt auf glattere Diagonalen und Kurven mit weniger Artefakten bei detaillierten Sprites. Dieser Algorithmus steckt hinter den Vergrößerungsfiltern vieler Emulator-Oberflächen.

Alle drei haben dieselbe Einschränkung: Sie leiten Kanten aus lokalen Pixelmustern ab. Deshalb funktionieren sie am besten bei Grafiken mit sauberen, bewusst gesetzten Konturen und haben Schwierigkeiten mit stilisiertem Dithering, Rauschen oder Verläufen aus abwechselnden Pixeln. Diese in älterer Pixel-Art üblichen Techniken können sie mit zu glättenden Kanten verwechseln. Für die meisten Sprite-Arbeiten ist eine einfache ganzzahlige Nearest-Neighbor-Skalierung die sicherere, besser vorhersehbare Wahl. Nutze hqx oder xBRZ nur, wenn dich die Treppenstufen an Kurven sichtbar stören und du das Ergebnis auch an geditherten Bereichen geprüft hast.

Warum KI-Vergrößerer meist das falsche Werkzeug sind

Allgemeine KI-Vergrößerer, die unscharfen Fotos fotografische Details hinzufügen sollen, lösen genau das Gegenteil dessen, was Pixel-Art benötigt. Sie werden darauf trainiert, aus niedrig aufgelösten Eingaben plausible feine Details zu erfinden – Hautstruktur, Stoffgewebe, Laub. Dabei wird angenommen, dass die Eingabe durch Verkleinern oder Kompression Details verloren hat und das Modell sie wieder erraten soll.

Pixel-Art hat keine Details verloren. Jeder Pixel entspricht bereits genau der Absicht des Künstlers, in der beabsichtigten Auflösung. Verarbeitest du sie mit einem Modell, das fehlende Texturen erfinden soll, entsteht genau das erwartbare Ergebnis: geglättete Kanten, erfundene Verläufe und kleine stilistische Details – etwa ein einzelner Lichtreflex-Pixel oder ein bewusst harter Farbwechsel –, die verschwinden oder durch etwas entfernt Malerisches ersetzt werden, das dem Original überhaupt nicht ähnelt. Manche Vergrößerer bieten inzwischen einen speziellen „Pixel-Art“- oder „Anime“-Modus, der eher einer eingeschränkten Nearest-Neighbor-Skalierung mit anschließender Bereinigung entspricht. Solche Modi können im Einzelfall einen Test wert sein. Der allgemeine Standardmodus für Fotos macht Pixel-Art jedoch fast garantiert unscharf, statt sie zu erhalten.

Wenn das Sprite ursprünglich aus einem KI-Bildgenerator stammt, statt als echte Pixel-Art gezeichnet zu sein, liegt es wahrscheinlich gar nicht auf einem sauberen Pixelraster. Keine Skalierungsmethode behebt das; siehe unseren Leitfaden zu KI-Sprite-Prompts um von Anfang an eine sauberere Quelle zu erhalten.

Eine praktische Checkliste

1. Prüfe, ob die Quelle tatsächlich Pixel-Art auf einem konsistenten Raster ist und kein Rasterexport mit weichen Kanten.
2. Wähle anhand deiner Zielgröße einen ganzzahligen Skalierungsfaktor (2x, 3x, 4x), nicht umgekehrt.
3. Skaliere mit Nearest-Neighbor- beziehungsweise Punktabtastung, nicht mit dem standardmäßigen bilinearen oder bikubischen Modus des Werkzeugs.
4. Anwenden image-rendering: pixelated auf jedes Webelement, das das Bild erneut skalieren könnte.
5. Stelle den Texturfilter in deiner Spiel-Engine unabhängig von der Exportskalierung auf Point/Nearest.
6. Greife nur zu hqx/xBRZ, wenn dich die Treppenstufen der einfachen Nearest-Neighbor-Skalierung sichtbar stören, und prüfe das Ergebnis zuerst in geditherten Bereichen.

Wenn du das lieber nicht von Hand einrichten möchtest, ist unser Pixel-Art-Vergrößerer übernimmt die ersten drei Schritte: Wähle einen ganzzahligen Faktor zwischen 2x und 32x. Jeder Quellpixel wird mit Nearest-Neighbor-Abtastung vervielfacht, sodass nichts vermischt wird, und das Ergebnis wird als PNG exportiert.

Häufig gestellte Fragen