facebook / docusaurus

Easy to maintain open source documentation websites.
https://docusaurus.io
MIT License
56.65k stars 8.51k forks source link

Optimize showcase images #5980

Closed slorber closed 2 years ago

slorber commented 2 years ago

Showcase images are too big. CI is slower than it should.

We resize them with ideal image plugin but from time to time we should downscale them on Git too.

Tried a bit different methods already, couldn't find a perfect one but this might be a helpful command

npm install -g sharp-cli
mkdir website/src/data/showcase2
find website/src/data/showcase -type f -name '*.png'  -exec sharp resize 1000 --input {} --output website/src/data/showcase2/{base} \;

@lex111 already provided a CLI command but it doesn't downscale, only optimize: https://github.com/facebook/docusaurus/pull/4901

Using a smaller base-size can help the build be faster on a cold cache due to faster image resizing with the ideal image plugin.

Ideally if we could automate this with the CI, that can be convenient.

lex111 commented 2 years ago

Maybe this bot https://github.com/marketplace/imgbot is what we need?

Josh-Cena commented 2 years ago

Imgbot uses lossless compression, but @slorber wants lossy compression because we only use the images at limited sizes. It's certainly achievable, but not sure if we can do that w/ CI. Maybe with @docusaurus-bot?

slorber commented 2 years ago

🤷‍♂️ Imgbot looks nice but it doesn't downscale images and I'm not sure it will soon (https://github.com/imgbot/Imgbot/issues/306)

This is not a high priority, but if you have any idea how to solve this we can give it a try


Not 100% related but it similarly it could also be nice to have this bot running on contributors PR to avoid Prettier errors: https://github.com/creyD/prettier_action

(Prettier does not emit good logs on PR, but maybe this "reviewdog" thing can be useful too, see https://github.com/prettier/prettier/issues/6885#issuecomment-890252163)

slorber commented 2 years ago

Seems like our prod site can't deploy after merging a new showcase site with a 400kb image 😅 looking for a temp solution with Netlify for now, and have some ideas to fix this more definitively but it's time-consuming to set-up.

https://github.com/facebook/Docusaurus/commit/3c54ed2807edd84fe369211723e952f22132f0be

Josh-Cena commented 2 years ago

Hmm, we have a few other 2MB+ images... Definitely worth working on

Josh-Cena commented 2 years ago

Closing this, fixed in #6043. We can investigate automating this in #6882