-
Notifications
You must be signed in to change notification settings - Fork 27.2k
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
Description
When navigating from a component containing an image with the sizes="auto, ..." attribute to any other route using routerLink, Chromium-based browsers re-fetch the image. During this navigation, the browser appears to ignore the previous layout constraints and fetches a version from the srcset that matches 100vw of the page width.
Example Scenario:
- An image is displayed at
20vwwidth on a1000pxwide browser window. - The browser correctly fetches a
256pxwide image based on thesrcset. - The user navigates to a different route.
- The browser unexpectedly fetches a
1080pxwide image, seemingly treating the required size as100vw.
This behavior is documented in the attached screenshots and video.
Current Constraints:
- This occurs with both native
<img>tags usingsizes="auto"and thengOptimizedImagedirective. ngOptimizedImagecurrently prependsautoto thesizesattribute automatically, with no option to opt out.- Because of this forced optimization, there is currently no way to prevent these redundant fetches in Chromium while using
ngOptimizedImagewithsizesset.
Proposed Solution:
I suggest adding an option to disable the auto prepend in ngOptimizedImage as a workaround until the underlying issue is resolved.
Environment & Compatibility:
- Latest Angular: 21.1.4
- Latest Chrome: 145.0.7632.68
- Safari/Firefox: Not affected, as they currently lack support for
sizes="auto" - Root Cause: It's unclear to me if this is triggered by Angular’s routing logic or a behavior in Chromium itself.
Initial network requests:
Network requests after navigating away from the image component:
Video documentation of the issue:
Screen.Recording.2026-02-13.at.13.39.57.mov
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 21.1.4
Angular : 21.1.4
Node.js : 22.17.0
Package Manager : npm 10.9.2
Operating System : darwin arm64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.1.4 │ ^21.1.4 │
│ @angular/cli │ 21.1.4 │ ^21.1.4 │
│ @angular/common │ 21.1.4 │ ^21.1.0 │
│ @angular/compiler │ 21.1.4 │ ^21.1.0 │
│ @angular/compiler-cli │ 21.1.4 │ ^21.1.0 │
│ @angular/core │ 21.1.4 │ ^21.1.0 │
│ @angular/forms │ 21.1.4 │ ^21.1.0 │
│ @angular/platform-browser │ 21.1.4 │ ^21.1.0 │
│ @angular/router │ 21.1.4 │ ^21.1.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ vitest │ 4.0.18 │ ^4.0.8 │
└───────────────────────────┴───────────────────┴───────────────────┘
Anything else?
No response