[HTML-Tutorial-14] srcset & sizes Attributes | Responsive Images (Part -1) | Web Development

How to make images responsive for different devices using HTML?
How to use the srcset & sizes attributes for improved web performance?
Learn about pixel density, screen resolution, viewport width, the size of images and how to help the browser choose the best image for any device.

- - - - Contents Of The Video - - - -

00:00 - Introduction & Recap
00:29 - Problem with One Image for all Devices
01:28 - Responsive Images using HTML (Intro)
03:01 - Screen resolution & Pixel Density
04:32 - Multiple copies of images with different resolutions
05:29 - srcset Attribute with Display Density Descriptors
11:32 - Problem with srcset Attribute with Display Density Descriptors
12:07 - srcset Attribute with Width Descriptors
13:19 - Problem with srcset Attribute with Width Descriptors
14:54 - sizes Attribute
21:00 - Advantages of using srcset & sizes together
21:34 - Recommended Resources
21:49 - Review

- - - - Interesting Links - - - -

Recommended Resources:

1. MDN Docs - Responsive Images :-
https://developer.mozilla.org/en-US/d...

2. Cloudfour.com - sizes :-
https://cloudfour.com/thinks/responsi...

3. Cloudfour.com - srcset :-
https://cloudfour.com/thinks/responsi...

4. CSS Tricks :-
https://css-tricks.com/responsive-ima...

5. Html.com :-
https://html.com/attributes/img-srcset/

6. Freecodecamp :-
https://www.freecodecamp.org/news/a-g...

7. Aspect Ratio Calculator :-
https://calculateaspectratio.com/

Code Links:

1. srcset & sizes (Web Page): https://juthikashetye.github.io/Code-...

2. srcset & sizes (Code): https://github.com/juthikashetye/Code...

3. Link to all Demos: https://juthikashetye.github.io/Code-...