Our application allows users to drag & drop or select images to upload through any browser. The images are resized if larger than 960x720 and converted to JPEG at 80% quality. Our test image is a photo taken from an iPhone in JPEG format at 4032x3024 pixels at a file size of 5.58 MB. On any windows PC using any browser, this photo is resized to 171 KB (176,045 bytes), and fairly sharp and crisp.
On any Apple iOS v15/v16 device or Mac device, using ANY browser, this photo is resized to 198 KB (203,635 bytes) and BLURRY.
We've tested from iPad Air, iPhone v15, iPhone v16, iPad Pro, MacBook... using Firefox, Chrome and Safari. The image is resized EXACTLY the same every time... 198 KB and BLURRY.
The retina display and devicePixelRatio are irrelevant as the canvas is not part of the DOM and never displayed. This is simply an absolute pixel resize from 4032x3024 to 960x720. This appears to be handled at the OS level and not within the browser.
All images result in a final 960x720 pixel image at 96 dpi, which is the desired result. Both are JPEG. Only the Apple resizing algorithm is horrific. And here I thought Apple prided themselves on image rendering.
If scaling the image by an integral ratio, the image is crisp on Apple systems. So, reducing the image from 4032x3024 to 1008x756 (a perfect 4x multiplier) yields a sharp image. But 4032x3024 to 960x720 is a 4.2 ratio, and results in a blurry image on Apple, while Windows results in a fairly crisp image.
The code is as simple and straightforward as possible. Has anyone run into this? Does anyone have a solution to make images resize on iOS as sharp and crisp as on Windows? Is Apple aware that their image scaling algorithm is horrific?
function ResizeImage( image )
{
var width = 960;
var height = 720;
var canvas = document.createElement( 'canvas' );
canvas.width = width;
canvas.height = height;
var context = canvas.getContext( '2d' );
context.imageSmoothingQuality = 'high';
context.drawImage( image, 0, 0 );
return canvas.toDataURL( 'image/jpeg', .8 );
}
