sizes needs to be on the source-tag

[PatrickG]

The sizes attribute needs to be on the source-tag.
See source vs picture attributes.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

⚠️ No Changeset found

Latest commit: f8c864f

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

[vercel]

@PatrickG is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[Rich-Harris]

Thank you. The sizes themselves were based on an old layout, so I've updated those. For the life of me though, I can't get the browser to actually load the 960px-wide image. It loads the 1440px-wide one every time, even on tiny screens. Any idea what's going on?

[eltigerchino]

For the life of me though, I can't get the browser to actually load the 960px-wide image. It loads the 1440px-wide one every time, even on tiny screens. Any idea what's going on?

Could it be related to retina screens? This would cause the browser to load the higher res images.

[Rich-Harris]

That was my thought too, but I tried crazy breakpoints like 3000px and still nothing :/

[eltigerchino]

- sizes="(min-width: 768) 1440px, 960px"
+ sizes="(min-width: 768px) 1440px, 960px"

After adding the missing px, I've observed that Chrome, Safari, and Firefox all have different behaviours for this (tested on MacOS).

1. Firefox is the only browser that correctly implements this.

• Respects the sizes attribute.
• Changes the image when resizing the window.

2. Safari.

• Respects the sizes attribute.
• Does not change the image when resizing the window (it only loads the correct image on initial page load).

3. Chrome

• Does not respect the sizes attribute (always loads the largest image).
• Removing the sizes attribute enables srcset to work correctly (loads the next largest image on resize).

Would be great if someone else could verify these behaviours too.

[PatrickG]

I can not test on Safari, but it seems Firefox behaves similarly to Chrome for me. It always loads the largest if the sizes attribute is present.

Removing the sizes attribute enables srcset to work correctly (loads the next largest image on resize).

I would not say "correctly", but at least something happens.
Without the sizes attribute, Chrome switches to the large image when the screen width is

• >= 961px (DPR: 1.0)
• >= 588px (DPR: 2.0)
• >= 392px (DPR: 3.0)

while Firefox switches to the large image when the screen width is

• >= 961px (DPR: 1.0)
• >= 481px (DPR: 2.0)
• >= 321px (DPR: 3.0)

with this import ./svelte-kit-machine.webp?w=960;1440&format=avif;webp;png&picture

[PatrickG]

I'm not sure, but I think the images in srcset must be ordered from smallest to largest.
It is very strange.
I would suggest removing the sizes attribute. Then at least mobile phones should load the smaller image.

[Rich-Harris]

Thank you @PatrickG and @s3812497 for the thorough investigation — agree that removing sizes is probably the best solution.

I shouldn't complain — I'm old enough to remember IE6 — but the web platform continues to be a cruel prank. And they wonder why people turn to JavaScript instead of uSinG tHe PlAtfOrM