@adityaphasu
Posted
Hi!
To address the issue, The srcset attribute when provided with a list of images the browser
selects the most appropriate one based on the device's characteristics. The error message you got actually indicates that the density (pixel ratio) for the two images you've specified in the srcset attribute is the same.So basically since they have the same pixel ratio the browser won't be able to differentiate between the 2 images.
- To fix this issue, you just need to provide pixel density descriptors ( like 1x, 2x ..so on) with the image URLs so that the browser knows which image to display for the high resolution devices and which one for regular ones. You can do it like this:
<picture class="grid-3">
<source media="(min-width: 1200px)"
srcset="./assets/desktop/[email protected] 2x, ./assets/desktop/image-grid-3.jpg 1x">
<source media="(min-width: 768px)"
srcset="./assets/tablet/[email protected] 2x, ./assets/tablet/image-grid-3.jpg 1x">
<source srcset="./assets/mobile/[email protected] 2x, ./assets/mobile/image-grid-3.jpg 1x">
<img src="./assets/mobile/[email protected]" alt="" class="w-100">
</picture>
After this, you shouldn't get any errors. (you can see that the images contain that '@2x' so those are actually meant for higher resolution devices hence the 2x for those and 1x for regular ones)
Before fixing this I recommend that you give this a quick read so that you can understand more about it!
By the way nice solution! One tip I could give you is that since you are using sass/scss make different partials for different sections of the page too (like the variables partial). It will be easier to maintain that way.
I hope the error gets fixed!
Good luck and happy coding!🕺🏻
@xtirian
Posted
@adityaphasu Hi!
Thnak you for the sass tip!
