Extremely optimize png images losslessly using zopflipng
Description
Extremely optimize PNG images losslessly using Google's Zopflipng.
18 PNG images compressed as below, looks like saving about ~10% size in average:
docs/stirling-pdf.png | Bin 50887 -> 45004 bytes
docs/stirling.png | Bin 8860 -> 8050 bytes
images/login-dark.png | Bin 31740 -> 27493 bytes
images/login-light.png | Bin 30897 -> 26998 bytes
images/settings-light.png | Bin 44896 -> 36838 bytes
images/stirling-home-dark.png | Bin 248109 -> 216213 bytes
src/main/resources/static/android-chrome-192x192.png | Bin 4161 -> 3875 bytes
src/main/resources/static/android-chrome-512x512.png | Bin 9419 -> 8590 bytes
src/main/resources/static/apple-touch-icon.png | Bin 3937 -> 3654 bytes
src/main/resources/static/favicon-16x16.png | Bin 829 -> 580 bytes
src/main/resources/static/favicon-32x32.png | Bin 1565 -> 1129 bytes
src/main/resources/static/favicon.png | Bin 8860 -> 8050 bytes
src/main/resources/static/images/signature.png | Bin 19683 -> 19631 bytes
src/main/resources/static/mstile-144x144.png | Bin 3368 -> 3196 bytes
src/main/resources/static/mstile-150x150.png | Bin 3312 -> 3095 bytes
src/main/resources/static/mstile-310x150.png | Bin 3504 -> 3281 bytes
src/main/resources/static/mstile-310x310.png | Bin 5947 -> 5424 bytes
src/main/resources/static/mstile-70x70.png | Bin 2733 -> 2536 bytes
Checklist
- [x] I have read the Contribution Guidelines
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated relevant docs on Stirling-PDFs doc repo
- [x] My changes generate no new warnings
- [ ] I have read the section Add New Translation Tags (for new translation tags only)
looking at the images it doesnt appear losslessly I am seeing colour hue differences especially in the dark mode screenshots
Appreciate the feedback. These changes should be visually lossless. I'll verify with tools to ensure accuracy or identify any errors.
Closing for now :)
Hi @Frooodle,
I used imgdiff to verify the compressed results, and all of them turned out to be identical:
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
Success! Images are equal.
I understand your concern about the compression not appearing lossless, as you mentioned noticing color hue differences, especially in the dark mode screenshots. To double-check, I also tried enlarging and displaying the images in different browser tabs, quickly switching between them, and viewing them in dark mode. However, I still couldn’t detect any visible changes or differences.
Do you think there’s a specific image where the differences are particularly noticeable? Or are there any other objective methods we could try to verify this more effectively?
Hello @Frooodle,
Can you take a look at this one? Thanks!
I see a distinct colour difference
Very weird, perhaps its Githubs viewer or something but its odd regardless
@Frooodle, what if you check out the changes locally to see if the result differs? Or could it be due to certain visual factors (whether related to the human eye or brain, which can sometimes misinterpret specific visual presentations and may benefit from objective tools for confirmation)?"
Ping @Frooodle
@Frooodle @Ludy87, any ideas? Or we just drop this one?
Dropping, it's small difference in size and I still see difference for some reason so I'll play safe
hmmm, I'm just curious about the reason why we saw a different result :sweat_smile: