Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attribute srcset appears as lexicographically sorted URLs, producing mismatch with breakpoints. #28

Closed
bahamadon opened this issue Nov 1, 2019 · 3 comments

Comments

@bahamadon
Copy link

Svelte-image accepts as an option an array of sizes that determine the Image attribute srcset. For example, the default configuration specifies sizes of [400, 800, 1200], which are paired with breakpoints of [375, 768, 1024]. Desired behavior, as given in the published demo, is

,

where the smallest size is paired with the smallest breakpoint. (Note that in the version used to generate the demo, file "fuji.jpg" has been renamed with size as a prefix; later versions use size as a suffix.)

The current version (ver 0,1,2) produces output inconsistent with the intent of the srcset specification. For example, running svelte-image with the default values produces

.

In this output the largest pixel size is paired with the smallest breakpoint. If I understand correctly, this would pair a high-resolution image with a low-sized breakpoint.

I'm not proficient at javascript coding, but I speculate that the behavior I'm seeing is due to the use, on line 248 of main.js, of the .sort method of the srcset array. According to the specification, the default behavior of .sort is "alphabetical" sorting of the the array. This would result in the algorithm deciding that *-1200.jgp is "smaller" than *-400.jpg. (See, eg., https://www.w3schools.com/jsref/jsref_sort.asp) which would produce the discrepant result.

TLDR: Should a compare function be provided on line 248?

Hope this is helpful. BTW: It's great to have this plug-in. Thanks.

@bahamadon
Copy link
Author

With apologies, my initial posting did not render the relevant HTML. Here is a repost:

Svelte-image accepts as an option an array of sizes that determine the Image attribute srcset. For example, the default configuration specifies sizes of [400, 800, 1200], which are paired with breakpoints of [375, 768, 1024]. Desired behavior, as given in the published demo, is

srcset="g/400-fuji.jpg 375w,
g/800-fuji.jpg 768w,
g/1200-fuji.jpg 1024w"

where the smallest size is paired with the smallest breakpoint. (Note that in the version used to generate the demo, file "fuji.jpg" has been renamed with size as a prefix; later versions use size as a suffix.)

The current version (ver 0,1,2) produces output inconsistent with the intent of the srcset specification. For example, running svelte-image with the default values produces

srcset="g/Kangshung-1200.jpg 375w,
g/Kangshung-400.jpg 768w,
g/Kangshung-800.jpg 1024w"

In this output the largest pixel size is paired with the smallest breakpoint. If I understand correctly, this would pair a high-resolution image with a low-sized breakpoint.

I'm not proficient at javascript coding, but I speculate that the behavior I'm seeing is due to the use, on line 248 of main.js, of the .sort method of the srcset array. According to the specification, the default behavior of .sort is "alphabetical" sorting of the the array. This would result in the algorithm deciding that *-1200.jgp is "smaller" than *-400.jpg. (See, eg., https://www.w3schools.com/jsref/jsref_sort.asp) which would produce the discrepant result.

TLDR: Should a compare function be provided on line 248?

Hope this is helpful. BTW: It's great to have this plug-in. Thanks.

@matyunya
Copy link
Owner

matyunya commented Nov 1, 2019

You're right, great catch! Will fix it this weekend.

@matyunya
Copy link
Owner

matyunya commented Nov 1, 2019

Fixed in 0.1.3

@matyunya matyunya closed this as completed Nov 1, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants