Best way to upscale pixel art exactly 200%

[Halle]

Hello,

I was wondering if anyone could suggest the method that will give the best results visually for upscaling art with the following specs:

1. New art needs to be exactly 200% of the original size,
2. There is no time constraint for the processing time,
3. The art has an alpha channel, so the cleanness of the the edge which abuts the alpha channel (the edge of the non-transparent part) is going to be the main giveaway that it was upsized, i.e. if this edge gets notably blurry/more antialiased/ringed it will be obvious when it is superimposed over other art.
4. The image to be upsized contains no type or photography. It consists of Photoshop-generated user interface elements.

Thank you for any suggestions,

Halle

[GreenKoopa]

When performing a -resize you should specify a -filter. I'll assume 200% means a doubling of width and height (not area). A point filter would simply expand each pixel to 4 pixels of identical color. Or bilinear may give you what you want. In general, simple filters work better for drawings and complex filters work better for continuous color as in photography.

Check out:
http://www.imagemagick.org/Usage/resize/
http://www.imagemagick.org/Usage/resize/#filter

[GreenKoopa]

An example:

Code: Select all

convert in.png -filter point -resize 200% out.png

Also, if your image is in indexed color, blending colors obviously becomes a problem.

[fmw42]

resize filters are currently be improved and studied for various types images by Anthony Thyssen and Nicholas Robidoux. You can follow some of the discussion at viewtopic.php?f=2&t=17410.

As things are changed Anthony has been posting updated notes at http://www.imagemagick.org/Usage/resize/

[Halle]

Hello,

Thank you for the pointers and assistance. I've decided that the best way to go about this is to create a script that will produce many resize approaches for a single png so I can just run the image through and visually evaluate what did the best job. I've gone through the filter page and here is my list so far of commands I'm running on the image:

Code: Select all

convert in.png -filter point -resize 200% out_point.png"
convert in.png -filter point -resize 200% \-unsharp 0x1 out_point_unsharp.png"
convert in.png -filter box -resize 200% out_box.png"
convert in.png -filter box -resize 200% \-unsharp 0x1 out_box_unsharp.png"
convert in.png -filter triangle -resize 200% out_triangle.png"
convert in.png -filter triangle -resize 200% \-unsharp 0x1 out_triangle_unsharp.png"
convert in.png -filter hermite -resize 200% out_hermite.png"
convert in.png -filter hermite -resize 200% \-unsharp 0x1 out_hermite_unsharp.png"
convert in.png -filter lagrange -resize 200% out_lagrange.png"
convert in.png -filter lagrange -resize 200% \-unsharp 0x1 out_lagrange_unsharp.png"
convert in.png -filter lagrange -define filter:support=2.25 \-resize 200% out_lagrangesupport225.png"
convert in.png -filter lagrange -define filter:support=2.25 \-resize 200% \-unsharp 0x1 out_lagrange_support225_unsharp.png"
convert in.png -filter lagrange -define filter:support=2.5 \-resize 200% out_lagrangesupport250.png"
convert in.png -filter lagrange -define filter:support=2.50 \-resize 200% \-unsharp 0x1 out_lagrange_support250_unsharp.png"
convert in.png -filter lagrange -define filter:support=2.75 \-resize 200% out_lagrangesupport275.png"
convert in.png -filter lagrange -define filter:support=2.75 \-resize 200% \-unsharp 0x1 out_lagrange_support275_unsharp.png"
convert in.png -filter lagrange -define filter:support=3 \-resize 200% out_lagrangesupport300.png"
convert in.png -filter lagrange -define filter:support=3 \-resize 200% \-unsharp 0x1 out_lagrange_support300_unsharp.png"
convert in.png -filter lagrange -define filter:support=3.25 \-resize 200% out_lagrangesupport325.png"
convert in.png -filter lagrange -define filter:support=3.25 \-resize 200% \-unsharp 0x1 out_lagrange_support325_unsharp.png"
convert in.png -filter catrom -resize 200% out_catrom.png"
convert in.png -filter catrom -resize 200% \-unsharp 0x1 out_catrom_unsharp.png"
convert in.png -filter lanczos -resize 200% out_lanczos.png"
convert in.png -filter lanczos -resize 200% \-unsharp 0x1 out_lanczos_unsharp.png"
convert in.png -filter cubic -resize 200% out_cubic.png"
convert in.png -filter cubic -resize 200% \-unsharp 0x1 out_cubic_unsharp.png"
convert in.png -filter quadratic -resize 200% out_quadratic.png"
convert in.png -filter quadratic -resize 200% \-unsharp 0x1 out_quadratic_unsharp.png"
convert in.png -filter mitchell -resize 200% out_mitchell.png"
convert in.png -filter mitchell -resize 200% \-unsharp 0x1 out_mitchell_unsharp.png"
convert in.png -filter gaussian -resize 200% out_gaussian.png"
convert in.png -filter gaussian -resize 200% \-unsharp 0x1 out_gaussian_unsharp.png"
convert in.png -filter gaussian -define filter:support=1.25 \-resize 200% out_gaussiansupport125.png"
convert in.png -filter gaussian -define filter:support=1.25 \-resize 200% \-unsharp 0x1 out_gaussiansupport125_unsharp.png"
convert in.png -filter gaussian -define filter:blur=.75 \-resize 200% out_gaussianblur75.png"
convert in.png -filter gaussian -define filter:blur=.75 \-resize 200% \-unsharp 0x1 out_gaussianblur75_unsharp.png"
convert in.png -filter gaussian -define filter:sigma=.25 \-resize 200% out_gaussiansigma25.png"
convert in.png -filter gaussian -define filter:sigma=.25 \-resize 200% \-unsharp 0x1 out_gaussiansigma25_unsharp.png"
convert in.png -filter sinc -resize 200% out_sinc.png"
convert in.png -filter sinc -resize 200% \-unsharp 0x1 out_sinc_unsharp.png"
convert in.png -filter sinc -define filter:support=5 \-resize 200% out_sincsupport5.png"
convert in.png -filter sinc -define filter:support=5 \-resize 200% \-unsharp 0x1 out_sincsupport5_unsharp.png"
convert in.png -filter sinc -define filter:support=6 \-resize 200% out_sincsupport6.png"
convert in.png -filter sinc -define filter:support=6 \-resize 200% \-unsharp 0x1 out_sincsupport6_unsharp.png"
convert in.png -filter sinc -define filter:support=7 \-resize 200% out_sincsupport7.png"
convert in.png -filter sinc -define filter:support=7 \-resize 200% \-unsharp 0x1 out_sincsupport7_unsharp.png"
convert in.png -filter sinc -define filter:support=8 \-resize 200% out_sincsupport8.png"
convert in.png -filter sinc -define filter:support=8 \-resize 200% \-unsharp 0x1 out_sincsupport8_unsharp.png"

