A source pixel becomes a fraction of an output pixel
A one-pixel line fades or disappears during downscaling because it covers less than one pixel in the smaller image. Multiply the source line width by the resize scale. A 1-pixel line at 50% size has a 0.5-pixel output footprint; at 25%, it has a 0.25-pixel footprint. The renderer must combine or select source samples because it cannot store a fractional pixel.
The line's position also matters. The CSS Images specification shows that nearest-neighbor downscaling to 50% can skip every second source pixel. [2] Pillow describes its NEAREST filter in the same plain terms: choose one input pixel and ignore the others. [4] A line can therefore survive at one source column and vanish after moving one pixel sideways.
Smoothing trades a hard line for lower contrast
A smoothing filter combines nearby samples instead of selecting only one. That usually prevents a sudden all-or-nothing loss, but it spreads a black line into lighter gray pixels. The HTML canvas API enables image smoothing by default and exposes low, medium, and high quality preferences. [1] MDN also documents that disabling imageSmoothingEnabled keeps scaled pixels sharp. [3]
These settings describe intent, not one universal kernel. The HTML standard does not require every browser to use an identical resampling algorithm. [1] Pillow likewise offers several named filters with different support windows and quality trade-offs. [4] Test the browser and export path that will produce the final file.
A Chrome test separates fading from missed samples
We drew a black vertical line on a 64 × 16 white canvas, shifted it across source columns 30 through 33, and resized the canvas to 48, 32, and 16 pixels wide. Headless Chrome 150 used high-quality canvas smoothing for one pass and disabled smoothing for a nearest-style pass. We measured raw canvas pixels before PNG encoding, so JPEG compression did not affect the result.
At 50% size, smoothing produced RGB 127 as the darkest pixel for every line position: visible gray instead of source black. With smoothing off, two of four positions stayed black and two vanished. At 25%, smoothing produced RGB 191 for all four positions, while the nearest-style pass lost three of four. These values describe one controlled Chrome run, not a cross-browser constant.
Calculate a safer source line width
Use ceil(1 ÷ scale factor) as a minimum starting thickness. At 75%, ceil(1 ÷ 0.75) gives 2 source pixels. At 50%, the result is also 2. At 25%, start with 4. This gives the feature at least one output pixel of geometric width before grid alignment and filter behavior divide its contrast.
Treat the formula as a footprint rule, not a promise of a fully black output pixel. In our smoothed test, 2-pixel lines at 75% and 50% reached black. A 4-pixel line at 25% reached only RGB 127 because its footprint straddled the output grid. Increase contrast or line width when a faint rule would still fail the design.
Verify the exported PNG at its final size
Start with a lossless source and use Resize by Dimensions to create the exact target width and height. Export PNG first, open the downloaded file at 100%, and inspect every thin rule, grid line, icon stroke, and small text edge. This isolates resize loss before a lossy format adds another variable.
Use the Image Diff Checker when visual inspection leaves doubt. Resize a reference copy to the same dimensions, compare aligned pixels, and keep the final download rather than judging a scaled page preview. If a vector source exists, render it directly at the target size; the SVG guide explains why vectors remain a better master for line art.
One-pixel line results from the Chrome canvas test
| Output width | Scale | Smoothed darkest RGB | Nearest positions lost | Starting source width |
|---|---|---|---|---|
| 48 of 64 px | 75% | 42–128 | 1 of 4 | 2 px |
| 32 of 64 px | 50% | 127 | 2 of 4 | 2 px |
| 16 of 64 px | 25% | 191 | 3 of 4 | 4 px |
Use this test when
- A diagram, grid, signature, or icon contains one-pixel strokes
- A line survives at one size but fades at a smaller target width
- You can compare a lossless source with the final exported PNG
Use a separate check when
- A browser zoom preview changes while the downloaded pixels stay intact
- JPEG ringing or chroma artifacts appear after the resize step
- A vector master can render clean strokes at the exact target size
Continue with the closest resize and format guides
Related imgrove tools
Resize once, then inspect the downloaded pixels
Choose exact output dimensions, make a PNG in your browser, and inspect the downloaded image at 100%. The tool uses the browser's canvas resize path and does not offer a selectable resampling kernel, so keep your source and verify every thin feature. Use the feedback email below to send a test result, bug, or correction.
Try Resize by DimensionsTry the workflow and tell us what worked, what failed, or what needs clearer guidance: hi@imgrove.com.