Add Optimize Images setting and enable it by default #21981

fluiddot · 2023-11-06T12:46:21Z

Description

This PR adds the Optimize Images setting to the App Settings screen, similar to what we have in the Android version.

Media Settings added/updated:

Optimize Images: When turning on, max image upload size and image quality will be applied to images upon upload. When it's off, images will be uploaded with high quality and their original size.
Max Image Upload Size: Maximum size allowed in image uploades. If the image to upload is bigger, it will be scaled to the value set as maximum. This setting won't be shown if Optimize Images setting is off.
Image Quality: Quality to be applied to image uploads. This setting won't be shown if Optimize Images setting is off.

By default, the Optimize Image setting will be on and we'll apply the following default values to other media settings:

Max Image Upload Size: 2000px
Image Quality: Medium

NOTE: If the user already previously set a value in Max Image Upload Size setting, it will remain that value.

Additionally, in the following upload flows, the app will ask the user to keep or disable the Optimize Images setting. The popup will only be shown once.

~~Media screen - Uploading using Choose from My Device/Take a Photo option.~~ The media screen is now using SiteMediaViewController (Add Optimize Images setting and enable it by default #21981 (comment)).
New Media Screen (SiteMedia) - Uploading using Choose from My Device/Take a Photo option.
NOTE: This new screen is only available via the Media Modernization feature flag.
Gutenberg Editor - When using specific blocks and using Choose from My Device/Take a Photo option.
- Image block
- Gallery block
- Cover block
- Media & Text block
Gutenberg Editor - Adding/updating the featured image and using Choose from My Device/Take a Photo option.

Screenshots

Default values	Optimize Images popup

Video captures

Media settings	Optimize Images popup
ios-optimize-images-setting.mp4	ios-optimize-images-popup.mp4

To test

Default setting should be changed if it has never been set before

Perform a fresh installation of the app.
Navigate to Me → App Settings.
Observe that Optimize Images setting is enabled by default.
Observe that Max Image Upload Size and Image Quality settings have the default values as shared in the PR's description.

Default setting should not be changed if it has been set previously

Set original as max image upload size

Install an older version.
Navigate to Me → App Settings.
Move the Max Image Upload Size setting to a different value than Original.
Move the Max Image Upload Size setting back to the Original value.
Install the installable build from this PR.
Navigate to Me → App Settings.
Observe that the Optimize Images setting is enabled and that Max Image Upload Size setting remains in the previously set Original value.

Set max image upload size

Install an older version.
Navigate to Me → App Settings.
Move the Max Image Upload Size setting to a different value than Original.
Install the installable build from this PR.
Navigate to Me → App Settings.
Observe that the Optimize Images setting is enabled and that Max Image Upload Size setting remains in the previously set value.

Resize settings should function as expected

Add an image to the device with dimensions above 2000px.
Remove and install the app.
Navigate to the Posts/Pages screen.
Open/create a post/page.
Add an Image block.
Tap on the Choose from device option.
Select the image previously added with large dimensions.
When the Optimize Images pop-up is displayed, select the option to keep image optimization.
Wait for the image upload to finish.
Go to the browser and navigate to the Media screen of the site.
Select the uploaded image and click on the Edit button.
Observe that dimensions displayed under the DIMENSIONS section are lower than the original ones. The dimensions shouldn’t exceed the value set in Max Image Upload Size setting.
Observe that the file size under the FILE SIZE section is smaller than the original file size.

Compression settings should function as expected

Add an image to the device with a large file size.
Remove and install the app.
Navigate to the Posts/Pages screen.
Open/create a post/page.
Add an Image block.
Tap on the Choose from device option.
Select the image previously added with a large file size.
When the Optimize Images pop-up is displayed, select the option to keep image optimization.
Wait for the image upload to finish.
Go to the browser and navigate to the Media screen of the site.
Select the uploaded image and click on the Edit button.
Observe that the file size under the FILE SIZE section is smaller than the original file size.

Pop-up should be displayed in specific sources

Media Screen

Remove and install the app.
Navigate to My Site → Media.
Tap on ➕ button and select Choose from My Device option.
Select one or multiple items.
Tap on the Add button.
Observe that the Optimize Images pop-up is displayed.

NOTE: The popup will be displayed independently to the media type. I.e. it could be shown when only uploading videos.

Gutenberg Editor

Preparation:

Remove and install the app.
Navigate to My Site → Posts (or Pages).
Create a post.

Image Block - From Device

Add any of the following blocks:
- Image block
- Gallery block
- Cover block
- Media & Text block
Tap on the Choose from device option.
Select one item (or multiple items when using Gallery block).
Observe that the Optimize Images pop-up is displayed.

Image Block - Take Photo

Add any of the following blocks:
- Image block
- Gallery block
- Cover block
- Media & Text block
Tap on the Take a Photo option.
Take a photo and use it.
Observe that the Optimize Images pop-up is displayed.

Featured Image - From Device

Tap on the ... button located on the top bar.
Tap on the Post Settings options.
Navigate to the Featured Image section and tap on Set Featured Image.
Tap on the Choose from Device option.
Select one time.
Observe that the Optimize Images pop-up is displayed.

Featured Image - Take Photo

Tap on the ... button located on the top bar.
Tap on the Post Settings options.
Navigate to the Featured Image section and tap on Set Featured Image.
Tap on the Take a Photo option.
Select one time.
Observe that the Optimize Images pop-up is displayed.

Check events

Observe that the following events are sent:

APP_SETTINGS_OPTIMIZE_IMAGES_CHANGED
- Source: Changing Optimize Images setting in App Settings screen.
- Property enabled: True if the app is optimizing images for uploads.
APP_SETTINGS_MAX_IMAGE_SIZE_CHANGED
- Source: Changing Max Image Upload Size setting in App Settings screen.
- Property size: Max size used.
APP_SETTINGS_IMAGE_QUALITY_CHANGED
- Source: Changing Image Quality setting in App Settings screen.
- Property quality: Quality value used.
APP_SETTINGS_OPTIMIZE_IMAGES_POPUP_TAPPED
- Source: When the Optimize Images popup is displayed, tap on one of the two options. The popup can be triggered by removing and reinstalling the app and then uploading an image.
- Property option: on if the user decided to leave image optimization on. off if the user wants to disable it.

Regression Notes

Potential unintended areas of impact
These changes mainly affect the App Settings screen and media upload flows.
What I did to test those areas of impact (or what existing automated tests I relied on)

Manual testing.
MediaSettingsTests

What automated tests I added (or what prevented me from doing so)

Expanded MediaSettingsTests to cover the new changes in MediaSettings file.
I plan in a separate PR to incorporate UI tests to cover the Optimize Images popup.

PR submission checklist:

I have completed the Regression Notes.
I have considered adding unit tests for my changes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

Portrait and landscape orientations.
Light and dark modes.
Fonts: Larger, smaller and bold text.
High contrast.
VoiceOver.
Languages with large words or with letters/accents not frequently used in English.
Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
iPhone and iPad.
Multi-tasking: Split view and Slide over. (iPad)

wpmobilebot · 2023-11-06T13:25:16Z

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr21981-119b325
	Version	23.7
	Bundle ID	org.wordpress.alpha
	Commit	`119b325`
	App Center Build	WPiOS - One-Offs #7911

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

wpmobilebot · 2023-11-06T13:29:46Z

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr21981-119b325
	Version	23.7
	Bundle ID	com.jetpack.alpha
	Commit	`119b325`
	App Center Build	jetpack-installable-builds #6934

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

kean · 2023-11-06T16:49:55Z

WordPress/Classes/Services/MediaSettings.swift

+            case .medium:
+                return NSLocalizedString("Medium", comment: "Indicates an image will use medium quality when uploaded.")
+            case(.low):
+                return NSLocalizedString("Low", comment: "Indicates an image will use low quality when uploaded.")


80%, which is the current default, is considered optimal for web uploads. I would suggest going with 10% increments where 80% would be "Default", "Standard" or something like that.

Thanks @kean for sharing this useful info 🙇 ! To be honest, I merely chose these quality values based on the ones we have in the Android version (reference). However, as you suggested, it might be interesting to use different values and more close to standards:

Maximum/Very High: 100%.

High: 90% (following this article, this JPEG quality gives a very high-quality image while gaining a significant reduction on the original 100% file size).

Medium (default): 80% (following this article, this JPEG quality gives a greater file size reduction with almost no loss in quality).

Low: 70% (following this article, 75% JPEG quality and lower begins to show obvious differences in the image, which can reduce your website user experience).

Suggestion applied in b6f0127.

Note that I removed Very High option as the above four options should be enough to set different quality settings.

fluiddot · 2023-11-07T11:20:35Z

@twstokes I'm assigning you as a reviewer in case you could take a preliminary review of the PR. I'm mostly looking for feedback regarding the approach, particularly for https://github.com/wordpress-mobile/WordPress-iOS/pull/21981/files#diff-45d2b2ed5b4684d81e4933cefdc647b6090ac127a7dd7e5ff11f5bdee894aa12R265-R280 related to animating table view cells.

The PR is almost ready, I'm just waiting to incorporate some unit tests and ~~register the events in Tracks~~ (events can be registered later on).

Thanks for the help 🙇 !

The Very High option has been removed and the rest of values have been updated following more standard industry values (#21981 (comment)).

…ller`

fluiddot · 2023-11-13T10:05:26Z

thanks for the ping @twstokes . Yeah I would put the order in reverse, and a description somewhere of what this does. We could start with a simple table row footer.

I'd like to share that I set this order based on the current implementation on Android.

App Settings	Max Image Upload Size	Image Quality

Additionally, we already use this order in "Max Video Upload Size":

However, we could inverse it for iOS if seems more suitable.

I am confused when I see the menu initially, I have options for both max file size, and image quality. Why would I set a max upload size, when this optimiser should be sorting stuff for me? As a user I don't quite understand the relationship between the two. Maybe the 'max size' could be a secondary option in the same details view as the image quality option.

Good observation. I understand that the goal of presenting these two settings (i.e. Max Upload Size and Quality) is mainly to allow the user to customize the optimization. By default, the values will be the ones we consider optimal. Similar to my above comment, this implementation is based on what we currently have in the Android version.

Following your comments @osullivanchris, we could have an option below "Optimize Images" named "Optimization Settings" where we'd present these two settings. WDYT?

Also usually I feel like max size would be related to file size rather than pixel size?

Good point, I shared a similar comment in #21981 (comment). On Android this setting is displayed as "Maximum Image Size", I agree that size is usually more related to file size and not dimensions. Hence, we could rename the setting to something like "Max Image Upload Dimensions" or "Maximum Image Dimensions". WDYT?

UPDATE: For videos we also use the word size: "Max Video Upload Size". We might consider using resolution instead.

fluiddot · 2023-11-13T11:09:22Z

@twstokes @SiobhyB I've addressed all the feedback shared, hence the PR is ready for another review. I'm going to keep the [Status] DO NOT MERGE label until we decide the default optimization values for Max Image Upload Size and Image Quality.

twstokes · 2023-11-21T15:40:59Z

hence the PR is ready for another review

On it! 👀

To match the default values for image quality for iOS (see: wordpress-mobile/WordPress-iOS#21981), this commit changes the defaults for quality to the following: - Low = 70% - Medium = 80%

kean · 2023-11-22T02:14:58Z

Heads up, @fluiddot: MediaLibraryViewController was removed and replaced with SiteMediaViewController in 23.7.

twstokes

Great work @fluiddot! The code LGTM and I left some optional comments. 🚀

WordPress/Classes/ViewRelated/Me/App Settings/AppSettingsViewController.swift

# Conflicts: # WordPress/Classes/ViewRelated/Media/MediaLibraryViewController.swift

fluiddot · 2023-11-22T12:22:09Z

Heads up, @fluiddot: MediaLibraryViewController was removed and replaced with SiteMediaViewController in 23.7.

Thanks @kean for the heads up 🙇. I also noticed this when solving the file conflicts with trunk (119b325).

fluiddot · 2023-11-22T12:23:52Z

@twstokes I've applied the suggestions from your recent feedback. The PR is approved so I'd consider it ready to merge, but let me know if you'd like to perform a quick review before. Thanks for the help 🙇 !

fluiddot · 2023-11-22T15:08:55Z

WordPress/Classes/Services/MediaSettings.swift

            return Int.max
        } else {
            return maxImageSizeSetting
        }
    }

+    var imageQualityForUpload: ImageQuality {
+        return imageOptimizationEnabled ? imageQualitySetting : .high


When image optimization is disabled, the quality used is High not Maximum. This behavior matches the previous implementation where preferredImageCompressionQuality was used:

WordPress-iOS/WordPress/Classes/Services/MediaImportService.swift

Line 22 in e7a35f1

@objc static let preferredImageCompressionQuality = 0.9

https://github.com/wordpress-mobile/WordPress-iOS/pull/21981/files#diff-c162ac46983f01e3b35e008aa8b553cc0cb2b010a84926da308ee9b875e35638L381

twstokes · 2023-11-22T15:16:28Z

@twstokes I've applied the suggestions from your recent feedback. The PR is approved so I'd consider it ready to merge, but let me know if you'd like to perform a quick review before. Thanks for the help 🙇 !

Let's merge @fluiddot! 🚀

fluiddot added 13 commits November 3, 2023 20:50

Add optimize image popup

624c1f4

Add image quality setting to App settings screen

574f2d1

Add image optimization setting to App Settings creen

454ed20

Disable max image setting when image optimization is off

92aa560

Set optimized value as default for max image size

9df1f57

Use image quality setting when compressing images before upload

39b5c63

Add new event for tracking max image size setting changes

b9f0892

Display optimize images popup when uploading from device media

351b740

Display optimize images popup when uploading after taking a photo

c0bd61d

Fix typos in MediaCoordinator

a3c5fe8

Add inline comment to image size for upload calculation

1040b88

Move media settings default values to constants

bf760b9

Update media setting unit test

eaba7b1

fluiddot added [Type] Enhancement Media App Settings labels Nov 6, 2023

fluiddot self-assigned this Nov 6, 2023

Remove unneeded self reference in advertiseImageOptimization handlers

637a196

kean reviewed Nov 6, 2023

View reviewed changes

fluiddot requested a review from twstokes November 7, 2023 11:20

fluiddot added the [Status] Needs Copy Review label Nov 7, 2023

fluiddot added 4 commits November 7, 2023 15:11

Add MediaSettings unit tests

5b2c7a6

Update release notes

2a4dd6b

Update image quality values

b6f0127

The Very High option has been removed and the rest of values have been updated following more standard industry values (#21981 (comment)).

Merge branch 'trunk' into add/image-optimization-setting

3bc4737

fluiddot marked this pull request as ready for review November 7, 2023 14:38

fluiddot requested a review from SiobhyB November 7, 2023 14:38

Remove casting from event properties passed in `AppSettingsViewContro…

f29f4d2

…ller`

fluiddot added 5 commits November 13, 2023 11:35

Use unique reverse-DNS naming style in updated strings

b968b02

Rename constant defaultMaxImageDimension

477777c

Rename imageOptimizationSetting

92d4d13

Merge branch 'trunk' into add/image-optimization-setting

294a62f

Update release notes

63d6250

SiobhyB mentioned this pull request Nov 21, 2023

Update values associated with "Low" and "Medium" image quality settings wordpress-mobile/WordPress-Android#19644

Merged

3 tasks

twstokes approved these changes Nov 22, 2023

View reviewed changes

fluiddot added 3 commits November 22, 2023 13:04

Apply code improvements in AppSettingsViewController

b71b7f8

Improve show/hide animation of image optimization settings

132bfbc

Merge branch 'trunk' into add/image-optimization-setting

119b325

# Conflicts: # WordPress/Classes/ViewRelated/Media/MediaLibraryViewController.swift

fluiddot removed [Status] DO NOT MERGE [Status] Needs Copy Review labels Nov 22, 2023

fluiddot commented Nov 22, 2023

View reviewed changes

fluiddot merged commit 693d5cb into trunk Nov 22, 2023

fluiddot deleted the add/image-optimization-setting branch November 22, 2023 15:17

SiobhyB mentioned this pull request Nov 22, 2023

Updates to image optimization settings wordpress-mobile/WordPress-Android#19581

Merged

3 tasks

fluiddot mentioned this pull request Nov 27, 2023

Add UI tests of image optimization setting #22095

Merged

13 tasks

This was referenced Nov 27, 2023

Editor: images blink when upload is completed #21358

Closed

Remove the MediaThumbnailService #22106

Merged

tiagomar mentioned this pull request Dec 15, 2023

[UI Test] Dismiss image optimization popup #22237

Merged

fluiddot mentioned this pull request Jan 15, 2024

Use raw value for the quality parameter in app_settings_image_quality_changed event #22396

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Optimize Images setting and enable it by default #21981

Add Optimize Images setting and enable it by default #21981

fluiddot commented Nov 6, 2023 •

edited

Loading

wpmobilebot commented Nov 6, 2023 •

edited

Loading

wpmobilebot commented Nov 6, 2023 •

edited

Loading

kean Nov 6, 2023

fluiddot Nov 6, 2023 •

edited

Loading

fluiddot Nov 7, 2023

fluiddot Nov 7, 2023

fluiddot commented Nov 7, 2023 •

edited

Loading

fluiddot commented Nov 13, 2023 •

edited

Loading

fluiddot commented Nov 13, 2023

twstokes commented Nov 21, 2023

kean commented Nov 22, 2023

twstokes left a comment

fluiddot commented Nov 22, 2023

fluiddot commented Nov 22, 2023

fluiddot Nov 22, 2023

twstokes commented Nov 22, 2023

Add Optimize Images setting and enable it by default #21981

Add Optimize Images setting and enable it by default #21981

Conversation

fluiddot commented Nov 6, 2023 • edited Loading

Description

Screenshots

Video captures

To test

Default setting should be changed if it has never been set before

Default setting should not be changed if it has been set previously

Set original as max image upload size

Set max image upload size

Resize settings should function as expected

Compression settings should function as expected

Pop-up should be displayed in specific sources

Media Screen

Gutenberg Editor

Image Block - From Device

Image Block - Take Photo

Featured Image - From Device

Featured Image - Take Photo

Check events

Regression Notes

wpmobilebot commented Nov 6, 2023 • edited Loading

wpmobilebot commented Nov 6, 2023 • edited Loading

kean Nov 6, 2023

Choose a reason for hiding this comment

fluiddot Nov 6, 2023 • edited Loading

Choose a reason for hiding this comment

fluiddot Nov 7, 2023

Choose a reason for hiding this comment

fluiddot Nov 7, 2023

Choose a reason for hiding this comment

fluiddot commented Nov 7, 2023 • edited Loading

fluiddot commented Nov 13, 2023 • edited Loading

fluiddot commented Nov 13, 2023

twstokes commented Nov 21, 2023

kean commented Nov 22, 2023

twstokes left a comment

Choose a reason for hiding this comment

fluiddot commented Nov 22, 2023

fluiddot commented Nov 22, 2023

fluiddot Nov 22, 2023

Choose a reason for hiding this comment

twstokes commented Nov 22, 2023

fluiddot commented Nov 6, 2023 •

edited

Loading

wpmobilebot commented Nov 6, 2023 •

edited

Loading

wpmobilebot commented Nov 6, 2023 •

edited

Loading

fluiddot Nov 6, 2023 •

edited

Loading

fluiddot commented Nov 7, 2023 •

edited

Loading

fluiddot commented Nov 13, 2023 •

edited

Loading