I was wondering if anyone would care to recommend anything else that I should try with IM version 6.6.1-5, or alternately to tell me which of the above are likely to never get a good result or are redundant and can be confidently dropped from the list. I didn't get very granular with the different kinds of windowed sinc filters because my understanding of the explanation on the filters page was that if I had unlimited time it was OK to just use sinc, but if I'm wrong there let me know.

Thanks again,

Halle

[GreenKoopa]

You seem very determined, so here is more:

The easiest and most accurate way to compare two results: Put them exactly on top of each other and switch between. This lets your eye catch the subtle differences. I find it aids comparing, and learning too. (Does anyone know how to create an image file with layers in ImageMagick?)

There is filter talk at the GIMP or Photoshop forums. And entire college courses. But since results are so image and human perception dependent, it is all directed trial and error in the end. Since they are all just variations on resize (resampling), many filters will give very similar (even identical) results for a given image.

You haven't shown us a sample image, but I stand by simpler filters working best for cartoonish-colored drawings. The filters that make use of more distant neighbors are really intended for real-life colors as in photography.

If a point filter works best, check out -sample. I'm not sure what it is, but I also ran across -adaptive-resize.

More can significantly impact your resize than just the filter. You already hit on a post sharpening step. I recall that sharpening is most important for size reductions, but I'm not positive. Also consider gamma, colorspace, and color profile. These three concern the basic question of resampling: What exactly is halfway between two points, black (#000) and white (#fff) for example? More on this if anyone desires and already understands what gamma, colorspace, and color profile mean.

You mentioned an alpha channel. This could be separated from the image and resized using its own filter or sharpening. Unfortunately, I don't have and specific ideas here.

I don't claim to be an expert, so these were more ideas than advice.

[NicolasRobidoux]

Sorry for the terse answer but here is anyway (more a tease than anything, and Anthony knows way more about all this than I):

Given that it's 200% (not a very large ratio) and that, if I understood the description of your images, you have sharp transparency transitions, I would first try triangle (=bilinear), cubic (=B-Spline smoothing), hermite or gaussian blur with a tight blur. Then, I'd give a go to resizing with distort instead of resize. A personal favorite (with very recent svn) is the Jinc-Jinc Lanczos which distort uses instead of the usual Sinc-Sinc Lanczos (or its marginally sharper relative LanczosSharp), although it is not clear to me that this is the best fit for "blocks" (?). Finally, I'd consider enlarging to a size exactly one pixel larger all around than what you want in the end, and cropping off this extra border. The reason is that this way you can minimize boundary effects (it may, however, increase Moire). This last piece of advice is not so important if "nothing happens near the boundary" of your images (e.g. it's transparent near the boundary, all around).

