-
-
Notifications
You must be signed in to change notification settings - Fork 8.7k
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
refactor: reduce file size of docusaurus.svg #10806
Conversation
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
⚡️ Lighthouse report for the deploy preview of this PR
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Thanks! That looks so similar that our visual regression tests do not even see any difference, that's weird 😅 https://app.argos-ci.com/meta-open-source/docusaurus/builds/1086/128494228 Something worth checking too is that our CI reports a size increase of the markdown asset page. Unfortunately PRs of external contributors do not have the comment, but it can be seen here: Any idea why this happens? Maybe SVGO is able to optimize the previous code further?
|
Thanks for merging! FWIW those visual regression tests seem to check light mode only, which is probably fine everywhere except that markdown asset page which displays the "speed" icon in dark mode instead of the "keytar" icon (on purpose). Probably not worth updating CI config but I thought I should mention it. |
Pre-flight checklist
Motivation
After submitting
website/static/img/docusaurus.svg
as-is to thevscode-icons
repo (vscode-icons/vscode-icons#3645), one of the maintainers asked me to reduce the file size to less than 4 KB, preferably 2 KB.I managed to get it down to 1.7 KB—about 27% of its original size of 6.2 KB—and thought I'd share it here in case the Docusaurus team would like to use it. I also did the same for the "keytar" and "speed" versions.
Test Plan
Visually, the new one is a near-pixel-perfect copy of the old one except for the spines, which are a little pointier, and the "correction" of a couple of quirks like the top belly line being a tad lower than it should.
It's close enough (especially at low resolutions) that I didn't feel the need to regenerate
docusaurus.png
ordocusaurus.ico
.Note: this PR removes
viewBox="0 0 200 200"
which was added in #2316 to fix a scaling issue in IE11. Since IE has been EOL'd for a couple of years now, I figuredviewBox
wasn't necessary anymore.Test links
Deploy preview: https://deploy-preview-10806--docusaurus-2.netlify.app/
The "keytar" and "speed" versions are used here:
https://deploy-preview-10806--docusaurus-2.netlify.app/docs/markdown-features/assets#themed-images
Related issues/PRs
Sources
The code changes in this PR are for the minified versions, but the full versions with comments are posted below:
docusaurus.svg
docusaurus_keytar.svg
docusaurus_speed.svg