ทำความเข้าใจ HTML Image Tags

ภาพเป็นองค์ประกอบสำคัญในเว็บไซต์ และ HTML มีแท็กที่ช่วยให้ Dev สามารถใช้งานและจัดการภาพได้อย่างมีประสิทธิภาพ ตั้งแต่ <img> ที่ทุกคนคุ้นเคย ไปจนถึง <picture> ที่ช่วยตอบโจทย์ Responsive Design

HTML Image Tags และการใช้งาน

<img>: แท็กพื้นฐานสำหรับการแสดงภาพ ใช้เพื่อแสดงรูปภาพในเว็บไซต์ พร้อมรองรับคุณสมบัติเช่น alt สำหรับ Text Alternative

<img src="example.jpg" alt="Example Image" width="500" height="300">

src: ระบุที่อยู่ของไฟล์ภาพ
alt: ข้อความแทนภาพสำหรับผู้ใช้ที่ไม่สามารถดูภาพได้
width / height: กำหนดขนาดของภาพ

<map> และ <area>: เพิ่มพื้นที่คลิกในภาพ ใช้สร้าง Image Map เพื่อกำหนดพื้นที่คลิกภายในภาพ

    <img src="map.jpg" usemap="#image-map" alt="Image Map Example">
    <map name="image-map">
        <area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Example Link">
        <area shape="circle" coords="337,300,44" href="https://another.com" alt="Another Link">
    </map>

<map>: กำหนดชุดของพื้นที่ที่สามารถคลิกได้
<area>: ระบุพื้นที่คลิก เช่น รูปทรงสี่เหลี่ยม วงกลม

<picture>: ตอบโจทย์ Responsive Design ใช้เพื่อแสดงภาพที่เหมาะสมกับอุปกรณ์หรือหน้าจอที่แตกต่างกัน

    <picture>
        <source srcset="example-large.jpg" media="(min-width: 800px)">
        <source srcset="example-small.jpg" media="(max-width: 799px)">
        <img src="example-default.jpg" alt="Responsive Image Example">
    </picture>

<source>: ระบุแหล่งภาพที่เหมาะสมกับ Media Query
<img>: ระบุภาพเริ่มต้นในกรณีที่ <source> ใช้ไม่ได้

การเลือกใช้ HTML Image Tags ให้เหมาะสม

Tag	จุดเด่น	กรณีใช้งาน
`<img>`	ใช้งานง่าย เหมาะกับการแสดงภาพทั่วไป	แสดงภาพในทุกกรณีทั่วไป
`<map>`	เพิ่มการโต้ตอบในภาพ	สร้างพื้นที่คลิกภายในภาพ
`<area>`	กำหนดจุดคลิกที่เฉพาะเจาะจงใน Image Map	กำหนดพื้นที่คลิกเฉพาะบนภาพ
`<picture>`	รองรับ Responsive Design	แสดงภาพตามอุปกรณ์หรือขนาดหน้าจอ

ตัวอย่างการนำไปใช้

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Image Tags Example</title>
</head>
<body>
    <h1>HTML Image Tags</h1>
    
    <h2>Basic Image</h2>
    <img src="example.jpg" alt="Basic Image" width="600">
    
    <h2>Image Map</h2>
    <img src="map.jpg" usemap="#map-example" alt="Image Map">
    <map name="map-example">
        <area shape="rect" coords="50,50,200,200" href="https://example.com" alt="Click Area">
    </map>
    
    <h2>Responsive Picture</h2>
    <picture>
        <source srcset="large.jpg" media="(min-width: 800px)">
        <source srcset="small.jpg" media="(max-width: 799px)">
        <img src="default.jpg" alt="Responsive Image">
    </picture>
</body>
</html>

สรุป

HTML Image Tags ช่วยให้การแสดงผลภาพบนเว็บไซต์มีประสิทธิภาพมากขึ้น

<img>: ใช้สำหรับแสดงภาพพื้นฐาน
<map> และ <area>: เพิ่มจุดโต้ตอบในภาพ
<picture>: รองรับ Responsive Design เลือกใช้แท็กให้เหมาะสมกับความต้องการและโครงสร้างเว็บไซต์ของคุณ เพื่อยกระดับ UX และเพิ่มประสิทธิภาพของเว็บ!