(Apologies for the opaque advice without code.)

[GreenKoopa]

I would certainly take NicolasRobidoux or Anthony's advice over mine.

[NicolasRobidoux]

The suggestion of separating the alpha channel from the image and using a different filter on it is also a good one. The 'triangle, cubic, hermite or gaussian" suggestion above was made specifically because of what these filters do with sharp transitions (they are so-called "monotone" methods: no "negative lobe"). If you resample the alpha channel separately, this gives you more freedom w.r.t. what you use with the color channels: you can use, say, Lanczos on RGB without getting hit twice with the halos (once for the color channel, which is "multiplied" by the alpha).

[NicolasRobidoux]

I also agree with giving a try to adaptive resize.

[anthony]

Basically, you need to decide on exactly what you want from the upscale.

Do you want to retain 'blocky' pixelated look, or a rounded dot look.

Do you want the number and exact types of colors preserved?

Do you want shades between pixels, and to transparency?

It is the answer to these questions that will determine the method you will want to use.



One method of upsizing however is currently NOT provided by IM examples.
These are the 'Scale X' double or trible upscaling algorithms.

See Wikipedia as a starting point
http://en.wikipedia.org/wiki/Pixel_art_ ... algorithms

These algorithms try to preserve the essence of 'pixel art' while enlarging it.
I think this is actually what you are really looking for.

[Halle]

Thanks again GreenKoopa and hello Nicolas and Anthony, really nice to get all of your input. I can answer all of these questions now that I've done my experiment:

Q: Do you want to retain 'blocky' pixelated look, or a rounded dot look.
A: Definitely rounded dot look with the least blurring possible -- there are some pretty curves and I'd love to maintain them as such.

Q: Do you want the number and exact types of colors preserved?
A: No, there is no index and color shift isn't a big deal, as long as the alpha channel remains functional as a transparency mask.

Q: Do you want shades between pixels, and to transparency?
A: Shades between pixels is OK, making the transparency gradual probably would be bad.

Now, I am delighted to get such good advice from many people who know what's what, but I am going to push my luck and ask for some code examples because I really can't make heads or tails without. As you can see I'm not averse to doing some research and trying things out, but I could use a leg up to follow your more-complex suggestions such as separating the alpha channel and doing operations on it, and this advice "Then, I'd give a go to resizing with distort instead of resize. A personal favorite (with very recent svn) is the Jinc-Jinc Lanczos which distort uses instead of the usual Sinc-Sinc Lanczos (or its marginally sharper relative LanczosSharp)" and adaptive resize (I'll update to the current build so I can use the advice). Thanks very much, I've already gotten great answers to my question so examples would just be icing on the cake.

[GreenKoopa]

-distort is powerful, but complex enough to have its own examples page. It shines most when combining two resample operations, such as resizing and rotating in a single step. It handles many other needs too, but I don't yet understand why it would be worth the headache for a simple resize. If you do look it up, you would use something like:
-interpolate filter -filter type -distort ScaleRotateTranslate "2 0"

Use -channel and -separate to apply different filters to each color channel.

[GreenKoopa]

My apologies for assuming you wanted to keep the 'blocky' pixelated look.

Using a separate filter for alpha:

Code: Select all

convert in.png -filter your_color_filter -resize 200% rgb.png
convert in.png -channel A -separate -filter your_alpha_filter -resize 200% alpha.png
convert rgb.png -channel RGB -separate alpha.png -channel RGBA -combine out.png

This is one way; maybe someone knows a better one. Of course, any solution could skip the working files after you understand what is going on.

Now I'm confused: When does -resize or -distort use -interpolate vs -filter?

[anthony]

The best Idea is probably to resize normally, or even using a Slightly 'sharpened' Gaussian (interpolated gaussian) resize.
See Filter Blur Expert Control
http://www.imagemagick.org/Usage/resize/#filter_blur

BUT then sharpen the result using some form of (un)sharpen operation.
Sharpen Resized Images
http://www.imagemagick.org/Usage/resize/#resize_unsharp

This should produce the smoothest edges due to the Gaussian circular nature.

Distort and Resize are very similar and thanks to the help from Nicholas to fix its internal algorithms it is now producing near equivalent results, though the filtering method is different.

There are some heavy discussions about this going on at this time in the Development forum.