Scaling pixel art without blur.

Pixel art is built on hard edges. When an app, browser, game engine, icon pipeline, or watch-face preview resizes it with smoothing, the renderer samples between source pixels and averages neighbouring colours. That is great for photos. It is usually bad for a tiny sword, face, item, or logo that depends on clean square decisions.

The fix is not a magic export button at the end. The fix is to make the artwork for the place it has to land. If the final asset needs to be 64 x 64, work at 64 x 64 or scale from a clean factor like 32 x 32. Do not ask a 48 x 48 source to become 100 x 100 and expect every edge to survive.

Start with the destination. A game item, Discord avatar, Android adaptive icon layer, Wear OS preview, app badge, and Godot sprite all have different constraints. If the final canvas is known, the artwork can be composed to that canvas instead of being squeezed into it later.

This is especially important when the source is a generated image, screenshot, sketch, or rough reference. Those sources can be useful for direction, but they are not the final pixel grid. Reconstruct the useful idea into the target grid by hand or with an editor that makes the canvas size explicit.

Reconstruct, don't rescue

Whole-number scaling means every source pixel becomes an equal block of screen pixels: 16 to 32 is 2x, 32 to 64 is 2x, and 64 to 128 is 2x again. With nearest neighbor, an integer scale keeps every one of those blocks identical, so the artwork just gets bigger without changing the relative size of the pixels. Smoothing filters like bilinear still blend across the block edges and soften them even at a clean multiple, which is why pixel-art pipelines switch the filter off rather than rely on the size alone.

Fractional scaling is where trouble starts. A 48 x 48 sprite enlarged to 100 x 100 has no clean way to distribute its pixels. Some columns have to become wider than others, or the renderer has to blend colours. Either way, the image loses the tidy rhythm that made it read as pixel art.

In the browser, CSS gives you control over image scaling with image-rendering. Use pixelated — it is the value the spec guarantees nearest-neighbour scaling for, so upscales keep their hard edges. crisp-edges is the older, vaguer fallback: declare it first so ancient browsers get something, then let pixelated override it. Even so, exact whole-number sizing is still the safest path.

In Godot, 2D nodes inherit texture filtering through CanvasItem.texture_filter unless you override it. For pixel-art sprites, set the relevant CanvasItem texture filter to Nearest or set the project default canvas texture filter to Nearest, then check snapping settings if your art jitters or lands between pixels.

For icons and watch faces, design to the required canvas wherever possible. Android adaptive icons are a useful reminder: the foreground and background layers are 108 x 108dp, but only the inner 72 x 72dp is guaranteed inside the masked viewport. Keep the important pixel shape inside the safe area instead of touching the edge.

For games, whether you're authoring in Aseprite or any other editor, test at the same camera or viewport scale the player will actually see. A sprite can look correct in the editor and still soften when the camera scale, transform, or viewport stretches it at runtime. Heading into a specific engine? Exporting a Godot-ready pixel sprite walks the sheet-plus-metadata path end to end.

Reconstruct, don't rescue

Pixelpond Engine is being built around the boring part that saves the asset later: choosing a precise canvas, reconstructing the reference into that grid, and exporting a file that already knows where every pixel should land.

The tool can still be useful if you use Aseprite, Photoshop, GIMP, Godot, or any other workflow. The core idea is portable: decide the target, draw to the target, scale cleanly, and verify the final renderer is not smoothing the result. Really this whole guide is one small belief of the studio made concrete — move fast to grab the rough version, then slow down to make every edge land on purpose. That same rhythm runs through everything here; see the studio note on making in the AI wave.

Starting from a generated image instead of a clean source? The companion article on reconstructing AI pixel art covers the step before this one: spotting the symptom and finding the real grid hidden inside the 1024 image.