status-mobile Reduce image sizes

fixes #20075

Summary

In this pr, we try to reduce the size of the images used especially in the onboarding process to help in reducing the size of the application.

This is just a sample of images. We could achieve much more space by simply reducing the size of all images. In this pr, all images with over 100kb in Ui2. Combine they had a sum total of 26mb and its been reduced to 7.2mb.

status: wip

May 16 '24 23:05 jo-mut

Jenkins Builds

Click to see older builds (30)

:grey_question:	Commit	:hash:	Finished (UTC)	Duration	Platform	Result
:heavy_check_mark:	3b998eb385e9da3e347e5348e8854081a9a96876	#1	2024-05-16 23:30:07	~5 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	3b998eb385e9da3e347e5348e8854081a9a96876	#1	2024-05-16 23:30:39	~5 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	3b998eb385e9da3e347e5348e8854081a9a96876	#1	2024-05-16 23:32:05	~7 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	3b998eb385e9da3e347e5348e8854081a9a96876	#1	2024-05-16 23:33:29	~8 min	`ios`	:iphone:`ipa` :calling:

:heavy_check_mark:	351751f40384611224846b3c321624c15f51f6b1	#2	2024-05-17 12:40:18	~4 min	`tests`	:page_facing_up:`log`

:heavy_check_mark:	d02f6bdd7201f63bc60595395a2b8164e4df01b1	#3	2024-05-17 12:46:48	~6 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	d02f6bdd7201f63bc60595395a2b8164e4df01b1	#3	2024-05-17 12:47:06	~6 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	d02f6bdd7201f63bc60595395a2b8164e4df01b1	#3	2024-05-17 12:47:18	~6 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	d02f6bdd7201f63bc60595395a2b8164e4df01b1	#3	2024-05-17 12:49:22	~9 min	`ios`	:iphone:`ipa` :calling:

:heavy_check_mark:	2cf4bbc421a27d9ce7c5c0b132ba29b8e15c763e	#4	2024-05-22 23:56:49	~4 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	2cf4bbc421a27d9ce7c5c0b132ba29b8e15c763e	#4	2024-05-22 23:58:40	~5 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	2cf4bbc421a27d9ce7c5c0b132ba29b8e15c763e	#4	2024-05-23 00:00:00	~7 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	2cf4bbc421a27d9ce7c5c0b132ba29b8e15c763e	#4	2024-05-23 00:01:07	~8 min	`ios`	:iphone:`ipa` :calling:

:heavy_check_mark:	8f03ac882a65ea9384775ada0d5b0a94ec142f32	#6	2024-05-23 00:15:04	~4 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	8f03ac882a65ea9384775ada0d5b0a94ec142f32	#6	2024-05-23 00:16:51	~6 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	8f03ac882a65ea9384775ada0d5b0a94ec142f32	#6	2024-05-23 00:19:17	~8 min	`ios`	:iphone:`ipa` :calling:
:heavy_check_mark:	8f03ac882a65ea9384775ada0d5b0a94ec142f32	#6	2024-05-23 00:19:34	~8 min	`android-e2e`	:robot:`apk` :calling:

:heavy_check_mark:	605c168fa61316d47977e41167228783c8bdb6b6	#7	2024-05-24 12:09:20	~4 min	`tests`	:page_facing_up:`log`

:heavy_check_mark:	3540de4487d6fafccaedce59f248ff99c96b23c7	#8	2024-05-24 12:16:05	~4 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	3540de4487d6fafccaedce59f248ff99c96b23c7	#8	2024-05-24 12:17:58	~6 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	3540de4487d6fafccaedce59f248ff99c96b23c7	#8	2024-05-24 12:20:40	~9 min	`ios`	:iphone:`ipa` :calling:
:heavy_check_mark:	3540de4487d6fafccaedce59f248ff99c96b23c7	#8	2024-05-24 12:21:10	~9 min	`android`	:robot:`apk` :calling:

:heavy_check_mark:	98ad4cec724580b2be60c020f4f2bcaa6201170a	#9	2024-05-27 10:07:53	~4 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	98ad4cec724580b2be60c020f4f2bcaa6201170a	#9	2024-05-27 10:11:48	~8 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	98ad4cec724580b2be60c020f4f2bcaa6201170a	#9	2024-05-27 10:11:56	~8 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	98ad4cec724580b2be60c020f4f2bcaa6201170a	#9	2024-05-27 10:12:02	~8 min	`ios`	:iphone:`ipa` :calling:

