fix(website): resize showcase images, tighten CI check #6043
Conversation
armano2
changed the title
|
✔️ [V2] 🔨 Explore the source changes: 75a622d 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61d7d69237b3dd0007193c1a 😎 Browse the preview: https://deploy-preview-6043--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-6043--docusaurus-2.netlify.app/ |
armano2
force-pushed
the
resize-showcase-images2
branch
from
5b1eb79 to
bb4664b
Compare
|
Just picking up a random image. The original screenshot must have been optimised a lot🧐 |
yes, they used 8b colors (256) in it, and due to anti-aliasing we have to use 16b colors (65536), we could update some of them manually, but i'm not sure if that's desired, i also noticed that there is one jpg image in this folder 8b color: 00101 we can't force all of them it to 8b, as its going to produce instead of
in some cases |
)
|
Just jumping in—there's also #3185. Does that one make sense? I'm not a big fan of WebP (not supported by every image viewer) but guess it could be more optimised? |
|
by changing format to webp we can save up 5 more mb (across all images), tho some of them are bigger size for all images: original images ~50mb |
|
Oh, just realized that the ideal image plugin we use probably doesn't support WebP... We can only apply WebP to other images until we fix that on the ideal image side |
|
for reference command for webp (executed on original images) |
Josh-Cena
added
the
pr: documentation
|
Thanks, will look at this later Just a reminder: the goal is not necessarily to have the best-optimized format for source images, because those are not the images that end up being deployed on the website anyway. The goal is a format that is faster to load/resize multiple times. Formats like AVIF may be good for some use-cases but afaik are not the fastest to load and require more CPU usage. Just reducing the source image size should be enough, we don't need to aim for maximum compression but good enough read/resize speed. Using advanced techniques that shrink the size more can actually make the situation worst for the use-case that we are trying to solve. |
Josh-Cena
changed the title
Josh-Cena
force-pushed
the
resize-showcase-images2
branch
from
0bbb233 to
451243b
Compare
|
No resizing method can make this file's size smaller... Can't imagine how it was originally encoded...
Edit. just dug up #4901. I think we can incorporate that |
Josh-Cena
changed the title
|
There isn't a way for us to conveniently push to a fork in an action, so I decided to just let the check fail if the image's aspect ratio is not good. We are going to require a width of 640, because it would be easy to fix for a maintainer (just run a script) @slorber What do you think about it now? If throwing an error for foreseeably every showcase PR isn't too frustrating, let's do it :D |
|
What about requiring size > 640? We could do one big resize PR every month instead of fixing PRs independently, as long as the resize is now easy and remains possible it should be good enough to accept larger images temporarily. Why are many images smaller in width but larger in kb? Isn't it supposed to become smaller as we reduce their width? |
Apparently, the optimization in #4901 was so good that any resizing just makes the file bigger😄 See my screenshot above. I guess the optimization deleted some metadata, since I don't know how PNGs can be optimized otherwise... But I can't use that tool since my M1 mac forbids me to build that binary 🤦♂️ I would fight against it later |
|
Great, optimized the images so that all have a size reduction. Will merge this now |
Motivation
PR created as requested in: #6042 (comment)
mogrify -filter Triangle -define filter:support=2 -resize 640 -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 100 -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/*.pngRelated PRs
#6042