HTML5 การใช้งาน img Tag

ใน HTML5 แท็ก <img> ใช้ในการแทรกรูปภาพลงในหน้าเว็บ โดยเป็นแท็กที่ไม่ต้องมีแท็กปิด (self-closing tag) และจะต้องมีแอตทริบิวต์ src เพื่อระบุที่อยู่ของรูปภาพ นอกจากนี้ยังมีแอตทริบิวต์ต่างๆ ที่สามารถใช้ในการปรับแต่งหรือปรับปรุงการแสดงผลของรูปภาพได้

รูปแบบการใช้งานแท็ก <img>

การใช้งานพื้นฐาน

การแทรกรูปภาพทั่วไปสามารถทำได้โดยการใช้แอตทริบิวต์ src และ alt

<img src="path/to/image.jpg" alt="Description of the image">

• src: ระบุที่อยู่ของรูปภาพ เช่น URL หรือไฟล์ในเครื่อง
• alt: ระบุข้อความที่จะใช้แทนรูปภาพในกรณีที่รูปภาพไม่สามารถแสดงได้ หรือใช้เพื่อปรับปรุง SEO และการเข้าถึง

การปรับขนาดของรูปภาพ

สามารถใช้แอตทริบิวต์ width และ height เพื่อกำหนดขนาดของรูปภาพ

<img src="path/to/image.jpg" alt="Description of the image" width="300" height="200">

การใช้งานรูปภาพแบบ Responsive

การใช้ srcset และ sizes เพื่อให้แสดงรูปภาพที่มีความละเอียดเหมาะสมกับหน้าจออุปกรณ์ที่ต่างกัน

<img src="small.jpg"
     srcset="medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="Responsive image">

• srcset: ระบุชุดของรูปภาพที่มีขนาดแตกต่างกัน พร้อมกับความกว้างสูงสุดที่ควรใช้งาน
• sizes: ระบุว่ารูปภาพควรใช้พื้นที่เท่าใดในหน้าจอเมื่อถึงความกว้างหน้าจอที่กำหนด

การแทรกรูปภาพผ่าน URL ภายนอก

สามารถแทรกรูปภาพจากเว็บไซต์อื่นได้โดยการระบุ URL ในแอตทริบิวต์ src

<img src="https://example.com/image.jpg" alt="External image">

การใช้รูปภาพเป็นลิงก์

สามารถใช้แท็ก <img> ร่วมกับแท็ก <a> เพื่อสร้างลิงก์จากรูปภาพ

<a href="https://example.com">
    <img src="path/to/image.jpg" alt="Clickable image">
</a>

การใช้ Lazy Loading เพื่อปรับปรุงประสิทธิภาพ

สามารถใช้แอตทริบิวต์ loading="lazy" เพื่อโหลดรูปภาพเมื่อผู้ใช้เลื่อนมาถึงตำแหน่งนั้น (Lazy Loading)

<img src="path/to/image.jpg" alt="Lazy loading image" loading="lazy">

การใช้รูปภาพเป็นพื้นหลัง (Fallback)

ในกรณีที่ใช้ <picture> เพื่อรองรับภาพหลายฟอร์แมต เราสามารถระบุ <img> เป็นรูปภาพสำรองได้

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="Fallback image">
</picture>

การใช้รูปภาพแบบเป็นวงกลม (ปรับด้วย CSS)

แม้แท็ก <img> ไม่ได้รองรับการทำเป็นวงกลมโดยตรง แต่สามารถใช้ CSS เพื่อจัดการได้ เช่น

<img src="path/to/image.jpg" alt="Circle image" style="border-radius: 50%;">

สรุป

แท็ก <img> เป็นเครื่องมือสำคัญในการแทรกรูปภาพลงในหน้าเว็บ และมีความยืดหยุ่นในการใช้งานหลายรูปแบบ ไม่ว่าจะเป็นการใช้ร่วมกับ responsive design, lazy loading, หรือการปรับแต่งการแสดงผลต่างๆ ผ่าน CSS และแอตทริบิวต์ที่หลากหลาย