images: replace swaps-redesign.svg with swaps-redesign.jpg by legobeat · Pull Request #20703 · MetaMask/metamask-extension

legobeat · 2023-09-03T06:42:06Z

Explanation

This image weighs in at 244kB (~1% of the entire metamask-extension bundle) - it's actually "not really" an svg but an embedded png. The base64 encoding adds extra overhead so just converting it to a .png should already save some space.

~~This converts it to a jpg (95% quality) to a size reduction to 90kB.~~

~~This converts it to a jpg (50% resize; 95% quality) to a filesize reduction to 33kB.~~

This converts it to a jpg (50% resize; 98% quality) to a filesize reduction to 43kB.

Related: #19169

Used ImageMagick for conversion:

$ for q in 30 40 50 60 65 70 75 80 85 90 92 95 96 98 99 100 ; do ; convert app/images/swaps-redesign.png -crop '10000x1118+0+10' -resize 50% -quality $q% app/images/swaps-redesign.$q-50.jpg ; done

Screenshots/Screencaps

Before

https://github.com/MetaMask/metamask-extension/blob/3d2de0211df1308a27897cfc60f8460120e93f7a/app/images/swaps-redesign.svg

After

https://github.com/MetaMask/metamask-extension/blob/5c8763d51c14056765112e9bd19a0e19668d2061/app/images/swaps-redesign.jpg

Manual Testing Steps

Pre-merge author checklist

I've clearly explained:
- What problem this PR is solving
- How this problem was solved
- How reviewers can test my changes
Sufficient automated test coverage has been added

Pre-merge reviewer checklist

Manual testing (e.g. pull and build branch, run in browser, test code being changed)
PR is linked to the appropriate GitHub issue
IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

github-actions · 2023-09-03T06:42:19Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

codecov · 2023-09-04T11:42:46Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (8488e7a) 68.59% compared to head (9ad3f98) 68.70%.

❗ Current head 9ad3f98 differs from pull request most recent head eae3750. Consider uploading reports for the commit eae3750 to get more accurate results

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #20703      +/-   ##
===========================================
+ Coverage    68.59%   68.70%   +0.10%     
===========================================
  Files         1046     1042       -4     
  Lines        41613    41572      -41     
  Branches     11110    11097      -13     
===========================================
+ Hits         28543    28558      +15     
+ Misses       13070    13014      -56

see 28 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Mrtenz · 2023-10-15T09:24:09Z

Can we instead make an actual SVG export of this image?

legobeat · 2023-10-16T01:43:08Z

Can we instead make an actual SVG export of this image?

I guess that would be even better and preferred. I'm not sure how to get at that, though.. @dan437 ?

davidmurdoch · 2023-10-18T19:30:15Z

Can we instead make an actual SVG export of this image?

I guess that would be even better and preferred. I'm not sure how to get at that, though.. @dan437 ?

I thought it'd be fun to see what Chat GPT-4 can do with a request to convert a png to an svg. It, uh, struggles:

😆

Mrtenz · 2023-10-23T08:47:58Z

This should be better. Thanks to @eriknson!

legobeat · 2023-10-23T08:56:20Z

This should be better. Thanks to @eriknson!

@Mrtenz Hmm, that's still 67k (of which 19k is an embedded png; 30kB gzipped)... It's an improvement, but still on the large side and if it's possible to compress it somehow without degrading too much that would be even better.

eriknson · 2023-10-23T09:10:35Z

Here's above SVG compressed to 49k. The only embedded png I could find in the design (not originally made by me, just reverse engineered for this) is the angled fox under "fetching quote". Can't think of any trivial way to vectorize that unfortunately

eriknson · 2023-10-23T09:12:44Z

I love svgs, but since this is for the What's new-modal, there's no transparency, and the max-width is pretty low; is a jpg sufficient?

If so, attached is 27k 📉

legobeat · 2023-10-23T09:19:54Z

Removing that angled fox only from the latest svg brings it down to 32k (11k gzipped) if that's an option...

I suspect the gradients in the background account for a significant part, in case those are easily extractable and can be replaced with a border for the sake of the What's-new display.

eriknson · 2023-10-23T09:33:55Z

Here's 30k w/out shadow & angled fox as an svg 😅

Mrtenz · 2023-10-25T08:06:36Z

app/images/swaps-redesign.svg

The dimensions and aspect ratio of the new image are different. Did you verify that this doesn't break anything in the extension?

HowardBraham

Actually, I realized something important. This notification is dead anyway -- see line 1047 of selectors.js. We can just delete the image.

legobeat · 2023-10-25T09:49:59Z

Actually, I realized something important. This notification is dead anyway -- see line 1047 of selectors.js. We can just delete the image.

I guess the whole notification goes with it?

#21533

@eriknson

credit @eriknson

github-actions · 2024-01-07T00:17:21Z

This PR has been automatically marked as stale because it has not had recent activity in the last 60 days. It will be closed in 14 days. Thank you for your contributions.

github-actions · 2024-01-21T00:17:43Z

This PR was closed because there has been no follow up activity in the last 14 days. Thank you for your contributions.

@legobeat

## **Description** Continues the work that @legobeat was doing in #20703 and #21533 All old numbered notifications except 8, 20, and 24 were permanently turned off, but their code, their `messages.json`, and most importantly their images were still present in the Extension. By removing all this, we reduce the size of the zipped Extension by 949kB, and the unzipped Extension by 1,852kB. **IMPORTANT**: This is **NOT** well-tested from a QA perspective, and QA should do some good testing on it before we merge. ## **Related issues** Followup to: #20703 Followup to: #21533 --------- Co-authored-by: legobt <6wbvkn0j@anonaddy.me>

@legobeat

## **Description** Continues the work that @legobeat was doing in #20703 and #21533 All old numbered notifications except 8, 20, and 24 were permanently turned off, but their code, their `messages.json`, and most importantly their images were still present in the Extension. By removing all this, we reduce the size of the zipped Extension by 949kB, and the unzipped Extension by 1,852kB. **IMPORTANT**: This is **NOT** well-tested from a QA perspective, and QA should do some good testing on it before we merge. ## **Related issues** Followup to: #20703 Followup to: #21533 --------- Co-authored-by: legobt <6wbvkn0j@anonaddy.me>

legobeat force-pushed the compress-swaps-redesign branch from 7d0d782 to d6039d0 Compare September 3, 2023 06:46

legobeat marked this pull request as ready for review September 3, 2023 06:53

legobeat requested a review from a team as a code owner September 3, 2023 06:53

legobeat added the team-application-security Application security team label Sep 3, 2023

legobeat requested a review from dan437 September 3, 2023 07:06

legobeat assigned dan437 Sep 3, 2023

legobeat force-pushed the compress-swaps-redesign branch 3 times, most recently from 186c915 to c2c4f05 Compare September 4, 2023 11:14

legobeat force-pushed the compress-swaps-redesign branch 2 times, most recently from 9b03313 to 277ada3 Compare September 10, 2023 02:42

legobeat force-pushed the compress-swaps-redesign branch from 277ada3 to ff647d5 Compare September 12, 2023 05:42

legobeat force-pushed the compress-swaps-redesign branch 3 times, most recently from ee455bc to 8c5dd98 Compare October 13, 2023 22:02

legobeat requested a review from a team October 13, 2023 22:02

legobeat force-pushed the compress-swaps-redesign branch 2 times, most recently from ce590c3 to df3b4ac Compare October 23, 2023 07:37

legobeat requested a review from eriknson October 23, 2023 09:45

legobeat force-pushed the compress-swaps-redesign branch from 052e0fb to 546a86a Compare October 24, 2023 01:52

HowardBraham approved these changes Oct 25, 2023

View reviewed changes

Mrtenz reviewed Oct 25, 2023

View reviewed changes

HowardBraham requested changes Oct 25, 2023

View reviewed changes

legobeat mentioned this pull request Oct 25, 2023

remove unused notification data #21533

Closed

13 tasks

legobeat force-pushed the compress-swaps-redesign branch 4 times, most recently from 24ed17a to d86ed2a Compare November 1, 2023 11:20

legobeat added 5 commits November 1, 2023 12:17

images: replace swaps-redesign.svg with swaps-redesign.jpg

0053a44

jpeg quality:95% resize:50%

b54af42

jpeg quality:98% resize:50%

3575078

replace jpeg with vector svg

8dfc499

update with optimized svg

d963379

credit @eriknson

legobeat force-pushed the compress-swaps-redesign branch from d86ed2a to d963379 Compare November 1, 2023 12:17

legobeat added 2 commits November 7, 2023 03:14

Merge branch 'develop' into compress-swaps-redesign

9ad3f98

Merge branch 'develop' into compress-swaps-redesign

eae3750

github-actions bot added the stale issues and PRs marked as stale label Jan 7, 2024

github-actions bot closed this Jan 21, 2024

HowardBraham mentioned this pull request Jan 27, 2024

Remove unused notifications, their messages, and images #22678

Merged

13 tasks

Conversation

legobeat commented Sep 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation

Screenshots/Screencaps

Before

After

Manual Testing Steps

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Sep 3, 2023

Uh oh!

codecov bot commented Sep 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Mrtenz commented Oct 15, 2023

Uh oh!

legobeat commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidmurdoch commented Oct 18, 2023

Uh oh!

Mrtenz commented Oct 23, 2023

Uh oh!

legobeat commented Oct 23, 2023

Uh oh!

eriknson commented Oct 23, 2023

Uh oh!

eriknson commented Oct 23, 2023

Uh oh!

legobeat commented Oct 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eriknson commented Oct 23, 2023

Uh oh!

Mrtenz Oct 25, 2023

Choose a reason for hiding this comment

Uh oh!

HowardBraham left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

legobeat commented Oct 25, 2023

Uh oh!

github-actions bot commented Jan 7, 2024

Uh oh!

github-actions bot commented Jan 21, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

legobeat commented Sep 3, 2023 •

edited

Loading

codecov bot commented Sep 4, 2023 •

edited

Loading

legobeat commented Oct 16, 2023 •

edited

Loading

legobeat commented Oct 23, 2023 •

edited

Loading

HowardBraham left a comment •

edited

Loading