3

I've made some high resolution pixel art in PS by drawing it down at the pixel level and then increasing the image size with the nearest neighbor setting to keep it crisp. In the web browser, however, I need to display these images as icons with a dynamic size, so I can't just size the images correctly to begin with, and the broswer seems to blur the images when rendering them smaller, while vector images seem to stay more crisp as they shrink.

So I'm wondering if there's a way to convert the pixel art neatly into vector. I'm aware of the trace function in illustrator, but it seems to do a rough job iirc.

5

Browser rendering

You can use the CSS property image-rendering to stop browsers from applying anti-aliasing and interpolating your image when resized. Browser support is a bit inconsistent though. Some browsers support the pixelated value while others need the crisp-edges value. Internet Explorer instead uses the non-standard -ms-interpolation-mode: nearest-neighbor and Edge apparently has no support at all. Putting it all together you'd need something along the lines of:

.icon {
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

You can read more here: CSS-Tricks: image-rendering and see specifics on browser support at caniuse here: Can I use... Crisp edges/pixelated images.

Vector

You could use the object mosaic function in Illustrator to convert your pixel art to vectors. This will end up with a bigger file but whether that is too big depends on your requirements and the artwork itself. Take this 30 × 30 pixel smiley face I just drew:

enter image description here

This is the resulting mosiac:

enter image description here

Now, we don't need all of those individual tiles so we can merge a lot of them in to single shapes (using Pathfinder) saving on some of that increased file size. Even similarly colored tiles that aren't connected can be converted to compound paths which would save you a bit of file size. This obviously depends on the artwork itself though.

After merging some of our tiles:

enter image description here

The rusulting SVG (without any optimization) was about 10KB which, although a significant amount bigger than the 4KB the original PNG was, still isn't very big.

  • What a fantastic answer. I can see the vector version over-taking the PNG's size efficiency if the pixel art gets a bit larger. Maybe not, idk. I guess it depends on how many of the pixels can be combined. – Viziionary Oct 25 '16 at 18:29
2

Automatic tracing is possible, but only works for very specialized cases. Having lots of detail or intertwining shapes is poison for a tracing algorithm. In reality if you wish to have a quality vector image you will have to draw that vector image yourself.

For pixel art its possible that you could do a image mosaic (which would always work), then tell svg not to antialias. However this will create a HUGE file and its possible to use other solutions to make the browser not interpolate images with some higher order fliter.

  • Would the mosaic option be a small file if the source was a 20x20 pixel image? – Viziionary Oct 25 '16 at 2:26
  • @Viziionary Well, a mosaic is about 5 times larger in data content. But because svg is text and possibly uncompressed its still hundreds of times larger than a PNG file so you could just send many different sizes of PNG for the same cost. – joojaa Oct 25 '16 at 2:33
1

A sneaky way to achieve this faster would be upscaling your pixel art about 100x so you have 100px² pixels, then trying again with Live Trace.

Since the squares are bigger, LT would respect the hard edges, if not, you can configure the parameters decreasing Path, increasing Corners, and setting Noise to 0.

0

Illustrator's trace function doesn't give better results in detailed work. You can also try online convertors, if it also don't give you desired result, your last option is make it by yourself.

protected by DᴀʀᴛʜVᴀᴅᴇʀ Aug 29 at 16:08

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.