do not use raw url in srcset

[JLarky]

Description

Sorry for the fly by PR :) I think I'm probably brigning this up more like a discussion than a proper PR. I've beein looking into image performance issues with builder content and the thing that I noticed is that you are putting raw url in the srcset without adding 1x or 1w attributes. Those images are showing up in the Properly size images Potential savings of xxx KiB report of lighthouse (especially on the desktop). I think the proper solution according to all the standards and docs is to use intrinsic size of the image, so let's say I have an image of 1234px then proper srcset would be ... 100w ... 200w ... 400w ... 800w ... 1200w ... 1234w (drops 1600 and 2000), but that information is not awailable in the current Image props, so I'm proposing ... 100w ... 200w ... 400w ... 800w ... 1200w ... 1600w ... 2000w ... 9999w which I think is the best you can do in the current circumstances. The main point is that browser will basically ignroe the src set that doesn't have that last ...w directive, and the result is that you are sending tons of html with all those srcsets just for browser to ignore it :)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 82473d4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 82473d4. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx test @e2e/angular
nx test @e2e/svelte
nx test @e2e/solid
nx test @e2e/react

✅ Successfully ran 31 targets

• nx test @e2e/qwik-city
• nx test @e2e/angular-ssr
• nx test @e2e/nuxt
• nx test @e2e/vue
• nx test @e2e/nextjs-sdk-next-app
• nx test @e2e/sveltekit
• nx test @e2e/hydrogen
• nx test @e2e/react-native
• nx test @e2e/react-sdk-next-app
• nx test @e2e/react-sdk-next-pages
• nx test @e2e/gen1-react
• nx test @e2e/remix
• nx test @e2e/solid-start
• nx test @e2e/gen1-remix
• nx test @snippet/react-native
• nx test @snippet/react
• nx test @snippet/angular-ssr
• nx test @snippet/nextjs-sdk-next-app
• nx test @snippet/angular
• nx test @snippet/sveltekit
• nx test @snippet/react-sdk-next-app
• nx test @snippet/svelte
• nx test @e2e/gen1-next
• nx test @snippet/nuxt
• nx test @snippet/react-sdk-next-pages
• nx test @snippet/solid
• nx test @snippet/vue
• nx test @snippet/qwik-city
• nx test @builder.io/sdks
• nx typecheck @builder.io/sdks
• nx build @builder.io/sdk

---

Sent with 💌 from NxCloud.

[JLarky]

great point! thank you so much for your suggestion

[samijaber]

@JLarky thanks for making the changes! unfortunately it looks like a few of our integration tests are now getting errors specifically around the expected image width.

It's inconsistent: looks like only client-side rendered tests are failing, not SSR'd content.

Feel free to dig into it and try to get to the bottom of the issue. If not, we will need to find the time to investigate your PR further as soon as we have the bandwidth.