Eliminate hairlines from a vector graphics by converting to oversampled bitmap and then downscaling - How with ImageMagick?

Question

• I used Apple Numbers (a Spreadsheet app with styling options) to create a UX flowchart of various user interfaces of an app.

• Apple Numbers has a PDF export option.

• The problem is that even though some border lines in the table have been set to "none" in the export you nevertheless get small visible hairlines, see this cutout:

[

I want to to eliminate the hairlines by image processing

Before creating a flyover video over the graphics.

My basic idea is:

1. Convert vector to bitmap with very high resolution (oversampling, e.g. to 600 or 1200 DPI)
2. Then downsample to the target resolution (e.g. 150 DPI) with an algorithm which eliminates the hairlines (disappearing in the dominance of neighboring pixels) while overally still remaining as crisp and sharp as possible.

So step 1, I already figured out, by these two possibilities:

• a. Apple Preview has a PDF to PNG export option where you can specify the DPI.
• b. ImageMagick convert -density 600 source.pdf export.png

But for step 2 there are so many possibilities:

resample <DPI> or -filter <FilterName> -resize 25% or -scale 12.5% (when from 1200 to 150)

Please tell me by which methods (resample, resize, scale) and which of the interpolation algorithms or filters I shall use to achieve my goal of eliminating the hairlines by dissolving them into their neighboring pixels, with the rest (normal 1px lines, rendered text and symbols, etc) remaining as crisp as possible.

Answer 1

1. ImageMagick PDF tp PNG conversion with different DPI settings: convert -density XXX flowchart.pdf flowchart-ImageMagick-XXX.png

• flowchart-ImageMagick-150.png ; flowchart-ImageMagick-300.png ; flowchart-ImageMagick-600.png

2. Apple Preview PDF to PNG export with different DPI settings:

• flowchart-ApplePreview-150.png ; flowchart-ApplePreview-300.png ; flowchart-ApplePreview-600.png

3. Different downscaling processings

• a) convert -median 3x3 -resize 50% flowchart-ApplePreview-300.png flowchart-150-from-ApplePreview-300-median-3x3.png thanks to the hint from @ChristophRackwitz

• b) convert -filter Box -resize 25% flowchart-ImageMagick-600.png flowchart-150-from-ImageMagick-600-resize-box.png

Comparison

flowchart-ApplePreview-150.png

flowchart-150-from-ApplePreview-300-median-3x3.png

• ✅ Hairlines gone
• ❌ But font is not as crisp anymore, median destroyed that.

flowchart-150-from-ImageMagick-600-resize-box.png

• 🆗 Overally still quite crisp
• 🆗 Hairline only very very faint, even only faint when zoomed in

Both variants are somehow good enough for my KenBurns / Dolly cam ride over them. Still I wished that there'd be an algorithm that keeps cripness but still eliminates 1px lines in very high DPI bitmaps. But I guess this is a Jack of all trades only in my phantasy.

Processing Durations

• MacBook Pro 15'' (Mid 2014, 2,5 GHz Quad-Core Intel Core i7)

ImageMagick PDF to PNG

• PDF source Ca. 84x60cm (33x23'')
• 300dpi -> 27s
• 600dpi -> 1m58s
• 1200dpi -> 37m34s

ImageMagic Downscaling

time convert -filter Box -resize 25% 1@600.png 1@150-from-600.png
# PNG @ 39700 × 28066:  135.57s user   396.99s system   109%  cpu   8:08.08 total

time convert -median 3x3 -resize 50% 2@300.png 2@150-from-300-median3x3.png
# PNG @ 19850 × 14033:  311.48s user     9.42s system   536% cpu      59.76 total

time convert -median 3x3 -resize 50% 3@300.png 3@150-from-300-median3x3.png
# PNG @ 19850 × 14033:  237.13s user     8.33s system   544% cpu      45.05 total