วิธีระบุ URL ของภาพสำหรับสถานการณ์ต่างๆ ใน HTML

ใช้แอตทริบิวต์ srcset เพื่อระบุ URL ของภาพที่จะใช้ในสถานการณ์ต่างๆ ใน HTML

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อใช้งานแอตทริบิวต์ srcset ปรับขนาดเบราว์เซอร์เพื่อดูภาพที่โหลดต่างกัน:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <picture>
      <source media="(min-width: 550px)" srcset="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
      <source media="(min-width: 400px)" srcset="https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg">
      <img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt="Tutorials Library" style="width:auto;">
    </picture>
  </body>
</html>