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

Publié le: 03 novembre 2020
sur la chaîne: 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-...

Sur cette page du site, vous pouvez voir la vidéo en ligne [HTML-Tutorial-14] srcset & sizes Attributes | Responsive Images (Part -1) | Web Development durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Code Range 03 novembre 2020, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 10,819 fois et il a aimé 239 téléspectateurs. Bon visionnage!

22,689