Lossless Image Optimisation Example Images

[coliff]

Saved 12.6 MB out of 20.8 MB. 30% per file on average.

I used ImageOptim app for macOS.

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

[HarelM]

Thanks!
Can you add some instruction to the readme file, may an optinal step?

maplibre-gl-js/docs/README.md

Line 61 in cdf93b0

1. Run `npm run generate-images <example-file-name>`. The script will take a screenshot of the map in the example and save it to `docs/assets/examples/`.

[coliff]

I'm not sure what the instruction would be though. Perhaps:?

(Optional) You can reduce the file-size of the example image with https://squoosh.app/

Overall though, I think this could better be tackled separately with a command line script or a GitHub Action.

[HarelM]

If you can do it in a github action, then you should be able to simply add it to the generate-images.ts script, assuming this is something that anyone can do without installing too much stuff.

maplibre-gl-js/build/generate-doc-images.ts

Line 40 in cdf93b0

path: `./docs/assets/examples/${exampleName}.png`,

[YohanSciubukgian]

Could it be interesting to move to webp image format as it is widely adopted for a while now ?
https://caniuse.com/webp

It could help to further reduce file size as par https://developers.google.com/speed/webp/docs/webp_study

[HarelM]

I have no objections as long as there's an easy way to generate them as part of the image generation script.

[HarelM]

@coliff @YohanSciubukgian any updates on this?

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.44%. Comparing base (3ebbdde) to head (13ef03a).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4189      +/-   ##
==========================================
- Coverage   87.65%   87.44%   -0.22%     
==========================================
  Files         242      242              
  Lines       33076    33076              
  Branches     2182     2171      -11     
==========================================
- Hits        28992    28922      -70     
- Misses       3090     3171      +81     
+ Partials      994      983      -11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[coliff]

@coliff @YohanSciubukgian any updates on this?

As it stands, the changes in this PR is a huge improvement. I personally think it's worth merging as it is for now. I don't really have the time/motivation to move the generate images to WebP.

(separately though, we should also lazy-load the images. That way not all 99 images all load on the page right away, and will only load as a user scrolls near. That will help a huge amount! Mkdocs-Material supports this:
https://squidfunk.github.io/mkdocs-material/reference/images/?h=lazy+load#image-lazy-loading )

[HarelM]

Can you add a comment at least in the readme for users who are generating images using the script to let them know how to compress it?
Feel free to add lazy load to mkdocs config, sounds like a good addition.

[HarelM]

THANKS!!

[HarelM]

I was not able to reduce a png image size with https://squoosh.app/
I'll update the docs to use https://compresspng.com/ as part of #3645 PR.

[coliff]

I was not able to reduce a png image size with squoosh.app I'll update the docs to use compresspng.com as part of #3645 PR.

Hmm, Maybe you were not doing it correctly then? I think squoosh.app is the best and is updated regularly with the best/latest compression. Select OxiPNG in the Compress dropdown.

[HarelM]

I got 9% at best with squoosh. With https://compresspng.com/ I got 63%.

[coliff]

I got 9% at best with squoosh. With compresspng.com I got 63%.

ok up to you, but compresspng.com won't work well for high fidelity images if they are reducing them to 8-bit (256 colors) - it uses lossy compression. it appears to rename files too.

Squoosh's OxiPNG compression is lossless by default.

[HarelM]

These are "thumbnails" for the examples, I don't need it pixel perfect and use a lossless compression, on the contrary, I need the image to be small and represent the example well, much like the addition of lazy.

[YohanSciubukgian]

Hi @HarelM, sorry to be late on this. I just made a PR to address the webp image format optimization.