062 - Responsive Images in HTML - Density and Resolution

[hazartilirot]

Just finished the lesson, what I can say? It seems Jonas doesn't know how it works. He sounds like - take it for granted. I've read a couple of articles, it's clear how it's expected to work though it doesn't work in the project. Even if it worked parameters and results are inconsistent. if we take as an example a lesson in which we changed properties like padding, width, height, etc - Everything was consistent and the "code" behaved as expected. With all those images.... no matter which method you implement the result is always unpredictable.
To my mind the feature with responsive images has been poorly implemented in the browser (or badly processed in Developer Tool). Provided the size of a container is less than 150 pixels there should be definitely selected an image 300px wide not 1000px!

[hazartilirot]

Well. I'm was going to end my life.... but suddenly I'd decided to check out one important thing! Browsers like using cache images.... so I opened a new windows in private mode, narrowed my windows as needed to 360 pixels, deleted cache, and loaded a page!
Finally it works as expected!

What I didn't like while watching the lesson is that Jonas for some reason started to divide max-width on a width of a container in a particular mode. There is a link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes

which says:

Media Conditions describe properties of the viewport, not of the image. For example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px.

It's quite unambiguous. The only thing you should keep in mind that once you cleared cache, reloaded a page and reached the max-width (meaning that the image source has been loaded), the next time provided you reload the page the image source would take precedence over the condition. I think it happens for a reason. Your browser has already cached all images and if they are locally stored it provides you the best one. Just clear the browser's cache once again and you're good to go.

Just in case you need a code (mind file's names. they must be renamed in your working directory:
https://codesandbox.io/s/magical-brook-eotlj

`

                        <img 
                        srcset="img/nat2-300w.jpg 300w,
                                img/nat2-1000w.jpg 1000w" 
                        sizes="(max-width: 1800px) 300px,
                               (min-width: 2000px) 1000px"    
                        src="img/nat2-1000w.jpg"
                        alt="photo 2"
                        class="composition__photo composition__photo--p2">
                        
                        <img 
                        srcset="img/nat3-300w.jpg 300w,
                                img/nat3-1000w.jpg 1000w" 
                        sizes="(max-width: 1800px) 300px,
                               (min-width: 2000px) 1000px"    
                        src="img/nat3-1000w.jpg"
                        alt="photo 3"
                        class="composition__photo composition__photo--p3">
                        
                        <!-- <img src="img/nat-1-large.jpg" alt="photo 1" class="composition__photo composition__photo--p1"> 
                        <img src="img/nat-2-large.jpg" alt="photo 2" class="composition__photo composition__photo--p2">
                        <img src="img/nat-3-large.jpg" alt="photo 3" class="composition__photo composition__photo--p3">-->`