fix(common): Don't generate srcsets with very large sources #47997

atcastle · 2022-11-08T22:16:48Z

This PR makes a small change to NgOptimizedImage automatic srcset generation to prevent users from inadvertently generating srcsets that download enormous images. After this change, if the image's fixed height value is above 1080 or the width value is above 1920, no automatic srcset will be generated. We want to prevent this, because the srcset would include a 2x DPI version of the image which is almost certainly larger than what the user wanted for an image of that size.

If the user really does want a 2x version of such a large image, that can still be accomplished by manually adding a ngSrcset attribute. CC: @AndrewKushnir @pkozlowski-opensource

AndrewKushnir

LGTM, just a couple nits 👍

packages/common/test/directives/ng_optimized_image_spec.ts

packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts

AndrewKushnir

@atcastle thanks for the changes 👍

Could you please also merge all commits into one when you get a chance?

Fix an issue where users could inadvertently generate very large source images in ngOptimizedImage

ChanduMdp · 2022-11-10T08:40:12Z

Caretaker Note: Please ignore the google-internal-tests status. unrelated flaky failure

kara

LGTM, but curious how the limits are being chosen

kara · 2022-11-10T17:25:02Z

packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts

+ * fixed-size images. In pixels.
+ */
+const FIXED_SRCSET_WIDTH_LIMIT = 1920;
+const FIXED_SRCSET_HEIGHT_LIMIT = 1080;


How did we choose these numbers? Can you add a comment?

AndrewKushnir · 2022-12-05T20:12:16Z

This PR was merged into the repository by commit 8e52ca2.

Fix an issue where users could inadvertently generate very large source images in ngOptimizedImage PR Close #47997

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fanimations/15.0.2/15.0.4) | | [@angular/common](https://github.com/angular/angular) | dependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fcommon/15.0.2/15.0.4) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/15.0.2/15.0.4) | | [@angular/compiler-cli](https://github.com/angular/angular/tree/main/packages/compiler-cli) ([source](https://github.com/angular/angular)) | devDependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/15.0.2/15.0.4) | | [@angular/core](https://github.com/angular/angular) | dependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fcore/15.0.2/15.0.4) | | [@angular/forms](https://github.com/angular/angular) | dependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fforms/15.0.2/15.0.4) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/15.0.2/15.0.4) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | patch | [`15.0.2` -> `15.0.4`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/15.0.2/15.0.4) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v15.0.4`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1504-2022-12-14) [Compare Source](angular/angular@15.0.3...15.0.4) ##### animations | Commit | Type | Description | | -- | -- | -- | | [6c1064c72f](angular/angular@6c1064c) | fix | fix incorrect handling of camel-case css properties ([#48436](angular/angular#48436)) | ##### common | Commit | Type | Description | | -- | -- | -- | | [f30d18a942](angular/angular@f30d18a) | fix | Fix TestBed.overrideProvider type to include multi ([#48424](angular/angular#48424)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [b55d2dab5d](angular/angular@b55d2da) | fix | evaluate const tuple types statically ([#48091](angular/angular#48091)) | #### Special Thanks Alan Agius, Andrew Kushnir, Andrew Scott, Aristeidis Bampakos, Bob Watson, BrowserPerson, Jens, Jessica Janiuk, Joey Perrott, JoostK, Konstantin Kharitonov, Lukas Matta, Piotr Kowalski, Virginia Dooley, Yannick Baron, dario-piotrowicz, lsst25, piyush132000 and why520crazy  ### [`v15.0.3`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1503-2022-12-07) [Compare Source](angular/angular@15.0.2...15.0.3) ##### common | Commit | Type | Description | | -- | -- | -- | | [50b1c2bf52](angular/angular@50b1c2b) | fix | Don't generate srcsets with very large sources ([#47997](angular/angular#47997)) | | [bf44dc234a](angular/angular@bf44dc2) | fix | Update `Location` to support base href containing `origin` ([#48327](angular/angular#48327)) | ##### compiler | Commit | Type | Description | | -- | -- | -- | | [9a5d84249a](angular/angular@9a5d842) | fix | make sure selectors inside container queries are correctly scoped ([#48353](angular/angular#48353)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [167bc0d163](angular/angular@167bc0d) | fix | Produce diagnostic rather than crash when using invalid hostDirective ([#48314](angular/angular#48314)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [e4dcaa513e](angular/angular@e4dcaa5) | fix | unable to inject ChangeDetectorRef inside host directives ([#48355](angular/angular#48355)) | #### Special Thanks Alan Agius, Alex Castle, Andrew Kushnir, Andrew Scott, Bob Watson, Derek Cormier, Joey Perrott, Konstantin Kharitonov, Kristiyan Kostadinov, Paul Gschwendtner, Pawel Kozlowski, dario-piotrowicz and piyush132000  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1684 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2023-01-05T16:07:05Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

…47997) Fix an issue where users could inadvertently generate very large source images in ngOptimizedImage PR Close angular#47997

pullapprove bot requested a review from jessicajaniuk November 8, 2022 22:16

AndrewKushnir requested review from kara and AndrewKushnir and removed request for jessicajaniuk November 8, 2022 22:29

AndrewKushnir added action: review The PR is still awaiting reviews from at least one requested reviewer target: rc This PR is targeted for the next release-candidate area: common Issues related to APIs in the @angular/common package common: image directive labels Nov 8, 2022

ngbot bot modified the milestone: Backlog Nov 8, 2022

AndrewKushnir approved these changes Nov 8, 2022

View reviewed changes

AndrewKushnir approved these changes Nov 9, 2022

View reviewed changes

fix(common): Don't generate srcsets with very large sources

6d385f6

Fix an issue where users could inadvertently generate very large source images in ngOptimizedImage

atcastle force-pushed the no-huge-image-sources branch from e70685b to 6d385f6 Compare November 9, 2022 17:25

ChanduMdp added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Nov 10, 2022

kara approved these changes Nov 10, 2022

View reviewed changes

AndrewKushnir closed this in 8e52ca2 Dec 5, 2022

AndrewKushnir pushed a commit that referenced this pull request Dec 5, 2022

fix(common): Don't generate srcsets with very large sources (#47997)

50b1c2b

Fix an issue where users could inadvertently generate very large source images in ngOptimizedImage PR Close #47997

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(common): Don't generate srcsets with very large sources #47997

fix(common): Don't generate srcsets with very large sources #47997

atcastle commented Nov 8, 2022

AndrewKushnir left a comment

AndrewKushnir left a comment

ChanduMdp commented Nov 10, 2022

kara left a comment

kara Nov 10, 2022

AndrewKushnir commented Dec 5, 2022

angular-automatic-lock-bot bot commented Jan 5, 2023

fix(common): Don't generate srcsets with very large sources #47997

fix(common): Don't generate srcsets with very large sources #47997

Conversation

atcastle commented Nov 8, 2022

AndrewKushnir left a comment

Choose a reason for hiding this comment

AndrewKushnir left a comment

Choose a reason for hiding this comment

ChanduMdp commented Nov 10, 2022

kara left a comment

Choose a reason for hiding this comment

kara Nov 10, 2022

Choose a reason for hiding this comment

AndrewKushnir commented Dec 5, 2022

angular-automatic-lock-bot bot commented Jan 5, 2023