-
Notifications
You must be signed in to change notification settings - Fork 45
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
Comments
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, 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, 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. |
You're right, great catch! Will fix it this weekend. |
Fixed in 0.1.3 |
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
The text was updated successfully, but these errors were encountered: