-
-
Notifications
You must be signed in to change notification settings - Fork 695
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
Convert all documentation example images to webp using sharp #4329
base: main
Are you sure you want to change the base?
Convert all documentation example images to webp using sharp #4329
Conversation
…name>` to convert documentation example images to webp (lossy, quality=90) using sharp library
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #4329 +/- ##
=======================================
Coverage 87.92% 87.93%
=======================================
Files 246 246
Lines 33361 33361
Branches 2167 2200 +33
=======================================
+ Hits 29334 29336 +2
+ Misses 3044 3024 -20
- Partials 983 1001 +18 ☔ View full report in Codecov by Sentry. |
@@ -0,0 +1,44 @@ | |||
import fs from 'fs'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure this script is needed as is, but it would be great if you could add it to the image generation script.
Note that I have made a few changes to this script in the sky branch.
@@ -41,12 +41,12 @@ | |||
"pbf": "^3.2.1", | |||
"potpack": "^2.0.0", | |||
"quickselect": "^2.0.0", | |||
"sharp": "^0.33.4", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a devDependency
@@ -155,6 +156,7 @@ | |||
"generate-typings": "dts-bundle-generator --export-referenced-types --umd-module-name=maplibregl -o ./dist/maplibre-gl.d.ts ./src/index.ts", | |||
"generate-docs": "typedoc && node --no-warnings --loader ts-node/esm build/generate-docs.ts", | |||
"generate-images": "node --no-warnings --loader ts-node/esm build/generate-doc-images.ts", | |||
"convert-images": "node --no-warnings --loader ts-node/esm build/convert-doc-images.ts", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See my initial comment.
Hmm... seems like github doesn't support showing the content of webp images :-( this creates a problem when one wants to review how the image will look before merging. |
I've merged the sky PR, which created a conflict, no surprise here... |
… and simplify implementation
I have found an issue talking about the .webp limitation in github (still unresolved) Native WebP image support #5470
Someone found a workarround by just renaming the file extension .webp to any Github supported image format
Originally posted by @AlxHnr in isaacs/github#976 (comment) @HarelM What is your implementation recommendation based on these feedbacks? |
As another alternative,
The response will be the webp converted on the fly by the CDN. |
I think the best approach would be to update the generate-docs script to only do that as part of the build process, this way it won't be important to commit images that are optimized, although it will save git storage it will be less important. |
We are using github pages basically. So it doesn't have good CDN type of capabilities nor we plan to do something more complicated. I think keeping it simple is a good approach. |
@YohanSciubukgian any updates on this? |
Convert all documentation example images to WebP format using sharp library
The sharp library has an Apache-2.0 license
Add the following npm run command:
npm run convert-images
to convert all existing .png imagesnpm run convert-images <example-file-name>
to convert a specific imageGlobal size optimization for all example images:
From
26.9 MB (28,248,974 bytes)
in .pngTo
9.54 MB (10,007,586 bytes)
in .webpSpecifications:
-quality 90
which is usually a good tradeoff between size and image quality for standard web usage.Originally posted by @HarelM in #4189 (comment)
Note: The integration could be improved by merging the
convert-images
command to thenpm run generate-images
command so it generates both PNR and WebP at the same time (or just WebP if we consider that PNG will not be used anymore).Launch Checklist
CHANGELOG.md
under the## main
section.PS: It's my first PR to this repository, please feel free to guide me on doing it the right way :)