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

Pubblicato il: 03 novembre 2020
sul canale di: 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-...

In questa pagina del sito puoi guardare il video online [HTML-Tutorial-14] srcset & sizes Attributes | Responsive Images (Part -1) | Web Development della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Code Range 03 novembre 2020, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 10,819 volte e gli è piaciuto 239 spettatori. Buona visione!