MakeCode Arcade Image Converter

What this tool does

This unofficial image converter turns a PNG or JPEG on your device into a small, palette-based image and an img template literal. The output is text that represents individual pixels, organized into rows. You can inspect the preview before using that text in your game project. Nothing needs to be installed, and the tool does not ask you to create an account. It works with images you choose from a desktop file picker or a phone’s file library.

Conversion changes both the pixel grid and the available colors. A photograph can contain subtle shading that will disappear when reduced to a small sprite. A simple icon with a clear outline usually remains easier to recognize. The preview shows the actual selected palette colors, rather than a filtered approximation of the original. Use it to decide whether the size, shape, and contrast suit the object you want to display in a game.

The tool uses the default palette. Its 16 entries consist of one transparent entry and 15 visible colors. It does not create a custom project palette or modify your project settings. If your project already uses different colors for those entries, the same exported text will look different there. Check the project’s palette before assuming the conversion failed. The palette strip under the previews identifies the visible color associated with each output symbol.

How to use the converter

1. Choose an image

Select a PNG or JPEG that you own or have permission to use. The file must be no larger than 10 MB. Source images are also limited to 4096 pixels on either side and 16 million pixels in total. These are this tool’s browser-processing limits, not a claim about the game editor’s limits. If a file is rejected, export a smaller copy from your image editor and try again. Renaming another file format to end in .png will not convert it.

The original preview appears after the browser reads the file. The checkerboard behind it represents transparency; it is not part of your image. The built-in color test is an alternative when you want to explore the controls without selecting a personal file. It contains red, green, opaque black, and a transparent region, making it useful for checking that black and transparency remain separate. Your selected file replaces that test whenever you choose another image.

2. Set the output dimensions

Start with the 16 × 16 or 32 × 32 preset, or enter your own whole-number width and height. Each dimension can range from 1 to 256 pixels. Choose dimensions that match the role of the asset in your game. A larger sprite can preserve more detail, but it also generates more text and occupies more space on screen. This converter does not estimate the best size for your project or change its camera settings.

Choose Fit inside to keep the source proportions. The image is centered within the output rectangle, and any unused space becomes transparent when transparency is enabled. Choose Stretch to fill when you want the source to occupy the entire output rectangle. Stretching can make a wide subject look narrow, so compare both previews carefully. Changing a control clears the previous result; select Convert image again before copying code for the new settings.

3. Decide how to handle transparency

With Keep transparent pixels enabled, the alpha cutoff determines which source pixels disappear. At the default cutoff of 127, pixels whose alpha is 127 or lower become transparent. Pixels above the cutoff become fully opaque and keep their source RGB color for palette matching. A higher cutoff can remove more faint edge pixels. A lower cutoff can retain more of those edges, but the output cannot keep their original partial transparency.

Turn transparency off to flatten the source onto a background color that you choose. The converter blends partially transparent pixels into that background before selecting palette entries. Empty padding from Fit inside uses the same background. This option is useful when you want an opaque image, but it will not remove a background already painted into the source. JPEG files have no alpha channel, so a white area in a JPEG stays an opaque color.

4. Convert, inspect, and copy

Select Convert image and compare the original with the palette preview. The dimensions above each preview distinguish the source size from the exported size. Enlarged previews use crisp pixel rendering so you can inspect the edges. Check thin lines, small gaps, and dark areas before moving on. If an important feature disappears, try a larger output size or simplify the source rather than assuming a different color setting will restore missing detail.

Select Copy code to copy the complete template literal, including its opening img and closing backtick. Use it as an image expression in the editor’s JavaScript view. For example, it can replace the image argument in an existing sprites.create call. The converter exports an image value, not a complete game. Keep the surrounding variable names and sprite kind appropriate to your own project, and save a copy before replacing existing work.

How resizing and color matching work

Resizing uses nearest-neighbor sampling. For each output pixel, the converter finds the corresponding location in the source and selects one source pixel. It does not average neighboring colors or add dithering. This makes the result predictable for existing pixel art, though reducing a detailed photograph may discard narrow features. When fitting proportions, the scale is the smaller of output width divided by source width and output height divided by source height.

For an opaque output pixel with red, green, and blue values R, G, and B, color matching minimizes the squared distance (R − Rp)² + (G − Gp)² + (B − Bp)² across the visible palette entries. Rp, Gp, and Bp are the candidate palette color’s channels. This is a direct RGB comparison, not a perceptual color model. If two entries tie, the earlier visible entry wins. The same input and settings therefore produce the same indices.

The exported symbols are dots for transparency and hexadecimal digits 1 through f for visible colors. Opaque black uses f; it must not be confused with transparent index zero. Every row contains exactly the requested number of pixels, and the number of rows equals the requested height. Spaces make the text easier to read. The displayed preview is generated from those same indices, so it represents the image being copied rather than a separate conversion.

Tips for a clearer sprite

Crop away unnecessary margins before importing a source. A small subject surrounded by empty space can become only a few pixels wide after fitting. Use a clean silhouette and distinct areas of color, then check the result at its intended game size. The large preview is useful for inspecting individual pixels, but it can make a tiny object seem more readable than it will be during play. Preview it in the game before committing to the asset.

For existing pixel art, use a source and output size with a simple scale relationship when possible. Reducing a 32 × 32 drawing to 16 × 16 discards alternate samples; fine one-pixel lines can vanish. Keeping the original dimensions avoids that particular loss. For drawings with antialiased edges, compare several alpha cutoffs. A sharp cutoff cannot recreate soft edges, and a partially transparent highlight may become an unexpectedly solid patch after conversion.

Keep the original file outside this page so you can return to it later. The converter has no saved history, and refreshing the page clears your working image. If clipboard access is blocked, the code field is selected for manual copying; verify that you copied the complete literal. Error messages describe unsupported formats, unreadable files, source limits, or invalid output dimensions. Correct the named issue and convert again rather than reusing an older result.

Format reference and scope

The platform’s official image documentation describes image literals, and its palette reference lists the default color entries. Use those references when checking compatibility with an existing project. This tool does not upload files, import remote image URLs, generate artwork, remove backgrounds automatically, or change your project palette. It provides a local conversion step and a preview that you can review before copying the resulting image expression.