Sprite export formats: PNG, SVG, and sprite sheets explained

The format matters more than you think

You made a sprite. Great. Now what?

The file format you export determines where and how that sprite can be used. Pick wrong and you get blurry scaling, missing transparency, bloated file sizes, or an engine that flat-out rejects your asset. Pick right and everything just works.

This guide covers the three formats that matter for pixel art sprites: PNG for raster, SVG for vector, and sprite sheets for animation. Plus the engine-specific gotchas that'll save you debugging time.

PNG: the universal default

If you're not sure what format to use, PNG is the answer. It's the standard for pixel art sprites and basically every game engine supports it natively.

Why PNG works for pixel art:

• Lossless compression — No quality loss, ever. Unlike JPEG, which smudges pixel edges
• Alpha transparency — Per-pixel transparency for clean sprite borders
• Universal support — Unity, Godot, GameMaker, Phaser, every browser, every image editor
• Small file sizes — Pixel art PNGs are tiny because the limited color count compresses efficiently

PNG settings that matter:

Color depth: 8-bit (256 colors) is plenty for most sprites. 32-bit RGBA if you need smooth alpha gradients, but pixel art rarely does.

Compression: Maximum compression. PNG compression is lossless, so crank it up — smaller files with zero quality loss.

Interlacing: Off. Interlaced PNGs load progressively in browsers, which is meaningless for a 32x32 sprite.

The one PNG pitfall: scaling. A 16x16 PNG scaled to 160x160 with bilinear filtering looks like garbage. Always use nearest-neighbor / point filtering when displaying pixel art PNGs. This is an engine setting, not a file setting — the PNG itself is fine.

SVG: scalable pixel art

SVG sounds contradictory for pixel art. Pixel art is defined by its grid. SVG is defined by being resolution-independent. But there are genuinely useful cases for SVG sprites.

When SVG makes sense:

• Web display — SVGs scale perfectly to any screen size without blur. If your pixel art appears on a website (icons, decorations, embedded art), SVG means it looks crisp on retina displays without serving multiple resolution files
• Print — Pixel art on merchandise, posters, or business cards. SVG scales to any physical size without pixelation (well, the intentional kind is preserved, the unintentional kind isn't)
• UI elements — Game UI that needs to scale with resolution settings
• Archival — SVG preserves the exact pixel grid in a format that renders identically at any size

When SVG doesn't make sense:

• In-game sprites for most engines (they expect raster textures)
• Animated sprites (SVG animation is a different, more complex beast)
• Large or complex pixel art (the SVG file size balloons)

Converting PNG to SVG

Our free PNG to SVG converter handles this. Upload a pixel art PNG and it generates an SVG where each pixel becomes a crisp rectangle. No smoothing, no interpolation — just clean vector representation of your pixel grid.

The result is an SVG that looks identical to your PNG at any zoom level. Scale it to fill a billboard and every pixel edge stays razor sharp.

Try the converter →

How it works under the hood: The converter reads each pixel of your image, creates a vector rectangle for each one colored to match, and optimizes adjacent same-color pixels into larger rectangles to keep file size reasonable. A 16x16 sprite with 8 colors produces a surprisingly small SVG.

Sprite sheets: animation and batching

A sprite sheet packs multiple frames or sprites into a single image file. Instead of 12 separate PNGs for a walk cycle, you have one PNG with all 12 frames arranged in a grid.

Why sprite sheets exist

Performance. Loading one 256x64 image is faster than loading 12 separate 32x32 images. GPU texture switching is expensive. One texture atlas means one draw call covers all your sprites.

Organization. One file per character instead of dozens. Easier to manage, version control, and hand off to other team members.

Engine expectation. Most game engines assume sprites come as sheets. Their animation systems are built around defining frame rectangles within a larger image.

Common sprite sheet layouts

Grid layout (fixed frame size)

The simplest. Every frame occupies the same rectangle — say 32x32 — arranged in rows and columns. Frame 1 is top-left, frame 2 is next to it, and so on.

Atlas layout (packed, variable size)

Frames of different sizes packed together efficiently, with a JSON or XML file describing where each sprite is. More space-efficient but requires metadata.

When to use which:

Grid for sprites you're making yourself — simple, human-readable, easy to set up in any engine. Atlas for large projects with hundreds of sprites where file size and texture memory matter. Our sprite sheet guide covers creation in detail.

Engine-specific requirements

Every engine has opinions about how it wants your sprites. Here's what you need to know.

Unity

• Format: PNG (recommended), TGA, PSD also work
• Import settings: Sprite Mode → Multiple (for sheets), Pixels Per Unit → match your game scale, Filter Mode → Point (no filter)
• Sprite sheets: Use Unity's Sprite Editor to slice sheets. Grid slicing works for uniform frames, automatic works for packed atlases
• Common mistake: Leaving Filter Mode on Bilinear. Your pixel art will look blurry

Godot

• Format: PNG (recommended)
• Import settings: Repeat: Disabled, Filter: Off (or Nearest), Compress Mode: Lossless
• Sprite sheets: AnimatedSprite2D with SpriteFrames resource. Define frame regions within your sheet
• Common mistake: Default texture filter is Linear. Change it in Project Settings → Rendering → Textures → Default Texture Filter → Nearest

GameMaker

• Format: PNG
• Import settings: Sprites import directly. Set origin point (center, top-left, etc.) per sprite
• Sprite sheets: GameMaker has built-in strip import — load a horizontal strip and it auto-detects frames by width
• Common mistake: The "Separate Texture Page" option. Don't enable it for small sprites — it wastes GPU texture space

Phaser / web games

• Format: PNG for sprites, SVG for UI elements
• Loading: this.load.spritesheet('player', 'player.png', { frameWidth: 32, frameHeight: 32 })
• Rendering: Set pixelArt: true in game config for nearest-neighbor rendering globally
• Common mistake: Not setting pixelArt: true and getting blurry sprites

CSS / web display

• Format: PNG or SVG
• Key property: image-rendering: pixelated (Chrome/Edge) or image-rendering: crisp-edges (Firefox)
• Scaling: Use integer multiples with CSS transforms: transform: scale(4) with transform-origin: top left
• Common mistake: Using width/height to scale instead of transform — some browsers still apply smoothing

Choosing the right format

Most game projects need: individual PNGs for development, sprite sheets for production builds, and SVGs for web marketing and UI. It's not one-or-the-other.

Importing and converting between formats

Already have sprites in the wrong format? Or coming from a different tool?

Importing sprites from other editors: The import sprite tool reads Piskel project files and standard image formats. Useful if you're migrating work from Piskel or have assets from another team member in various formats.

Converting PNG to SVG: The PNG to SVG converter is purpose-built for pixel art. Drop in a PNG, get a clean SVG. No account, no upload — it runs in your browser.

Editing before export: Need to tweak colors, fix stray pixels, or adjust something before final export? The pixel editor handles that. Open your sprite, make your changes, export in the format you need.

The typical workflow looks like this:

1. Create or import your sprite
2. Edit in the pixel editor until it's right
3. Export as PNG for your game engine
4. Convert to SVG if you also need it for web
5. Assemble sprite sheets for animated characters

File size considerations

Pixel art files are small. Absurdly small by modern standards. But when you're shipping hundreds of sprites, it adds up.

PNGs are smaller than SVGs for pixel art in almost every case. SVG file size grows with pixel count and color variety because each unique pixel region becomes a path element. For simple, small sprites the difference is negligible. For complex, large sprites, PNGs win on size.

Sprite sheets compress better than individual files because PNG can leverage repeated patterns across frames. A 12-frame walk cycle as one sheet is typically 30-40% smaller than 12 separate PNGs.

Try the tools

Enough theory. Go export something:

• Convert a PNG to SVG → — See how your pixel art looks as a scalable vector
• Edit a sprite → — Make final adjustments before exporting
• Import from another tool → — Bring in Piskel files or existing PNGs
• Learn about sprite sheets → — Deep dive into sheet creation and animation

For engine-specific sprite workflows, our best game engines for pixel art comparison covers what each engine expects from your assets.

Related posts

Blog

2D pixel art for games: complete style guide

A practical style guide for 2D pixel art in games. Covers pixel art styles from 8-bit to modern HD, resolution choices, color theory, and keeping your assets consistent.

Blog

Anime pixel art — the JRPG tradition that never left

How anime pixel art evolved from SNES JRPGs to modern indie games. Techniques for eyes, hair, poses, and palettes at small scales.

Blog

How to make a pixel art game — the practical roadmap

A step-by-step plan for making your first pixel art game. Engine choice, art pipeline, scope control, and the tools that save the most time.