How to achieve high-quality downscaling of diagrams (like in Firefox)?

Question

I often need to downscale raster images consisting of thick straight lines and other thick curves, like this one:

.

Using GIMP 2.8.16 and its various interpolation options to resize the image to 600×600 sq. pixels, I obtain the following images:

No interpolation

Linear

Cubic

Sinc (Lanczos3)

Now, compare this to the result achieved by Firefox the web browser:

Firefox 47.0

Look, for instance, at the topmost grey line. If you compare¹ each of the GIMP-produced images with the one obtained using Firefox carefully, you'll see that in each comparison, the line looks far better in the Firefox-generated image.

Now, as you might imagine, using a web browser to downscale images isn't very convenient, so I wonder if there is any image editor able to downscale images like this as nicely as Mozilla Firefox. I would prefer an easy way to do batch resizing.

¹ Make sure your browser isn't applying any interpolation of its own when you view the images. You might want to open a new browser window and open two tabs in it: one with a GIMP version, and the other with the Firefox version. Then use Ctrl+Tab to switch tab quickly. This will make the differences very obvious to most human observers.

Answer 1

I have discovered that ImageMagick 7 produces a result as nice as the one obtained by Mozilla Firefox:

To resize an image using ImageMagick, use the command:

magick image.png -resize 600 small.png

This will resize image.png to a width of 600px, preserving the aspect ratio, and saves the output as small.png.

After some trial and error, I even found a way to do batch resizing using cmd.exe on Windows 7. The command:

for %f IN (*.png) DO magick %f -resize 600 scaled/%f

will resize all PNG images in the current directory to a width of 600px, preserving the aspect ratio, and placing the output images in the scaled subdirectory.

Answer 2

I have been struggling looking for a good downscale(r) myself mostly used for scaling application screenshots for web documentation. my results:

1. Photoshop: Bad

2. MS Word: Good Insert the image on a document, re-size it, take a screen capture, save it as png with i.e. Paint.exe. The results are good but MS does not let you control the size by pixels (only inches or %).

3. ReSize.exe (from RoboHelp suite): Good But it does not directly handle png; I use this method now converting png->bmp-resize-bmp->png. This is my current choice.

Answer 3

You can use photoshop's "bicubic sharper" option

Or you can scale using bicubic interpolation THEN "slightly" sharpen the image using gimp or whatever tool you want

https://docs.gimp.org/en/plug-in-sharpen.html

https://docs.gimp.org/en/gimp-image-scale.html

This is photoshop's bicubic sharper

This is photoshop's bicubic smoother

This is what happens when you apply photoshop's "sharpen edges" and then use the normal bicubic interpolation. (I recommend this one). also, I zoomed in and compared this to the firefox output, they are very similar.