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

Veröffentlicht am: 03 November 2020
auf dem Kanal: Code Range

10,819

239

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-...

Auf dieser Seite können Sie das Online-Video [HTML-Tutorial-14] srcset & sizes Attributes | Responsive Images (Part -1) | Web Development mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Code Range 03 November 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 10,819 Mal angesehen und es wurde von 239 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

109