Use lossless PNG compression to prevent transparency artifacts

[dimitrieh]

Summary

This PR fixes white border artifacts that appear on transparent PNG images after automated compression.

Fixes #4278

Problem

The calibreapp/image-actions workflow was using lossy PNG compression (80% quality via sharp/libvips), which can introduce white border artifacts at transparency boundaries. This was observed in PR #4273 where mcp-in-flowfuse.png developed a white border at the top after automated compression.

Timeline

Date	Event
Feb 2023	Workflow introduced in PR #447 claiming "lossless compression"
Feb 2023	Reality: calibreapp/image-actions default pngQuality was always 80% (lossy)
Dec 2025	White border artifact observed in PR #4273

Solution

Use a hybrid approach:

Format	Tool	Method
PNG	oxipng	Truly lossless (no artifacts possible)
JPEG/WebP	calibreapp	Unchanged

Additional optimizations

1. Sparse checkout - Only checkout changed image files via GitHub API (not entire repo)
2. Conditional steps - Only install/run tools if relevant file types changed
3. Single job - Simpler than multi-job, less overhead

Safety guarantees

• No infinite loops: Commits with GITHUB_TOKEN don't trigger new workflow runs
• Idempotent: oxipng on already-optimized PNG produces no changes
• Only PR files: Uses GitHub API to get files changed in PR vs base branch

Test plan

• Create a test PR with a transparent PNG image
• Verify the workflow runs successfully
• Verify no white border artifacts are introduced
• Verify PNG file size is reduced

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	34fc2bb
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/6945729b7bb0420007bbd542
😎 Deploy Preview	https://deploy-preview-4281--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 80 (🟢 up 22 from production) Accessibility: 80 (no change from production) Best Practices: 100 (🟢 up 8 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	c1d2ba9
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/694579d8b820fd00084ee524
😎 Deploy Preview	https://deploy-preview-4281--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 86 (🟢 up 27 from production) Accessibility: 80 (no change from production) Best Practices: 100 (🟢 up 8 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[dimitrieh]

@ppawlowski can you take a look here? The alternative would be changing https://github.com/FlowFuse/website/blob/main/.github/workflows/calibreapp-image-actions.yml#L27 to 100 for example. See my comment at #4278 (comment)

[ppawlowski]

The alternative would be changing https://github.com/FlowFuse/website/blob/main/.github/workflows/calibreapp-image-actions.yml#L27 to 100 for example.

Can we try this solution first? Just to follow the KISS principle.

[dimitrieh]

closing in favor of #4300