[HTML-Tutorial-15] picture element | Responsive Images (Part -2) | Web Development for Beginners

How & when to use the picture & source elements? How to make the images on your web page responsive by displaying different images for different devices? What are the various attributes that go into the source tag?
What is Art Direction problem? Learn about all this and much more for optimizing images on the web.

- - - Contents of the video - - - -

00:00 - Introduction & Recap
00:42 - Why do we need to use the picture element?
01:12 - What does the picture element do? | The Art Direction problem
02:03 - Syntax of picture element, source element, media & srcset attributes.
03:10 - How to display different cropped versions of an image on different devices?
06:45 - How to display completely different images on different devices?
06:59 - Use of picture element for including different image formats (.gif , .png , .jpg etc.)
07:19 - Using srcset attribute to list multiple images of varying sizes
08:04 - Advantages of using picture element, source element, media & srcset attributes
08:52 - Review

- - - Interesting Links - - - -

Recommended Resources:

1. Responsive Images (Part 1) Video:    • [HTML-Tutorial-14] srcset & sizes Att...  

2. MDN Web Docs - picture element: https://developer.mozilla.org/en-US/d...

3. Image Aspect Ratio Calculators:
https://eikhart.com/blog/aspect-ratio... , https://calculateaspectratio.com/

Code Links:

1. picture element (Web Page): https://juthikashetye.github.io/Code-...

2. picture element (Code): https://github.com/juthikashetye/Code...

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