Responsive images

<article> we have different screen sizes and resolution and browsers load images before css and js.so if i have a standard-image screen(low resolution) i should not wait for the page to load and waste bandwidth.browsers need somebody to tell them wether this screen is a Retina 4K or standard-resolution.add on that the screen size-smartphone with retina screen or standard low resolution screen.HTML <code>srcset</code> and <code>sizes</code> do the job. </article> <article> consider this: <pre> img src="mask.jpeg" srcset=" Optimized-300.jpg 300w, horizon_zero_dawn_thunderhawk-HD.jpg 1920w" sizes=" (max-width:400px) 200px, (min-width:400px) 1300px"> </pre> <code>srcset</code> hold a list of different image resolutions files.next to them is resolution value-this is the 200px and 1300px above.this is exactly the part that tells the browser the different resolutions we have in the document (200px standard resolution for standard-image screens,1300px for Retina display screens). <p><h4>More details:</h4> <code>srcset</code> is telling the browser this is the img url (<code>Optimized-300.jpg </code>).and this is it's resolution and how fancy it is(<code>200w</code>).incase screen size is not an issue browser will only look for screen resolution.then (x) descriptor is used like 1x,2x,.. to indicate img resolution degree to help the browser selecting one. </p> <p><code>sizes</code> is a mix of two parts: first is media queries and second is a number that will help select the resolution and the size the image will be rendered on in the final stage(css also handel this step).one number with two jobs. </p> <div><h4>More details:</h4> <code>sizes</code> tells the browser if media query is true (max-width:400px) then render the image that has a resolution that fit with this size(200px).now the size will be consistent with the image resolution in the <code>srcset</code> attribute.200px will fit the image resolution 300w.however size 301 for instance will not because we have no image resolution that much.the browser will choose the (1300w) resolution instead.and the image will be rendered with 200px width in the final stage.the last size value has no media query part only size part is a fallback option if no condition matches and works just like the size part only media query is missing-usually 100vw(100% viewport width) is good option-this is the default if no fallback specified.no srcsset no sizes effect.</div> </article> <article> <h3>before i forget:</h3> retina images are 2X or higher than standard images.so a 400px wide element needs a 400px wide standard image and 800px wide retina image. svg are good for fancy display-actually better than png and jpg etc.but not all images are svg. in both cases if the display device is only retina then retina images is used and consider the above.if display devices are standard and retina then html let browsers know wich to render.that is using scrset attr(until now we are not concered about device size).but what about smartphones?they have width of max 400px so a 2000px is too much for small screens.a 800px is fit for them.a rule of thumb is a 400px wide screen takes a 800px wide if it is a retina screen.a 1000px wide would be a bandwidth wASTE. now i need to tell the browser wich image resolution to render at which screen size. </article> <article> <h2>picture and Art-directed</h2> imagine a picture that looks good on desktop but fucks everything on smartphones-content inside the picture get too small.now we need to crop that picture to make it look good.appearently a croped version of the used pictuer need to be made using editors-browsers are not pictuer editors. <div> <pre> picture source media="(max-width: 552px)" srcset="hero-small.jpg"> source media="(max-width: 1062px)" srcset="hero-medium.jpg"> img src="hero-big.jpg" width="1500" height="400" alt="Hero"> picture </pre> media query will tell browser wich image source to use depending on the viewport-smartphones or desktops for instance. </div> </article> <div class="use-cases"> <h2>Use-cases:</h2> <ul> <li> <b>Resolution:</b> <aside> HTML tells browser to pick img based on screen resolution. <pre> srcset="o1920.jpg 2x, o300.jpg 1x" </pre> </aside> </li> <li> <b>Resolution and size:</b> <aside> HTML tells the browser to pick img based on screen resolutio and screen size. <pre> img src="mask.jpeg" srcset="o300.jpg 300w,o1920.jpg 1920w" sizes="(max-width:320px) 100%, (min-width:321px) 100%, 100vw" </pre> </aside> </li> <li> <b>Art-directed:</b> <aside>HTML tells the browser to pick corped img in order to fit on small screens without losing img content.<code>picture</code> element along with <code>source</code> element will be used to select the best image that fits the breakpoint.images will also be selected based on device screen resolution within srcset attribute.editor is used to corp pictures and have two or more versions of the image that fits devices viewport size based on media queries-breakpoints. <b> Art-directed</b> uscases described well <a href="https://responsiveimages.org/demos/"><i><b>here</b></i></a>. <div style="width:90%; background:orange; opacity:0.8; color:black; border-radius:15px;padding:8px 8px 8px 10px">Note how in <code>picture</code> tag the <code>source</code> element attribute <code>srcset</code> can hold different image resolutions to select.<code><b>sizes</b></code> attribute however is not used since in Art-direction case image size is intrinsic and img will be rendered as it is.</div> </aside> </li> </ul> <div> <h3>It is important to know that:</h3> using <code><b>srcset</b></code> and <code><b>sizes</b></code> on <b>img</b> tag is different than using it on <code><b>picture</b></code> tag.ok they both can render based on resolution (size is intrinsic with <code><b>picture</b></code> and <b>is</b> set using <code><b>sizes</b></code> attribute with <code><b>img</b></code> tag) but using them with <code><b>img</b></code> will let the browser do the math and select the best img for us.described all <a href="http://responsiveimages.org/"><i><b>here</b></i></a>. </div> </div>