Improve quality of covers and add WebP format support #1990

New Issue

MrUnknownDE · 2026-04-05T22:11:02+02:00

MrUnknownDE commented

2026-04-05 22:11:02 +02:00

Originally created by @yw4z on 10/5/2025

Tested on windows 11
will complete this PR after https://github.com/SoftFever/OrcaSlicer/pull/10806 approved
currently %70 of covers updated with higher resolution

CHANGES

• Replaces most of PNG files with WEBP for best compression while using higher quality
• Increases cover quality by 2x (320x320). best for high dpi screens
• Improves cover sizes. fitted most of images to frame that increased visibility of printers
• Removed filament rolls and some cables if they cause small visibility of printers
• Replaced some covers with angled ones to improve consistency

NOTES

• Adding webp support easy with small change on src/slic3r/GUI/WebGuideDialog.cpp since this dialogs browser based

• File size comparison with 2x resolution. basically we got 2x quality with same size. currently covers takes about 11MB. it will take 33MB without using webp format if we use 2x resolution

there is no visible difference between them. here is files if you want to compare
CoverComparison.zip

• Original code uses 160x160 resolution but covers uses 180x180 resolution that causes extra anti aliasing and quality reduction. this PR matches 2x resolution and improves quality significantly

ad0ed95b85/resources/web/guide/24/24.css (L72-L83)

• Also I found a way to use webp images as bitmap if we need in use with wxwidgets. currently its not needed

• As a result; profile folder size will reduce few megabytes (but not much) while increasing quality of covers

COMPARISON

IMPORTANT! screenshots taken on a 1080p monitor. quality difference will be more noticable on high dpi screens

• Removed filament rolls / cables / lids to make printer images bigger from most of brands

• Used all available space for thumbnails to make them bigger

• Replaced covers with angled on some printers. and preferred left angle if i can find a suitable image to improve consistency

• Made some changes on covers to show printers big as much as possible

*Originally created by @yw4z on 10/5/2025* Tested on windows 11 will complete this PR after https://github.com/SoftFever/OrcaSlicer/pull/10806 approved currently %70 of covers updated with higher resolution ### CHANGES • Replaces most of PNG files with WEBP for best compression while using higher quality • Increases cover quality by 2x (320x320). best for high dpi screens • Improves cover sizes. fitted most of images to frame that increased visibility of printers • Removed filament rolls and some cables if they cause small visibility of printers • Replaced some covers with angled ones to improve consistency ### NOTES • Adding webp support easy with small change on src/slic3r/GUI/WebGuideDialog.cpp since this dialogs browser based • File size comparison with 2x resolution. basically we got 2x quality with same size. currently covers takes about 11MB. it will take 33MB without using webp format if we use 2x resolution <img width="394" height="91" alt="492230252-d4addf4c-b467-4efb-8892-f22ad36a1403" src="https://github.com/user-attachments/assets/c0e94e90-7d57-4a4e-ba2d-cdfcaba81598" /> there is no visible difference between them. here is files if you want to compare [CoverComparison.zip](https://github.com/user-attachments/files/22462102/CoverComparison.zip) • Original code uses 160x160 resolution but covers uses 180x180 resolution that causes extra anti aliasing and quality reduction. this PR matches 2x resolution and improves quality significantly https://github.com/SoftFever/OrcaSlicer/blob/ad0ed95b8541f0532aede9052d987d20a6d24820/resources/web/guide/24/24.css#L72-L83 • Also I found a way to use webp images as bitmap if we need in use with wxwidgets. currently its not needed • As a result; profile folder size will reduce few megabytes (but not much) while increasing quality of covers ### COMPARISON **IMPORTANT!** screenshots taken on a 1080p monitor. quality difference will be more noticable on high dpi screens • Removed filament rolls / cables / lids to make printer images bigger from most of brands <img width="1666" height="677" alt="Screenshot-20251005142744" src="https://github.com/user-attachments/assets/2dd22dc2-d4c6-44b2-a5ba-f0afceaa6131" /> <img width="1654" height="687" alt="Screenshot-20251005143023" src="https://github.com/user-attachments/assets/9acb6841-d73e-47ae-baa3-094a6707261d" /> <img width="446" height="231" alt="Screenshot-20251005151441" src="https://github.com/user-attachments/assets/0b6c1333-8399-4e5e-ae46-d883d721bbd8" /> <img width="750" height="317" alt="Screenshot-20251005151608" src="https://github.com/user-attachments/assets/4d5a8f8d-32f8-4eb0-901f-0b0a3201d20f" /> • Used all available space for thumbnails to make them bigger <img width="1705" height="644" alt="Screenshot-20251005142935" src="https://github.com/user-attachments/assets/fc3eb8fc-37b9-4e6b-9459-0f027e9d2740" /> <img width="1633" height="363" alt="Screenshot-20251005143100" src="https://github.com/user-attachments/assets/7a405dc6-bc53-419b-87d2-9748beb8f7df" /> <img width="1616" height="516" alt="Screenshot-20251005143443" src="https://github.com/user-attachments/assets/b12f174b-0243-4ca7-8d2e-438797446e46" /> • Replaced covers with angled on some printers. and preferred left angle if i can find a suitable image to improve consistency <img width="798" height="300" alt="Screenshot-20251005151102" src="https://github.com/user-attachments/assets/0192a4c8-0ef8-4dfc-b461-d287146c8b47" /> <img width="833" height="302" alt="Screenshot-20251005150913" src="https://github.com/user-attachments/assets/8aa4491f-2e88-4541-81da-ecf378629804" /> • Made some changes on covers to show printers big as much as possible <img width="1096" height="371" alt="Screenshot-20251005151200" src="https://github.com/user-attachments/assets/bb16f8a2-8a4c-4520-bfce-db542f52a4e4" />

MrUnknownDE closed this issue

2026-04-05 22:11:02 +02:00

Sign in to join this conversation.

No Label

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/OrcaSlicer#1990