feat(common): automatically use sizes auto in NgOptimizedImage #57479
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kara
reviewed
Aug 21, 2024
AndrewKushnir
approved these changes
Aug 21, 2024
Prepend 'auto' to value of the `sizes` prop generated by NgOptimizedImage, when image has a responsive srcset and is lazy-loaded.
AndrewKushnir
approved these changes
Aug 21, 2024
|
Caretaker note: presubmit is "green" for this PR, the PR is ready for merge. |
|
This PR was merged into the repository by commit 50f08e6. The changes were merged into the following branches: main |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR updates NgOptimizedImage so that the 'sizes' prop is prepended with "auto" when the following conditions are met:
sizesvalue or has used the NgSrcset attribute)priorityattribute or suppliedloading="eager"sizes="auto"is fairly new feature, supported in Chromium and Edge, which uses the actual CSS size of lazy-loaded images to select an image from the srcset, rather than relying on the values manually provided by the user. It will always be at least as accurate as the user's sizes value, and will often be more accurate. In cases where the user has erroneously fallen back tosizes="100vw", usingsizes="auto"could reduce image download by 50% or more.On browsers which do not support sizes="auto", it is simply ignored, and srcset selection behavior will be unchanged.
When browser adoption for
sizes="auto"increases, the behavior of NgOptimizedImage could be changed to rely onsizes="auto"completely for lazy loaded images, without requiring the user to providesizesat all. However, give the current partial state of adoption, I think this smaller change is the best option--it improves loading performance in some cases, and never makes it worse.CC: @AndrewKushnir @kara