Skip to content

Unexpected 100vw image fetch when navigating away from components due to sizes="auto" in Chromium #67055

@jakubsobel

Description

@jakubsobel

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:

  1. An image is displayed at 20vw width on a 1000px wide browser window.
  2. The browser correctly fetches a 256px wide image based on the srcset.
  3. The user navigates to a different route.
  4. The browser unexpectedly fetches a 1080px wide image, seemingly treating the required size as 100vw.

This behavior is documented in the attached screenshots and video.

Current Constraints:

  • This occurs with both native <img> tags using sizes="auto" and the ngOptimizedImage directive.
  • ngOptimizedImage currently prepends auto to the sizes attribute 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 ngOptimizedImage with sizes set.

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:

Image

Network requests after navigating away from the image component:

Image

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

https://github.com/jakubsobel/angular-image-srcset-auto-issue

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions