Set up imgbot to automatically compress image assets

[roryabraham]

HOLD on https://github.com/Expensify/Expensify/issues/299601

Slack context: https://expensify.slack.com/archives/C01GTK53T8Q/p1695410267279189

Problem

Manually compressing images before uploading is a tedious task. It is easy to forget about it. However, we're adding many uncompressed images to this repo for the HelpDot site.

Solution

Add a bot that will raise a PR to losslessly compress images - imgbot is free for opensource repos.

So even if we upload an unoptimized image, the bot will take care of it 🤖

A few stipulations:

• It seems like we need to authorize imgbot as a GitHub Application. We currently have an Open Issue to create an open-source GitHub Application from OSBotify. So this is on HOLD for that
• When we do turn it on, we want to preserve our team's time as much as possible. So let's create a workflow such that if OSBotify opens an imgbot PR, the GitHub Actions bot will automatically approve and merge it

[melvin-bot]

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[roryabraham]

Technically this will apply to any image in this repo since imgbot also works for SVG images. So I'm adjusting the title accordingly.

@rushatgabhane let's please also stick with lossless, not aggressive/lossy compression.

[roryabraham]

Still on HOLD. Working on getting OSBotify appified. Actively discussing in #deployer

[roryabraham]

Taking this off HOLD

[roryabraham]

@justinpersaud is going to help out with this 🎉

[justinpersaud]

@roryabraham @muttmuure

Cloudflare has a product to automatically compress images and it is zero effort on our part.

https://developers.cloudflare.com/images/polish/

Cloudflare Polish is a one-click image optimization product that automatically optimizes images in your site. Polish strips metadata from images and reduces image size through lossy or lossless compression to accelerate the speed of image downloads.

When an image is fetched from your origin, our systems automatically optimize it in Cloudflare’s cache. Subsequent requests for the same image will get the smaller, faster, optimized version of the image, improving the speed of your website.

If the problem we're solving here is handling uncompressed images, we could just turn that on and see if it helps?

[justinpersaud]

@roryabraham I installed imgbot in the App repo. Seems like it will open a PR with optimized images shortly. Waiting to see what that looks like.

[rushatgabhane]

wohooo!

[rlinoz]

Hey, here is the PR #30230

Do we want to look for something specific in it?

[justinpersaud]

thanks @rlinoz

I will take it for now. I think the plan is to automate merges so I'll grab it and figure out next steps.

[justinpersaud]

@rushatgabhane do you want to take a look at it too? I don't see anything that stands out at an initial glance. I will tag Shawn on it too.

[rushatgabhane]

is it okay to compress images inside ios and android folder? 📂

[rushatgabhane]

rest looks good! ✅

[justinpersaud]

Well lossless compression doesn't touch quality or dimensions, so I think it's fine. @AndrewGable maybe you have an idea if it's ok to compress images in the android/ios folders?

[justinpersaud]

When we do turn it on, we want to preserve our team's time as much as possible. So let's create a workflow such that if OSBotify opens an imgbot PR, the GitHub Actions bot will automatically approve and merge it

Is this still true?

A few other tasks that need to be done here

• Figure out how to get imgbot past the CLA check [ImgBot] Optimize images #30230 (comment)
• Bypass the reviewer checklist requirement for imgbot PRs

[justinpersaud]

Submitted PR for the above tasks

#30270

[AndrewGable]

It's OK to compress images in iOS/Android as long as the image dimensions stay the same.

[justinpersaud]

This is mostly done, just doing some polish. The first imgbot PR was sent earlier and automatically merged:

#30383

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[justinpersaud]

I think we're all done here. We found a case where an optimized image had the colour changed slightly in the regression above. I ended up added the file to the ignore list for optimizations and reverting it.