:heavy_check_mark:	818a1e67bfd2efc9195581981e98707c421f9441	#10	2024-05-29 10:06:40	~4 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	818a1e67bfd2efc9195581981e98707c421f9441	#10	2024-05-29 10:09:39	~7 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	818a1e67bfd2efc9195581981e98707c421f9441	#10	2024-05-29 10:11:25	~9 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	818a1e67bfd2efc9195581981e98707c421f9441	#10	2024-05-29 10:16:02	~13 min	`ios`	:iphone:`ipa` :calling:

:grey_question:	Commit	:hash:	Finished (UTC)	Duration	Platform	Result
:heavy_check_mark:	069bbe2cb773fedac93b926213a71cb6fd4595e2	#11	2024-05-29 11:15:23	~4 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	069bbe2cb773fedac93b926213a71cb6fd4595e2	#11	2024-05-29 11:19:28	~8 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	069bbe2cb773fedac93b926213a71cb6fd4595e2	#11	2024-05-29 11:19:36	~8 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	069bbe2cb773fedac93b926213a71cb6fd4595e2	#11	2024-05-29 11:19:47	~8 min	`ios`	:iphone:`ipa` :calling:

:heavy_check_mark:	8574a63d87c15f3cfe0bfc80e6fde655282000c8	#12	2024-05-29 12:14:38	~4 min	`tests`	:page_facing_up:`log`
:heavy_check_mark:	8574a63d87c15f3cfe0bfc80e6fde655282000c8	#12	2024-05-29 12:16:03	~5 min	`android`	:robot:`apk` :calling:
:heavy_check_mark:	8574a63d87c15f3cfe0bfc80e6fde655282000c8	#12	2024-05-29 12:17:40	~7 min	`android-e2e`	:robot:`apk` :calling:
:heavy_check_mark:	8574a63d87c15f3cfe0bfc80e6fde655282000c8	#12	2024-05-29 12:20:02	~9 min	`ios`	:iphone:`ipa` :calling:

May 16 '24 23:05 status-im-auto

I also compared between the compressed versions of all images in both webp and png file formats and while in both case the quality was more or less the same the png(s) achieved a smaller size

uncompressed images

webp compressed images

png compressed images

May 16 '24 23:05 jo-mut

Before compression ios

After compressing ios

there is difference in quality is too small to notice

May 17 '24 13:05 jo-mut

@Francesca-G I did some work to compress these images, it would help in reducing the size of the application, i think this needs a design review to just be sure you are okay with the quality of the compression. have a look whenever you can

May 17 '24 14:05 jo-mut

85% of end-end tests have passed

Total executed tests: 52
Failed tests: 6
Expected to fail tests: 2
Passed tests: 44

IDs of failed tests: 727230,702782,727229,702843,702807,702730

IDs of expected to fail tests: 703495,703503

Failed tests (6)

Click to expand

Rerun failed tests

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_join_send_text_messages_push, id: 702807

Device 2: Find `Text` by `xpath`: `//*[starts-with(@text,'Hey, admin!')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//*[@content-desc='message-status']/android.widget.TextView`
Device 2: `Text` is `Sent`

critical/chats/test_group_chat.py:95: in test_group_chat_join_send_text_messages_push
    self.chats[1].chat_element_by_text(message_to_admin).wait_for_status_to_be('Delivered', timeout=120)
../views/chat_view.py:225: in wait_for_status_to_be
    raise TimeoutException("Message status was not changed to %s, it's %s" % (expected_status, current_status))
 Message status was not changed to Delivered, it's Sent

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Device 3:

Steps, video, logs

Class TestWalletMultipleDevice:

1. test_wallet_send_asset_from_drawer, id: 727230

Test setup failed: critical/test_wallet.py:21: in prepare_devices
    self.drivers, self.loop = create_shared_drivers(2)
