[web] Implement stepped image downscaling for CanvasKit and Skwasm by harryterkelsen · Pull Request #184741 · flutter/flutter

harryterkelsen · 2026-04-07T22:32:57Z

This change implements a high-quality stepped downscaling strategy (similar to mipmap generation) to resolve rendering artifacts (aliasing) caused by scaling down images by large factors (scale < 0.5) on the web.

Key changes:

Added ImageDownscaler with a ref-counted cache for downscaled images linked to the image's source box.
Integrated the downscaler into drawImageRect for both CanvasKit and Skwasm renderers.
Conditioned the trigger on FilterQuality.medium or higher and scaling factor < 0.5 in both dimensions.
Handled cache eviction automatically when the source CkImage or SkwasmImage is fully disposed.
Added unit tests for the downscaling algorithm and caching disposal behavior.

This fixes the jagged edges and pixelated artifacts seen when heavily downscaling large images in the web engine.

Before:

After:

Fixes #135655

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

This change implements a high-quality stepped downscaling strategy (similar to mipmap generation) to resolve rendering artifacts (aliasing) caused by scaling down images by large factors (scale < 0.5) on the web. Key changes: - Added `ImageDownscaler` with a ref-counted cache for downscaled images linked to the image's source box. - Integrated the downscaler into `drawImageRect` for both CanvasKit and Skwasm renderers. - Conditioned the trigger on `FilterQuality.medium` or higher and scaling factor < 0.5 in both dimensions. - Handled cache eviction automatically when the source `CkImage` or `SkwasmImage` is fully disposed. - Added unit tests for the downscaling algorithm and caching disposal behavior. This fixes the jagged edges and pixelated artifacts seen when heavily downscaling large images in the web engine.

gemini-code-assist

Code Review

This pull request implements iterative downscaling for images in the Web UI to improve rendering quality when scaling down significantly, adding a DownscaledImageCache and updating drawImageRect in CanvasKit and Skwasm. Feedback indicates that the source rectangle is currently ignored in the downscaling logic and cache keys, which will cause incorrect rendering for sub-regions and sprite sheets. Additionally, the logic should be restricted to target dimensions of at least 1x1 to prevent potential exceptions, and the source rectangle must be passed through the downscaling functions.

harryterkelsen · 2026-04-07T23:28:53Z

/gemini review

gemini-code-assist

Code Review

This pull request implements iterative downscaling for the web engine's CanvasKit and Skwasm renderers to improve image quality during significant downscaling. It introduces a caching mechanism for downscaled variants and updates drawImageRect to use stepped downscaling when FilterQuality is medium or higher. Feedback identifies potential memory growth in the cache during animations, logic errors in the downscaling loop for extreme aspect ratios, and opportunities to optimize GPU memory by disposing of intermediate textures immediately. Additionally, using lower filter quality for intermediate steps in Skwasm is recommended for performance and consistency.

harryterkelsen · 2026-04-07T23:56:07Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces iterative downscaling for images in the Web UI to mitigate aliasing artifacts, adding a DownscaledImageCache and a stepped scaling algorithm for CanvasKit and Skwasm. Feedback includes broadening the downscaling trigger to support non-uniform scaling, using triple-slash documentation for private members as per the repository style guide, and simplifying the intermediate image disposal logic within the scaling loop.

harryterkelsen · 2026-04-08T16:51:55Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces an iterative downscaling mechanism for images in the Flutter web engine, specifically for CanvasKit and Skwasm renderers. It adds a new image_downscaler.dart utility to handle high-quality downscaling and caching, and updates the drawImageRect methods in both renderers to utilize this logic when appropriate. The review feedback suggests optimizing performance by reusing paint objects across intermediate downscaling steps and notes potential future improvements for cache key management.

harryterkelsen · 2026-04-08T21:04:55Z

/gemini review

gemini-code-assist

Code Review

This pull request implements iterative downscaling for the web engine to address aliasing artifacts during significant downscaling operations. It introduces a DownscaledImageCache and integrates it into the drawImageRect implementations for both CanvasKit and Skwasm. Feedback identifies an optimization to lazily initialize paint objects, avoiding unnecessary allocations when a downscaled image is already present in the cache.

