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.

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

chore: add workflow for automatic image compression on PR #126

Merged
merged 13 commits into from
Apr 20, 2021

Conversation

zebateira
Copy link
Contributor

Partially addresses #84

This PR adds integration with Image Actions to enable automatic image compression when a new PR is added.

So when the PR from staging is created with the new forestry changes, images will be automatically compress in the PR.

@github-actions
Copy link
Contributor

Images automagically compressed by Calibre's image-actions

Compression reduced images by 47%, saving 5.03 MB.

Filename Before After Improvement Visual comparison
src/.vuepress/public/100-IPFS-mobile-design-guidelines-cheat-sheet.png 118.85 KB 62.92 KB -47.1% View diff
src/.vuepress/public/android-chrome-192x192.png 8.90 KB 6.87 KB -22.8% View diff
src/.vuepress/public/android-chrome-512x512.png 25.52 KB 21.11 KB -17.3% View diff
src/.vuepress/public/apple-touch-icon-114x114.png 5.35 KB 4.03 KB -24.7% View diff
src/.vuepress/public/apple-touch-icon-120x120.png 5.57 KB 4.21 KB -24.4% View diff
src/.vuepress/public/apple-touch-icon-144x144.png 6.75 KB 5.07 KB -24.9% View diff
src/.vuepress/public/apple-touch-icon-152x152.png 7.16 KB 5.38 KB -25.0% View diff
src/.vuepress/public/apple-touch-icon-180x180.png 8.33 KB 6.34 KB -23.9% View diff
src/.vuepress/public/apple-touch-icon-57x57.png 2.66 KB 2.09 KB -21.3% View diff
src/.vuepress/public/apple-touch-icon-60x60.png 2.79 KB 2.25 KB -19.4% View diff
src/.vuepress/public/apple-touch-icon-72x72.png 3.39 KB 2.64 KB -22.1% View diff
src/.vuepress/public/apple-touch-icon-76x76.png 3.55 KB 2.78 KB -21.7% View diff
src/.vuepress/public/apple-touch-icon.png 8.33 KB 6.34 KB -23.9% View diff
src/.vuepress/public/favicon-16x16.png 1.09 KB 723 bytes -35.1% View diff
src/.vuepress/public/favicon-32x32.png 1.60 KB 1.21 KB -24.1% View diff
src/.vuepress/public/favicon-48x48.png 3.28 KB 2.23 KB -31.9% View diff
src/.vuepress/public/mstile-150x150.png 6.13 KB 4.77 KB -22.1% View diff
src/assets/005-ipfs-0-4-0-released-fireworks.jpg 198.16 KB 59.39 KB -70.0% View diff
src/assets/007-cbase-deaddrop.jpeg 553.65 KB 341.59 KB -38.3% View diff
src/assets/050-ipfs-camp-recap-youtube-preview.jpg 384.38 KB 246.69 KB -35.8% View diff
src/assets/056-pubsub-in-the-browser-video.jpg 111.31 KB 41.85 KB -62.4% View diff
src/assets/059-ipfs-camp-sci-fi-fair-videos-actyx.jpg 816.73 KB 693.17 KB -15.1% View diff
src/assets/087-ipfs-mobile-design-research-device-sales-2005-2016.jpg 37.96 KB 33.49 KB -11.8% View diff
src/assets/094-gossipsub-v1.1-header-image.jpeg 213.16 KB 54.01 KB -74.7% View diff
src/assets/094-gossipsub-v1.1-header-image+grid.jpeg 274.56 KB 63.91 KB -76.7% View diff
src/assets/107-nix-ipfs-header-image.jpg 217.78 KB 31.35 KB -85.6% View diff
src/assets/111485037-90aa5d80-8736-11eb-9fbf-44e254214d1d.png 238.39 KB 217.62 KB -8.7% View diff
src/assets/112-dht-hardening.jpg 490.33 KB 93.59 KB -80.9% View diff
src/assets/113-community-rfp.jpg 347.56 KB 72.57 KB -79.1% View diff
src/assets/114-ipfs-2021.jpg 131.81 KB 62.91 KB -52.3% View diff
src/assets/2021-01-19-news-brave-decrypt.jpg 90.28 KB 88.44 KB -2.0% View diff
src/assets/2021-01-21-ipfs-streaming.jpg 518.37 KB 395.81 KB -23.6% View diff
src/assets/2021-02-02-ipfs-at-ethdenver-ethdenver2019-1.jpeg 99.00 KB 95.97 KB -3.1% View diff
src/assets/2021-02-02-ipfs-at-ethdenver-ethdenver2019.jpeg 99.00 KB 95.97 KB -3.1% View diff
src/assets/2021-02-02-ipfs-at-ethdenver-helpdesk2020.jpg 180.26 KB 148.06 KB -17.9% View diff
src/assets/2021-02-17-cardheader-protoschool-intro-to-libp2p.jpg 87.11 KB 14.57 KB -83.3% View diff
src/assets/2021-02-26-blog-virtual-castle.jpeg 54.05 KB 52.46 KB -2.9% View diff
src/assets/2021-03-04-event-ipfs-community-meetup.jpg 477.50 KB 103.47 KB -78.3% View diff
src/assets/2021-03-23-cardheader-fission-demo-day.jpg 1.16 MB 166.61 KB -86.0% View diff
src/assets/alan-shaw.jpg 121.09 KB 76.00 KB -37.2% View diff
src/assets/carson-farmer.jpg 184.79 KB 107.07 KB -42.1% View diff
src/assets/edgar-lee.jpg 128.99 KB 82.71 KB -35.9% View diff
src/assets/glen-carrie-ypttedpwpgs-unsplash-710x458.webp 25.97 KB 24.11 KB -7.2% View diff
src/assets/ipfs-camp-2019-campus.jpeg 248.01 KB 162.39 KB -34.5% View diff
src/assets/ipfs-dead-drop.jpeg 101.28 KB 29.09 KB -71.3% View diff
src/assets/lgierth-in-paris.jpeg 35.02 KB 33.98 KB -3.0% View diff
src/assets/opera-ios-app-store-short.png 120.96 KB 90.54 KB -25.1% View diff
src/assets/opera-ios-app-store.png 1.06 MB 636.46 KB -41.5% View diff
src/assets/opera-ios-wikipedia-short.png 77.88 KB 67.11 KB -13.8% View diff
src/assets/opera-ios-wikipedia.png 1.47 MB 915.58 KB -39.1% View diff
src/assets/weekly-009-neo.jpg 73.88 KB 72.68 KB -1.6% View diff
src/assets/weekly-010-ipfs-boston.jpg 138.98 KB 133.52 KB -3.9% View diff
src/assets/weekly-5-hightlight.jpeg 92.95 KB 66.96 KB -28.0% View diff

239 images did not require optimisation.

@github-actions
Copy link
Contributor

Images automagically compressed by Calibre's image-actions

Compression reduced images by 1.6%, saving 864 bytes.

Filename Before After Improvement Visual comparison
src/assets/glen-carrie-ypttedpwpgs-unsplash-710x458.webp 24.11 KB 23.66 KB -1.8% View diff
src/assets/ipfs-dead-drop.jpeg 29.09 KB 28.69 KB -1.4% View diff

289 images did not require optimisation.

Copy link
Contributor

@jdiogopeixoto jdiogopeixoto left a comment

Choose a reason for hiding this comment

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

This is cool. Good job! 👏

@jessicaschilling
Copy link
Contributor

Thanks @zebateira! Added @cwaring as a reviewer.

@cwaring
Copy link
Member

cwaring commented Apr 12, 2021

Nice. Some of those saving are pretty big, as it is re-processing in a destructive mode we need to be a bit careful as it is introducing a lot of compression artefacts.

A few thoughts:

  • How long did take to run across the src dir?
    (I'd prefer if it only touched new files to save build time but perhaps the actions keeps some kind of index as a cache?)
  • If I make a commit without images will is still attempt to optimise?
  • Is is possible to configure it to run on pre-merge as a last step?
  • Is there an action that can process images in a less destructive mode? (similar to ImageOptim)

@zebateira
Copy link
Contributor Author

zebateira commented Apr 13, 2021

@cwaring ouch, indeed some images are dreadful now.

How long did take to run across the src dir?

It was fast and it didn't block the preview so I think we don't need to worry about that.

If I make a commit without images will is still attempt to optimise?

I don't think so, but I'll test this (it has a regex for only running it if the changes include images in the assets directory)

Is is possible to configure it to run on pre-merge as a last step?

I think it would be more beneficial to have it on push so that we see the real final result in the preview.

Is there an action that can process images in a less destructive mode? (similar to ImageOptim)

Yeah, will change this 👍

@cwaring
Copy link
Member

cwaring commented Apr 13, 2021

Great, because we are lazy-loading all the images I'd prefer not to over compress. I ran ImageOptim over the original assets dir and that saved about 75% in a lossless way.

@github-actions
Copy link
Contributor

Images automagically compressed by Calibre's image-actions

Compression reduced images by 34.7%, saving 1.82 MB.

Filename Before After Improvement Visual comparison
src/.vuepress/public/100-IPFS-mobile-design-guidelines-cheat-sheet.png 118.85 KB 62.92 KB -47.1% View diff
src/.vuepress/public/android-chrome-192x192.png 8.90 KB 6.87 KB -22.8% View diff
src/.vuepress/public/android-chrome-512x512.png 25.52 KB 21.11 KB -17.3% View diff
src/.vuepress/public/apple-touch-icon-114x114.png 5.35 KB 4.03 KB -24.7% View diff
src/.vuepress/public/apple-touch-icon-120x120.png 5.57 KB 4.21 KB -24.4% View diff
src/.vuepress/public/apple-touch-icon-144x144.png 6.75 KB 5.07 KB -24.9% View diff
src/.vuepress/public/apple-touch-icon-152x152.png 7.16 KB 5.38 KB -25.0% View diff
src/.vuepress/public/apple-touch-icon-180x180.png 8.33 KB 6.34 KB -23.9% View diff
src/.vuepress/public/apple-touch-icon-57x57.png 2.66 KB 2.09 KB -21.3% View diff
src/.vuepress/public/apple-touch-icon-60x60.png 2.79 KB 2.25 KB -19.4% View diff
src/.vuepress/public/apple-touch-icon-72x72.png 3.39 KB 2.64 KB -22.1% View diff
src/.vuepress/public/apple-touch-icon-76x76.png 3.55 KB 2.78 KB -21.7% View diff
src/.vuepress/public/apple-touch-icon.png 8.33 KB 6.34 KB -23.9% View diff
src/.vuepress/public/favicon-16x16.png 1.09 KB 723 bytes -35.1% View diff
src/.vuepress/public/favicon-32x32.png 1.60 KB 1.21 KB -24.1% View diff
src/.vuepress/public/favicon-48x48.png 3.28 KB 2.23 KB -31.9% View diff
src/.vuepress/public/mstile-150x150.png 6.13 KB 4.77 KB -22.1% View diff
src/assets/107-nix-ipfs-header-image.jpg 217.78 KB 189.72 KB -12.9% View diff
src/assets/111485037-90aa5d80-8736-11eb-9fbf-44e254214d1d.png 238.39 KB 217.62 KB -8.7% View diff
src/assets/2021-02-17-cardheader-protoschool-intro-to-libp2p.jpg 87.11 KB 62.24 KB -28.5% View diff
src/assets/2021-03-23-cardheader-fission-demo-day.jpg 1.16 MB 763.95 KB -35.6% View diff
src/assets/2021-04-12-cardheader-gamedevjs-2021.png 309.09 KB 220.54 KB -28.6% View diff
src/assets/opera-ios-app-store-short.png 120.96 KB 90.54 KB -25.1% View diff
src/assets/opera-ios-app-store.png 1.06 MB 636.46 KB -41.5% View diff
src/assets/opera-ios-wikipedia-short.png 77.88 KB 67.11 KB -13.8% View diff
src/assets/opera-ios-wikipedia.png 1.47 MB 915.58 KB -39.1% View diff
src/assets/screen-shot-2021-04-12-at-5-56-44-pm.png 330.14 KB 208.11 KB -37.0% View diff

267 images did not require optimisation.

@zebateira
Copy link
Contributor Author

zebateira commented Apr 14, 2021

I bumped the quality setting to 100% so we get lossless compression. Also reverted the previous compressions and the latest compressions do not seem to have lost any quality.

Unfortunately this action does not allow to only compress the images that were changed in the PR. Issue here: calibreapp/image-actions#92
For now it takes roughly 1/2 minutes to run on all of our images. It will clearly increase over time, and so will the build time.

We do have the ImageOptim CLI, so in the future we can create an action that uses it and runs only on the changed images of the PR. If they don't implement it in the calibreapp/image-actions in the meanwhile.
One think that we also don't have so far is auto resizing as well (issue here calibreapp/image-actions#60). We have some unnecessarily large images that go over the required res for the website. Would be nice to be able to auto resize then before compressing so we can reduce the size even further – this could be done in our custom ImageOptim CLI github action.

I suggest waiting and see if they implement it, and in the meantime if we get the change, we can simply create an action ourselves.
What do you think @cwaring?

@karlhorky
Copy link

karlhorky commented Apr 16, 2021

We do have the ImageOptim CLI, so in the future we can create an action that uses it and runs only on the changed images of the PR. If they don't implement it in the calibreapp/image-actions in the meanwhile.

If you end up doing this, do you think that you could report back to the issue in calibreapp/image-actions#92 ? Would be useful for the users over there who also want to use something that works in the meantime.

@zebateira
Copy link
Contributor Author

@karlhorky will do!

@jessicaschilling
Copy link
Contributor

@cwaring, just checking in with you on this. Thanks!

@cwaring
Copy link
Member

cwaring commented Apr 20, 2021

@zebateira would you mind dropping some notes here from Slack discussion. 🙏🏻

@zebateira
Copy link
Contributor Author

@zebateira would you mind dropping some notes here from Slack discussion. 🙏🏻

Yap!

John has also been working on a custom ci image compression script for the docs: https://github.com/filecoin-project/filecoin-docs/pull/793/files
this one however only operates on images that are part of the commit range

This would be good to purse, considering the potential to spin this off into a separate github action that we could use across content heavy sites, but taking into account our bandwidth, I think we'll keep the implementation above, and then update in the future if necessary.

@zebateira zebateira merged commit 2cdcd3a into main Apr 20, 2021
@zebateira zebateira deleted the chore/compress-images-on-pr branch April 20, 2021 16:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants