fix(website): resize images to width 640

[slorber]

Motivation

See also #5980

640 seems like a good baseline to resize showcase images and the smallest image size found atm.

It's unlikely we'll render those images above 600px anyway even on Retina.

For favorite sites, we may need higher res screenshots later but we can easily redo them.

Using mogrify -resize 640 website/src/data/showcase/*.png -quality 100%

Not 100% sure it's a good way for now.

Quality seems worst (not sure? will see in preview) than before and some items are heavier than before 🤷‍♂️

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

preview

[netlify]

✔️ [V2]

🔨 Explore the source changes: 1822afd

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61aa32480eaabc000775dcc8

😎 Browse the preview: https://deploy-preview-6042--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	93
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-6042--docusaurus-2.netlify.app/

[github-actions]

Size Change: 0 B

Total Size: 656 kB

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	40.1 kB
website/build/assets/css/styles.********.css	101 kB
website/build/assets/js/main.********.js	485 kB
website/build/index.html	29.5 kB

_{compressed-size-action}

[Josh-Cena]

Seems some images have been upscaled? Or is it just because of deoptimisation...

[armano2]

biggest difference in metadata of those images is palette used, rn, you are encoding them in full rgb

[slorber]

yes it doesn't look good to merge 😅

I don't think images are upscaled but the output does not seem optimized. If someone want to take a look let me know. CLI tools are not so good it seems (or I'm using the wrong options?) or we have to chain multiple of them to have a decent output 🤷‍♂️

[armano2]

what do you think about:

mogrify -filter Triangle -define filter:support=2 -resize 640 -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 100 -colors 255 -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip website/src/data/showcase/*.png

you could always keep original images and output compressed one with -path PATH

[slorber]

🤯 I have no idea :D If you want to open another PR we can see if the preview and diff size is good ;)

[armano2]

i opened new pr #6043