I am not entirely sure whether it's an actual thing or not, but I am leaving this out here with the hope it may help someone.
I have noticed that order matters when it comes to srcset.įor some reason from the biggest image to the smallest one worked, whilst the contrary did not. Below is a snippet using placeholder images that show their widths which may help your testing.
Easyhdr wrong image dimensions code#
If you have avoided the gotchas, your code otherwise looks fine and the similar snippet below gives the expected results for me, though you do have to be careful about caching when testing as you already noticed (slightly different organization might help you more quickly scan which images should be chosen under different circumstances). Also make sure you don't have conflicting css or js interfering with the display of your image. Make sure you have in the head so the devices you test on are forced to adopt their real width when loading the page. NOTE: Retina and other high-res displays change the math a bit, resulting in the browser more or less doubling the width of image that it chooses in each of the above examples (see Responsive images: if you're just changing resolutions, use srcset).Ī couple potential gotchas to double check. On a 1366px wide device, the browser should select the 520w image (since the slot size determined by the media query is 519px)ģ) For devices over 1399px wide, the browser should select the 520w image (since the slot size determine by the media query is a fixed 535px). On a 1000px wide device, the browser should select either the 340w image or the 420w image (not sure how it chooses when you split the difference since the image slot size determined by the media query is 380px) On a 599px wide device, the browser should select the 600w image.Ģ) For devices between 667px and 1399px wide, the browser should select the image width that is closest to 38% of the device width. On a 450px wide device, the browser should select the 420w image. So for the breakpoints you specified, expect the following:ġ) For devices up to 666px wide, the browser should select the image width that is closest to the device width (not the smallest image that is greater than the device width). Second, the browser checks the srcset attribute to find the image that most closely matches the image slot size as determined by the sizes attribute (as described above).
Easyhdr wrong image dimensions full#
So, for the breakpoints you specified, the browser should display the selected image at full viewport width for devices up to 666px wide, then at 38% of viewport width for devices between 667px and 1399px wide, and lastly at a fixed 535px width for devices greater than 1399px wide.
Some clarification on how the srcset and sizes attributes define the way the browser should choose which image to display (see Responsive images for more details).įirst, the browser checks the sizes attribute to find the first media condition that applies to the current device width. Note that the logic is slightly complex due to lining up with responsive CSS breakpoints and trying to load sensible image widths in context. I'm only 90% sure I've written the correct "sizes" attribute for the behaviour I want. I'm left scratching my head, other similar questions all seem to boil this down to a Google Chrome caching issue, but I've been careful to eliminate that issue when testing and I still don't get the src images I expect. app/uploads/20x750.png (INCORRECT (expecting 600px width) Testing in Google Chrome, using dev tools inspect element on the img for all of the above examples, the resulting "CurrentSrc" in each case is:
0 kommentar(er)
