Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lossless image optimization, part 2 #38573

Merged
merged 4 commits into from
Aug 6, 2024
Merged

Lossless image optimization, part 2 #38573

merged 4 commits into from
Aug 6, 2024

Conversation

danluu
Copy link
Contributor

@danluu danluu commented Jul 26, 2024 •
edited
Loading

This is a continuation of #38398, which has been split into multiple parts to avoid hitting a 20 MB commit limit in wpcom that Automattic/themes#7671 ran into. Please see #38398 for more context.

Proposed changes:

This PR contains lossless image optimizations for images in

projects/plugins/automattic-for-agencies-client/
projects/plugins/backup/
projects/plugins/beta/
projects/plugins/boost/
projects/plugins/crm/
projects/plugins/jetpack/
projects/plugins/migration
projects/plugins/protect/
projects/plugins/search/
projects/plugins/social/

The PNGs in projects/plugins/jetpack/ were already optimized in #38398, so those should be untouched and we only have optimizations to JPEG/SVG/GIF files in that subdirectory.

Other information:

The size of the impacted files going into wpcom seems to be about 5.7 MB, not including any sort of copying that would add a multiplier to the size (note that du -ch rounds each file's size up to the nearest 4KB, so this is an overestimate):

% git diff --name-only | grep -v "w.org-assets" | xargs du -ch
5.7M total

% git diff --name-only | xargs du -ch
20M total

@anomiex, I hope you don't mind that I'm taging you as a potential reviewer since you have context on this from reviewing the previous PR 🙂.

  • Have you written new tests for your changes, if applicable?
  • Have you checked the E2E test CI results, and verified that your changes do not break them?
  • Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Testing instructions:

  • Visual comparison of images should show no observable difference.

Does this pull request change what data or activity we track or use?

No.

@danluu danluu requested a review from anomiex July 26, 2024 19:24
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 26, 2024 •
edited
Loading

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the try/lossless-image-optmization-part-2 branch.

  • To test on Simple, run the following command on your sandbox:

    bin/jetpack-downloader test jetpack try/lossless-image-optmization-part-2

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions github-actions bot added [Block] Blogging Prompt [Block] Blogroll [Block] Map [Block] Pay With Paypal aka Simple Payments [Block] Slideshow [Block] Subscriptions [Block] Tiled Gallery [Block] VideoPress [CRM] WooSync Module [Extension] AI Assistant Plugin [Feature] Masterbar WordPress.com Toolbar and Dashboard customizations [Feature] Plugin Search [Feature] Sharing Post sharing, sharing buttons [Feature] Theme Tools [Plugin] Automattic For Agencies Client [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Beta For serving live branches and the beta versions. https://github.com/automattic/jetpack-beta [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] CRM Issues about the Jetpack CRM plugin [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] Migration [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Tests] Includes Tests Admin Page React-powered dashboard under the Jetpack menu E2E Tests labels Jul 26, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 26, 2024 •
edited
Loading

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

Beta plugin:

  • Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

  • WordPress.com Simple releases happen daily.
  • WoA releases happen weekly.
  • Releases to self-hosted sites happen monthly. The next release is scheduled for none scheduled (scheduled code freeze on undefined).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Backup plugin:

  • Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Boost plugin:

  • Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Search plugin:

  • Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Social plugin:

  • Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Protect plugin:

  • Next scheduled release: August 12, 2024.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Migration plugin:

  • Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Automattic For agencies client plugin:

  • Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

@github-actions github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Jul 26, 2024
@danluu danluu added the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Jul 26, 2024
@anomiex
Copy link
Contributor

anomiex commented Jul 26, 2024

I don't mind, but I'm about to go on vacation for two weeks so you may want to find someone else to review it. 😀

I ran the non-SVGs through ImageMagick's compare again. Two of the gifs highlighted some differences (projects/plugins/crm/i/go.gif and projects/plugins/jetpack/modules/sharedaddy/images/loading.gif), but looking at them I can't see anything obvious. Maybe the animations confused compare?

As for deploy size, looks like the diff to wpcom for this one will be about 12M. None of the stuff in Boost, CRM, and so on goes to wpcom at all, at least not through the sun-moon deploy process.

For the record, probably the easiest way to measure that would be to wait for the build to finish, go to your sandbox, run bin/jetpack-downloader test jetpack <branch> and bin/jetpack-downloader test jetpack-mu-wpcom-plugin <branch> (the latter fails for this PR since there are no changes to anything in mu-wpcom-plugin, that's ok), then do the dch command there to measure.

P.S. git diff --name-only | xargs du -bch might avoid the 4K block size thing, but really we don't know how the evil dragon measures it so 🤷.

@danluu danluu removed the request for review from anomiex July 26, 2024 21:10
@github-actions github-actions bot removed the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Jul 26, 2024
@danluu danluu added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Jul 26, 2024
sgomes
sgomes approved these changes Aug 5, 2024
View reviewed changes
Copy link
Contributor

@sgomes sgomes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I couldn't find any broken or degraded images, nor any regressions in size 👍

@danluu danluu force-pushed the try/lossless-image-optmization-part-2 branch from 14cb091 to 58d2956 Compare August 6, 2024 18:49
@danluu danluu merged commit 168016f into trunk Aug 6, 2024
68 checks passed
@danluu danluu deleted the try/lossless-image-optmization-part-2 branch August 6, 2024 19:14
@github-actions github-actions bot removed the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Aug 6, 2024
@danluu danluu mentioned this pull request Aug 7, 2024
Merged
3 tasks
danluu added a commit that referenced this pull request Aug 19, 2024
@danluu
Jetpack: lossless image optimization, part 3 (#38750)
8510521 
Lossless image optimization of Jetpack images.

This is a continuation of #38398 and #38573. Please see #38398 for more context and details.

This finishes this series of commits. All images except for projects/js-packages/connection/components/disconnect-dialog/images/disconnect-thanks.jpg have been optimized. See @anomiex's debugging of the problem in #38750 (review) for more info on why that image was skipped.
jeherve added a commit that referenced this pull request Aug 20, 2024
@jeherve
Social Menus: bring back SVG contents
da78ea6 
Fixes #38959

Those were removed in #38573
This was referenced Aug 20, 2024
Merged
Merged
jeherve added a commit that referenced this pull request Aug 20, 2024
@jeherve
Social Menus: bring back SVG contents (#38966)
74029f4 
Fixes #38959

Those were removed in #38573
anomiex added a commit that referenced this pull request Aug 20, 2024
@anomiex
Revert SVG image optimizations from #38573 and #38750
22108c0 
There are many interesting ways SVGs can be used. The optimizations
broke some of these (see #38966). To be safe, let's revert them all.
anomiex added a commit that referenced this pull request Aug 20, 2024
@anomiex
Revert SVG image optimizations from #38573 and #38750 (#38981)
7d77b83 
There are many interesting ways SVGs can be used. The optimizations
broke some of these (see #38966). To be safe, let's revert them all.
pkuliga pushed a commit that referenced this pull request Aug 23, 2024
@danluu @pkuliga
Jetpack: lossless image optimization, part 3 (#38750)
f839ef4 
Lossless image optimization of Jetpack images.

This is a continuation of #38398 and #38573. Please see #38398 for more context and details.

This finishes this series of commits. All images except for projects/js-packages/connection/components/disconnect-dialog/images/disconnect-thanks.jpg have been optimized. See @anomiex's debugging of the problem in #38750 (review) for more info on why that image was skipped.
pkuliga pushed a commit that referenced this pull request Aug 23, 2024
@jeherve @pkuliga
Social Menus: bring back SVG contents (#38966)
6f45bb4 
Fixes #38959

Those were removed in #38573
pkuliga pushed a commit that referenced this pull request Aug 23, 2024
@anomiex @pkuliga
Revert SVG image optimizations from #38573 and #38750 (#38981)
a629548 
There are many interesting ways SVGs can be used. The optimizations
broke some of these (see #38966). To be safe, let's revert them all.
gogdzl pushed a commit that referenced this pull request Oct 25, 2024
@anomiex @gogdzl
Revert SVG image optimizations from #38573 and #38750 (#38981)
b36da2f 
There are many interesting ways SVGs can be used. The optimizations
broke some of these (see #38966). To be safe, let's revert them all.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sgomes sgomes sgomes approved these changes

Assignees
No one assigned
Labels
Admin Page React-powered dashboard under the Jetpack menu [Block] Blogging Prompt [Block] Blogroll [Block] Map [Block] Pay With Paypal aka Simple Payments [Block] Slideshow [Block] Subscriptions [Block] Tiled Gallery [Block] VideoPress [CRM] WooSync Module E2E Tests [Extension] AI Assistant Plugin [Feature] Masterbar WordPress.com Toolbar and Dashboard customizations [Feature] Plugin Search [Feature] Sharing Post sharing, sharing buttons [Feature] Theme Tools [Plugin] Automattic For Agencies Client [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Beta For serving live branches and the beta versions. https://github.com/automattic/jetpack-beta [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] CRM Issues about the Jetpack CRM plugin [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] Migration [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Tests] Includes Tests
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@danluu @anomiex @sgomes