Research resize options scales

[addyosmani]

It's unclear how Safari on iOS 13 scales images (e.g what do small, medium etc translate to - 0.5x? a specific max W x H?). I've reached out to Jonathan Davis to see if we can learn more here.

If it's not possible to determine this directly, we could experiment with resizing images with this feature and compare the differences for each setting. The purpose of this is to check if it makes sense to align on the same configuration.

[tomByrer]

Even if you could figure it out, Large | Medium | Small is awful UX. Way to vague, & what is 'large' today will be small in a few years. Think how much computer screen sizes have changed over the years, let alone the past 10 years of phone cameras.

I kinda like Android's photo resolution switcher; less vague. But they don't have resizing for social shareing; I had to manually resize this in Paint 😜 ^ what a great example of the need for resizing uploads!

I like the basic resizing idea very much though, I just believe the sizes should be specific both in the HTML/JS & the UX.

[zspitzer]

one of the problems with the existing approaches is that the canvas.toDataUrl doesn't consistently apply compression, webkit doesn't apply compression the same as other browsers, resulting in larger images from Safari than Firefox or Chrome. Which is again a problem for mobile safari users who end up uploading larger images. Feedback from the webkit devs is that the compression factor is only a hint and not a must.

Here is a quick demo https://jsfiddle.net/xkryswj3/ it no longer even works on mobile safari, it hangs

There is a bug but it's marked secure https://bugs.webkit.org/show_bug.cgi?id=154713

[mooyoul]

Here are some test results:

Test Condition

iPhone X, iOS 13.1.3, Wi-Fi Connected

Still Image (HEIC/HEIF, Live Photo disabled)

	Preview	Format	Size	Resolution	Notes
Original		HEIF/HEIC	1,193,744 bytes	4032 * 3024	It has Rotate 90 CW orientation value
Small		JPEG	25,240 bytes	320 * 240	Orientation was removed during resize process
Medium		JPEG	84,093 bytes	640 * 480	Orientation was removed during resize process
Large		JPEG	238,362 bytes	1280 * 958	Orientation was removed during resize process
Actual Size		JPEG	2,352,391 bytes	4032 * 3024	It has Rotate 90 CW orientation value

Still Image (HEIC/HEIF, Live Photo enabled)

	Preview	Format	Size	Resolution	Notes
Original		HEIF/HEIC	915,654 bytes	4032 * 3024
Small		JPEG	16,097 bytes	320 * 240
Medium		JPEG	57,117 bytes	640 * 480
Large		JPEG	189,395 bytes	1280 * 958
Actual Size		JPEG	2,111,376 bytes	4032 * 3024

Super High-res Still Image (JPEG, Saved from Unsplash)

Original Source: https://i2.wp.com/daniellecomer.com/wp-content/uploads/2018/07/florian-klauer-489-unsplash-1.jpg

	Preview	Format	Size	Resolution	Notes
Original		JPEG	8,554,720 bytes	7500 * 11000
Small		JPEG	11,729 bytes	218 * 320
Medium		JPEG	39,743 bytes	436 * 640
Large		JPEG	144,009 bytes	872 * 1280
Actual Size		JPEG	345,742 bytes	1535 * 2252

Thoughts

As you can see, Small / Medium / Large presets work by limiting size of longest axis (from 320px to 1280px, with 2x multiplier) but "Actual size" preset still looks mysterious.

Another critical issue is - All presets except "Actual size" preset, These presets don't preserve EXIF information like Orientation. The resized image loses Orientation data nor Orientation data wasn't respected during resize process. Maybe we need to investigate the details.

Update: I filed an issue to WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=203482

[henrydawson]

I'd just like to reinforce how critical the EXIF issue is that @mooyoul found. The webkit bug still isn't fixed, and it makes any photos uploaded practically useless - it means users would need to go through and manually rotate all photos like it's 2007 (not to mention the wasted developer time building custom rotation features). Any resized photos need to have the correct EXIF orientation.

I would also argue that having full EXIF data available (at least as an option) is a must. It appears WebKit currently strips all EXIF data (even for the actual size image), which means photos uploaded via iOS Safari are severely limited - you can't even sort the photos by date taken.