Resize images to exact dimensions
When you take a 100x100 pixel image and resize it to 200x200, the surface area quadruples. The computer physically has to invent 30,000 brand new pixels that didn't exist in the original file.
It does this using complex mathematical algorithms collectively known as Interpolation.
By default, modern browsers use high-quality algorithms like Bicubic or Lanczos interpolation when resizing photos.
To guess what color a newly invented pixel should be, the algorithm looks at the 16 surrounding pixels (a 4x4 grid) from the original image and calculates a weighted mathematical average. This is why photos resized upwards often look smooth but can appear slightly blurry or "soft".
For pixel art, diagrams, or barcodes, that smoothing algorithm completely ruins the image by adding fuzzy gray pixels to sharp black edges.
In those cases, developers instruct the canvas to use Nearest Neighbor interpolation (imageSmoothingEnabled = false), which skips the averaging math entirely. It simply duplicates the exact color of the closest original pixel, keeping edges perfectly sharp blocky.
If you enlarge an image, where do the new pixels come from?