harryterkelsen · 2026-04-08T21:23:59Z

/gemini review

gemini-code-assist

Code Review

This pull request implements iterative downscaling for the web engine's CanvasKit and Skwasm backends to improve image quality during large downscaling operations. It introduces a DownscaledImageCache to manage intermediate downscaled variants and logic to perform stepped downscaling. A review comment suggests refactoring the createSteppedDownscaledImage function to extract a helper for the drawing logic, which would reduce code duplication between the iterative loop and the final output step.

harryterkelsen · 2026-04-08T22:44:06Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces iterative downscaling for the CanvasKit and Skwasm web engines to improve image quality during significant downscaling operations. It adds a new DownscaledImageCache and logic to perform downscaling in multiple steps. Review feedback indicates that the cache disposal logic in CkImage and SkwasmImage may prematurely evict entries when image clones are involved, as it triggers on the disposal of a single clone rather than the underlying reference-counted object. Additionally, it is suggested to refine the stepping threshold in createSteppedDownscaledImage to strictly maintain a maximum 2x downscale per iteration.

flutter-dashboard · 2026-04-09T00:28:27Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #184741 at sha f04b3d7

harryterkelsen requested a review from mdebbar April 7, 2026 22:33

github-actions bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels Apr 7, 2026

gemini-code-assist bot reviewed Apr 7, 2026

View reviewed changes

harryterkelsen removed the request for review from mdebbar April 7, 2026 22:43

Use src rect in downscaling logic

633907d

gemini-code-assist bot reviewed Apr 7, 2026

View reviewed changes

Handle extreme aspect ratios. Limit cache size

d7b3d69

gemini-code-assist bot reviewed Apr 7, 2026

View reviewed changes

Add suggestions from Gemini review

e8d4713

gemini-code-assist bot reviewed Apr 8, 2026

View reviewed changes

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/canvas.dart

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/skwasm/skwasm_impl/canvas.dart

Move temporary paint out of loop

9a64505

gemini-code-assist bot reviewed Apr 8, 2026

View reviewed changes

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/canvas.dart Outdated

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/skwasm/skwasm_impl/canvas.dart Outdated

Only create paint object if needed

d6081f1

gemini-code-assist bot reviewed Apr 8, 2026

View reviewed changes

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/image_downscaler.dart

Refactor image drawing code into helper function

f04b3d7

gemini-code-assist bot reviewed Apr 8, 2026

View reviewed changes

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/image.dart

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/skwasm/skwasm_impl/image.dart

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/image_downscaler.dart

harryterkelsen added the CICD Run CI/CD label Apr 8, 2026

flutter-dashboard bot added the will affect goldens Changes to golden files label Apr 9, 2026

harryterkelsen requested a review from mdebbar April 9, 2026 17:17

mdebbar previously approved these changes Apr 10, 2026

View reviewed changes

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/canvas.dart Outdated

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/canvas.dart

Address comments

2266eb1

harryterkelsen dismissed mdebbar’s stale review via 2266eb1 April 14, 2026 17:37

github-actions bot removed the CICD Run CI/CD label Apr 14, 2026

harryterkelsen added the CICD Run CI/CD label Apr 14, 2026

harryterkelsen requested a review from mdebbar April 14, 2026 17:38

mdebbar approved these changes Apr 14, 2026

View reviewed changes

Merge branch 'main' into fix-downscaling-image-web

1f63148

github-actions bot removed the CICD Run CI/CD label Apr 15, 2026

harryterkelsen added the CICD Run CI/CD label Apr 15, 2026

Conversation

harryterkelsen commented Apr 7, 2026

Pre-launch Checklist

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harryterkelsen commented Apr 7, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harryterkelsen commented Apr 7, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harryterkelsen commented Apr 8, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

harryterkelsen commented Apr 8, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

harryterkelsen commented Apr 8, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

harryterkelsen commented Apr 8, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flutter-dashboard bot commented Apr 9, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants