Why your pixel pet looks blurry after export

Find out where the blur was introduced

Open the exported PNG at 100% in a pixel editor. Inspect a diagonal edge: if it already contains half-tones you did not paint, the image was resampled before or during export. If the pixels are sharp there and soft in the browser, leave the master alone and fix the display size.

A 32 × 32 sprite displayed at 128 × 128 gives each source pixel four CSS pixels per side. At 110 × 110 the ratio is 3.4375. Even when a browser avoids smooth interpolation, a fractional scale can create uneven-looking pixel widths. Use whole multiples where the composition has room, and test on the device where the pet will appear.

Save a master and a shareable copy

Keep the transparent native-size PNG as the master. If a platform accepts an uploaded image but offers no control over its rendering, make a larger copy with nearest-neighbor scaling. Reopen that copy at 100%: an isolated source pixel in a 4× export should appear as a 4 × 4 block. Check the image after upload too; some destinations produce their own thumbnails.

For a web page you control, specify both dimensions and test the browser's pixel-art scaling:

.pet-preview {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
}

MDN's image-rendering reference describes how the browser chooses a scaling algorithm. CSS affects display, not the pixels stored in the PNG.

Check the background before repainting the outline

A pale fringe on a dark preview can be a partially transparent edge rather than a blur setting. View the same PNG over light and dark backgrounds. If the fringe stays attached to the sprite, inspect its outer pixels and alpha at native scale. If only one preview looks soft, check that the preview has not cropped or resized the image independently.

Compare your copy with the original in Pet Studio, and use the Pet Studio guides to choose a format for your destination.