picture

<picture> මඟින් විවිධ device හෝ screen-size සඳහා විවිධ පින්තූර පෙන්වීමට ඉඩ සලසයි.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <picture>
    <source media="(min-width: 650px)" srcset="youtube.png" >
    <source media="(min-width: 465px)" srcset="facebook.png"  >
    <img src="workplace.jpg" alt="logo" style="width:auto;">
  </picture>
  
</body>
</html>

<picture> tag eke image add karanne mehema

<source>	🎱image walata adala wisthara athulath karanne meka athule 🎱source ekata image format kihipayak ekathu karanna puluwan. 1 ta wada ekathu karama browser eka sadaha support karana palamu image format eka pamank penway.
<img>	🎱me tag eka nathuwa <picture> element eka weda karanne nehe 🎱source tag tikata passe me tag eka anthimata denna ona 🎱source tag eka support karanne nathi browser wala <img> tag ekata dila thiyena image eka pennnawa

<source> Tag Element

<source> Element

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <picture>
    <source media="(min-width: 650px)" srcset="youtube.png" >
    <source media="(min-width: 465px)" srcset="facebook.png"  >
    <img src="workplace.jpg" alt="logo" style="width:auto;">
  </picture>
  
</body>
</html>

<picture> tag eke thiyena <source> tag eka sadaha me tika yodagannawa

srcset	image eke url eka denne mekata
media	responsive ekata adalawa image wena wenama pennanna meka yodagannawa 🎱CSS wage ewata yodagannae meka (mekata wenama godak value thiyenawa ) click here W3school Link