base_test_case.py:308: in create_shared_drivers
    drivers = loop.run_until_complete(start_threads(test_suite_data.current_test.name,
/usr/lib/python3.10/asyncio/base_events.py:649: in run_until_complete
    return future.result()
__init__.py:26: in start_threads
    returns[k] = await returns[k]
/usr/lib/python3.10/concurrent/futures/thread.py:58: in run
    result = self.fn(*self.args, **self.kwargs)
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/appium/webdriver/webdriver.py:257: in __init__
    super().__init__(
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/selenium/webdriver/remote/webdriver.py:206: in __init__
    self.start_session(capabilities)
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/appium/webdriver/webdriver.py:360: in start_session
    raise SessionNotCreatedException(
 A valid W3C session creation response must contain a non-empty "sessionId" entry. Got "{'value': {'error': 'unknown error', 'message': 'failed serving request POST /wd/hub/session', 'stacktrace': ''}}" instead

2. test_wallet_send_eth, id: 727229

Test setup failed: critical/test_wallet.py:21: in prepare_devices
    self.drivers, self.loop = create_shared_drivers(2)
base_test_case.py:308: in create_shared_drivers
    drivers = loop.run_until_complete(start_threads(test_suite_data.current_test.name,
/usr/lib/python3.10/asyncio/base_events.py:649: in run_until_complete
    return future.result()
__init__.py:26: in start_threads
    returns[k] = await returns[k]
/usr/lib/python3.10/concurrent/futures/thread.py:58: in run
    result = self.fn(*self.args, **self.kwargs)
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/appium/webdriver/webdriver.py:257: in __init__
    super().__init__(
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/selenium/webdriver/remote/webdriver.py:206: in __init__
    self.start_session(capabilities)
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/appium/webdriver/webdriver.py:360: in start_session
    raise SessionNotCreatedException(
 A valid W3C session creation response must contain a non-empty "sessionId" entry. Got "{'value': {'error': 'unknown error', 'message': 'failed serving request POST /wd/hub/session', 'stacktrace': ''}}" instead

Class TestCommunityMultipleDeviceMerged:

1. test_community_message_edit, id: 702843

Device 1: Wait for text element EmojisNumber to be equal to 1
Device 1: Find EmojisNumber by xpath: //*[starts-with(@text,'Message AFTER edit 2 (Edited)')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//*[@content-desc='emoji-reaction-2']/android.widget.TextView[2]

critical/chats/test_public_chat_browsing.py:359: in test_community_message_edit
    self.errors.verify_no_errors()
base_test_case.py:190: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 Message reaction is not shown for the sender

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782

Device 1: Find BaseElement by xpath: //*[@content-desc=':chat-floating-screen']//*[starts-with(@text,'👷‍♂️')]
Device 1: Long press on BaseElement until expected element is shown

critical/chats/test_1_1_public_chats.py:117: in test_1_1_chat_emoji_send_reply_and_open_link
    self.chat_1.quote_message(emoji_unicode)
../views/chat_view.py:1040: in quote_message
    self.chat_view_element_starts_with_text(message).long_press_until_element_is_shown(self.reply_message_button)
../views/base_element.py:331: in long_press_until_element_is_shown
    action.long_press(element).release().perform()
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/appium/webdriver/common/touch_action.py:174: in perform
    self._driver.execute(Command.TOUCH_ACTION, params)
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/selenium/webdriver/remote/webdriver.py:345: in execute
    self.error_handler.check_response(response)
../../../../status-app-prs@tmp/venv/lib/python3.10/site-packages/appium/webdriver/errorhandler.py:122: in check_response
    raise exception_class(msg=message, stacktrace=format_stacktrace(stacktrace))
 The element 'By.xpath: //*[@content-desc=':chat-floating-screen']//*[starts-with(@text,'👷‍♂️')]' is not linked to the same object in DOM anymore; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#stale-element-reference-exception
E   Stacktrace:
E   io.appium.uiautomator2.common.exceptions.StaleElementReferenceException: The element 'By.xpath: //*[@content-desc=':chat-floating-screen']//*[starts-with(@text,'👷‍♂️')]' is not linked to the same object in DOM anymore
E   	at io.appium.uiautomator2.model.ElementsCache.restore(ElementsCache.java:122)
E   	at io.appium.uiautomator2.model.ElementsCache.get(ElementsCache.java:153)
E   	at io.appium.uiautomator2.handler.Location.safeHandle(Location.java:23)
E   	at io.appium.uiautomator2.handler.request.SafeRequestHandler.handle(SafeRequestHandler.java:59)
E   	at io.appium.uiautomator2.server.AppiumServlet.handleRequest(AppiumServlet.java:277)
E   	at io.appium.uiautomator2.server.AppiumServlet.handleHttpRequest(AppiumServlet.java:271)
E   	at io.appium.uiautomator2.http.ServerHandler.channelRead(ServerHandler.java:68)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
E   	at io.netty.handler.codec.MessageToMessageDecoder.channelRead(MessageToMessageDecoder.java:102)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
E   	at io.netty.channel.CombinedChannelDuplexHandler$DelegatingChannelHandlerContext.fireChannelRead(CombinedChannelDuplexHandler.java:435)
E   	at io.netty.handler.codec.ByteToMessageDecoder.fireChannelRead(ByteToMessageDecoder.java:293)
E   	at io.netty.handler.codec.ByteToMessageDecoder.channelRead(ByteToMessageDecoder.java:267)
E   	at io.netty.channel.CombinedChannelDuplexHandler.channelRead(CombinedChannelDuplexHandler.java:250)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
E   	at io.netty.handler.timeout.IdleStateHandler.channelRead(IdleStateHandler.java:266)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
E   	at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:345)
E   	at io.netty.channel.DefaultChannelPipeline$HeadContext.channelRead(DefaultChannelPipeline.java:1294)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:366)
E   	at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:352)
E   	at io.netty.channel.DefaultChannelPipeline.fireChannelRead(DefaultChannelPipeline.java:911)
E   	at io.netty.channel.nio.AbstractNioByteChannel$NioByteUnsafe.read(AbstractNioByteChannel.java:131)
E   	at io.netty.channel.nio.NioEventLoop.processSelectedKey(NioEventLoop.java:611)
E   	at io.netty.channel.nio.NioEventLoop.processSelectedKeysOptimized(NioEventLoop.java:552)
E   	at io.netty.channel.nio.NioEventLoop.processSelectedKeys(NioEventLoop.java:466)
E   	at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:438)
E   	at io.netty.util.concurrent.SingleThreadEventExecutor$2.run(SingleThreadEventExecutor.java:140)
E   	at io.netty.util.concurrent.DefaultThreadFactory$DefaultRunnableDecorator.run(DefaultThreadFactory.java:144)
E   	at java.lang.Thread.run(Thread.java:1012)

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_1_1_chat_message_reaction, id: 702730

Device 1: Wait for text element EmojisNumber to be equal to 1
Device 1: Find EmojisNumber by xpath: //*[starts-with(@text,'Message sender')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//*[@content-desc='emoji-reaction-1']/android.widget.TextView[2]

critical/chats/test_1_1_public_chats.py:80: in test_1_1_chat_message_reaction
    message_sender.emojis_below_message(emoji="love").wait_for_element_text(1, 90)
../views/base_element.py:181: in wait_for_element_text
    element_text = self.find_element().text.strip()
../views/base_element.py:79: in find_element
    raise NoSuchElementException(
 Device 1: EmojisNumber by xpath: `//*[starts-with(@text,'Message sender')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//*[@content-desc='emoji-reaction-1']/android.widget.TextView[2]` is not found on the screen; For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#no-such-element-exception

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Expected to fail tests (2)

Click to expand

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_mute_chat, id: 703495

# STEP: Change device time so chat will be unmuted by timer
Device 2: Long press on ChatElement

critical/chats/test_group_chat.py:464: in test_group_chat_mute_chat
    self.errors.verify_no_errors()
base_test_case.py:190: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 Chat is still muted after timeout

[[Chat is not unmuted after expected time: https://github.com/status-im/status-mobile/issues/19627]]

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Device 3:

Steps, video, logs

Class TestCommunityOneDeviceMerged:

1. test_community_discovery, id: 703503

Test is not run, e2e blocker

[[reason: [NOTRUN] Curated communities not loading, https://github.com/status-im/status-mobile/issues/17852]]

Passed tests (44)

Click to expand

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_add_contact_field_validation, id: 702777

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

3. test_activity_center_contact_request_decline, id: 702850

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Class TestDeepLinksOneDevice:

1. test_links_open_universal_links_from_chat, id: 704613

Device sessions

Device 1:

Steps, video, logs

2. test_links_deep_links, id: 702775

Device sessions

Device 1:

Steps, video, logs

Class TestActivityMultipleDevicePRTwo:

1. test_activity_center_mentions, id: 702957

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_activity_center_admin_notification_accept_swipe, id: 702958

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133

Device sessions

Device 1:

Steps, video, logs

2. test_community_copy_and_paste_message_in_chat_input, id: 702742

Device sessions

Device 1:

Steps, video, logs

3. test_community_undo_delete_message, id: 702869

Device sessions

Device 1:

Steps, video, logs

4. test_community_navigate_to_channel_when_relaunch, id: 702846

Device sessions

Device 1:

Steps, video, logs

5. test_community_mute_community_and_channel, id: 703382

Device sessions

Device 1:

Steps, video, logs

Class TestWalletOneDevice:

1. test_wallet_add_remove_regular_account, id: 727231

Device sessions

Device 1:

Steps, video, logs

2. test_wallet_add_remove_watch_only_account, id: 727232

Device sessions

Device 1:

Steps, video, logs

Class TestActivityMultipleDevicePR:

1. test_navigation_jump_to, id: 702936

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Class TestCommunityMultipleDeviceMerged:

1. test_community_several_images_send_reply, id: 703194

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_community_one_image_send_reply, id: 702859

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

3. test_community_emoji_send_copy_paste_reply, id: 702840

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

4. test_community_mark_all_messages_as_read, id: 703086

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

5. test_community_contact_block_unblock_offline, id: 702894

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

6. test_community_edit_delete_message_when_offline, id: 704615

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

7. test_community_message_delete, id: 702839

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

8. test_community_message_send_check_timestamps_sender_username, id: 702838

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

9. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

10. test_community_unread_messages_badge, id: 702841

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_text_message_delete_push_disappear, id: 702733

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_1_1_chat_push_emoji, id: 702813

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

3. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

4. test_1_1_chat_edit_message, id: 702855

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

5. test_1_1_chat_send_image_save_and_share, id: 703391

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

6. test_1_1_chat_pin_messages, id: 702731

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Class TestCommunityMultipleDeviceMergedTwo:

1. test_community_markdown_support, id: 702809

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_community_hashtag_links_to_community_channels, id: 702948

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

3. test_community_mentions_push_notification, id: 702786

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

4. test_community_leave, id: 702845

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

5. test_community_join_when_node_owner_offline, id: 703629

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Device 3:

Steps, video, logs

2. test_group_chat_send_image_save_and_share, id: 703297

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Device 3:

Steps, video, logs

3. test_group_chat_reactions, id: 703202

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Device 3:

Steps, video, logs

4. test_group_chat_offline_pn, id: 702808

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

Device 3:

Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

1. test_1_1_chat_delete_via_long_press_relogin, id: 702784

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

2. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

3. test_1_1_chat_mute_chat, id: 703496

Device sessions

Device 1:

Steps, video, logs

Device 2:

Steps, video, logs

May 17 '24 14:05 status-im-auto

I used an online tool, tinypng.com. I could try do some more work see if i can get any better results with webp or avifs.

I think a script for this kind of thing would do better for any future use as the designs come

On Fri, 17 May 2024, 16:48 Icaro Motta, @.***> wrote:

@.**** approved this pull request.

@jo-mut https://github.com/jo-mut, could you share which commands you used to compress PNG files?

WebP should be smaller for the same quality, ~25% less, but I checked that for rasterized images it may not be the best format, which explains the results you reported. I could create smaller WebP files than the PNG ones, but they introduced too many artifacts to my liking, visibly worse than the PNGs. The AVIF format on the other hand generates significantly smaller files than WebP for the same quality, but they still generate visible artifacts to achieve the same file size as the PNGs you generated.

Ideally we should have a quick script to compress a list of files or a directory. This script would have been useful now and in future iterations. If the script is too much to ask, could you at least add the commands in the PR description you used to generate these files?

Great work! 🚀

— Reply to this email directly, view it on GitHub https://github.com/status-im/status-mobile/pull/20076#pullrequestreview-2063642861, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG27564M5YXHWELLL5OFBTDZCYKENAVCNFSM6AAAAABH3DW5MGVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANRTGY2DEOBWGE . You are receiving this because you were mentioned.Message ID: @.***>

May 17 '24 15:05 jo-mut

I think a script for this kind of thing would do better for any future use as the designs come

It would be very helpful @jo-mut to have a basic script because we will surely have to do this again. It will save us time if you could do that. And it would help others reproduce and play with parameters.

I could try do some more work see if i can get any better results with webp or avifs.

I already tried using imagemagick's convert tool and also with Gimp, but the results weren't as good. I think we can ignore WebP and AVIFs for rasterized images tbh. If we were compressing photos of people/places/etc it'd be a different story, they would destroy traditional JPEGs for example.

I just tried sharp, a Node lib, quite fast due to native implementation under the hood. I could get a PNG of 55kb instead of 70kb from tinypng with a decent quality. Here's an example of what we can achieve and automate. Here's the script:

const sharp = require("sharp");

sharp("[email protected]")
  .png({
    effort: 10,
    quality: 50, // We can play with this number
    compressionLevel: 9
    palette: true // This is critical to lower file sizes
  })
  .toFile("[email protected] - compressed")
  .then((info) => {
    console.log("Image compression completed:", info);
  })
  .catch((err) => {
    console.error("Error during image compression:", err);
  });

May 17 '24 15:05 ilmotta

Given the good results obtained by sharp in my previous comment, it would be better if we didn't merge yet because if these images are added to the repo just so we remove them soon the repo size will increase in size even more because git won't be able to reuse bytes.

Well, I'm just giving options @jo-mut. And this topic about image compression is something I did a ton in life, so that's why I tried to dig deeper in this PR.

May 17 '24 15:05 ilmotta

@ilmotta I agree with you, no need to merge now. I can play with this sharp script. Let me see how much we can achieve if i convert all the images in Ui2

May 17 '24 16:05 jo-mut

@ilmotta I agree with you, no need to merge now. I can play with this sharp script. Let me see how much we can achieve if i convert all the images in Ui2

Hi @jo-mut !

Have this sharp issue resolved yet?

May 20 '24 10:05 mariia-skrypnyk

@mariia-skrypnyk not yet, i will might take some more time to work on this. Am currently on time off. We can revisit on wednesday

May 20 '24 11:05 jo-mut

Thanks @jo-mut ! Have a food day-off!

Just tag me and I'll be notified to test your PR.

May 20 '24 12:05 mariia-skrypnyk

@ilmotta

I am using the Script, and I applied it to all the images on theui2 folder irregardless of their size just to have even more compression but so far am not so sure about the quality on some of the images

on this the image quality property has the value set at 100 and the total size of the whole folder reduces to 9.1mb from 28mb, the quality looks better

its acceptable I think

the quality on this is not good at all and below 80, it gets even more poor in quality , some images of course are not that much noticeable but on this one it was quite pronounced. Also the folder reduced to 6mb.

May 22 '24 23:05 jo-mut

Thanks for trying the different approach @jo-mut. At least now we know we have alternatives that would give competitive asset sizes compared to tinypng and which are open-source.

May 24 '24 12:05 ilmotta

@ilmotta I think this is even better, the difference between this approach and tinypng if there is even any is hard to tell, the quality of images is pretty much the same and with the script it achieves even smaller sizes

This pr can be merged I will add the script to our codebase in a separate pr.

Thank you for the suggestion

May 24 '24 12:05 jo-mut

@mariia-skrypnyk Hi maria. When you have some time you can take another look at this pr. Thank you

May 24 '24 12:05 jo-mut

Please, rebase your PR. I will take a look at it as soon as I finish my current testing. Thanks!

May 27 '24 09:05 mariia-skrypnyk

Hey @jo-mut !

Thanks for your PR. A lot of work was done! I've started from iOS and as for me not a huge difference happened from then till now. But I do see the difference for Android. I think it was planned, I just wanted to leave my comment.

Going to move PR to @Francesca-G review as well.

May 28 '24 09:05 mariia-skrypnyk

@jo-mut You can merge your PR after creating followup @Francesca-G mentioned above 🙌.

May 28 '24 10:05 mariia-skrypnyk

@jo-mut You can merge your PR after creating followup @Francesca-G mentioned above 🙌.

https://github.com/status-im/status-mobile/issues/20243

May 29 '24 12:05 jo-mut

status-mobile status-mobile copied to clipboard

Reduce image sizes

Summary

Jenkins Builds

85% of end-end tests have passed

Failed tests (6)

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestWalletMultipleDevice:

Class TestCommunityMultipleDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Expected to fail tests (2)

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestCommunityOneDeviceMerged:

Passed tests (44)

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestDeepLinksOneDevice:

Class TestActivityMultipleDevicePRTwo:

Class TestCommunityOneDeviceMerged:

Class TestWalletOneDevice:

Class TestActivityMultipleDevicePR:

Class TestCommunityMultipleDeviceMerged:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestCommunityMultipleDeviceMergedTwo:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

status-mobile
status-mobile copied to clipboard