tag img
#แท็ก <!nav>img` ใน HTML ใช้สำหรับแสดงรูปภาพบนหน้าเว็บเพจ. มันเป็นแท็กที่ "ว่างเปล่า" (self-closing) ซึ่งหมายความว่าไม่ต้องมีแท็กปิดแยกต่างหาก. แท็ก <img> จะอ้างอิงถึงไฟล์รูปภาพผ่านทางแอตทริบิวต์ src. นอกจากนี้ยังมีแอตทริบิวต์อื่นๆ ที่สามารถใช้กับแท็ก <img> ได้ เช่น alt (สำหรับข้อความทางเลือก), width, และ height.
โครงสร้างพื้นฐานของแท็ก <img>:
โค้ด
<img src="URL_ของรูปภาพ" alt="ข้อความอธิบายรูปภาพ" width="ความกว้าง" height="ความสูง">
ตัวอย่างการใช้งาน:
โค้ด
<img src="my_image.jpg" alt="ภาพดอกไม้" width="200" height="150">
คำอธิบายแอตทริบิวต์:
src:
กำหนด URL ของรูปภาพที่จะแสดง.
alt:
กำหนดข้อความที่จะแสดงหากรูปภาพไม่สามารถแสดงผลได้ หรือเพื่ออธิบายความหมายของรูปภาพ.
width:
กำหนดความกว้างของรูปภาพเป็นพิกเซล.
height:
กำหนดความสูงของรูปภาพเป็นพิกเซล.
ความสำคัญของแท็ก <img>:
การแสดงภาพ:
แท็ก <img> เป็นองค์ประกอบหลักในการแสดงรูปภาพบนหน้าเว็บ.
การเข้าถึง:
แอตทริบิวต์ alt มีความสำคัญต่อการเข้าถึงของผู้ใช้ที่มีความบกพร่องทางการมองเห็น เนื่องจา กโปรแกรมอ่านหน้าจอจะใช้ข้อความ alt เพื่ออธิบายรูปภาพ.
SEO:
การใช้แอตทริบิวต์ alt ที่เหมาะสมยังช่วยในการปรับปรุง SEO (Search Engine Optimization) ของเว็บไซต์
หลายคนเริ่มทำเว็บแล้วติดคำถามคล้ายๆ กันเลย: img คืออะไร แล้ว src คือ อะไรใน HTML? ตอนแรกเราก็งงเหมือนกัน เพราะแท็ก <img> ไม่ได้มีแท็กปิด และมีแอตทริบิวต์เต็มไปหมด สรุปแบบเข้าใจง่ายจากที่ลองใช้จริงคือ <img> เป็นแท็กสำหรับ “แสดงรูปภาพ” บนหน้าเว็บ โดยหัวใจสำคัญที่สุดคือ src (ที่อยู่ไฟล์รูป) 1) img คืออะไร <img> คือแท็ก HTML ที่ใช้ฝัง/แสดงรูปภาพในหน้าเว็บ เป็นแท็กแบบ self-closing คือเขียนแท็กเดียวจบ ไม่ต้องมี </img> 2) src คืออะไร (ใน <img>) src ย่อมาจาก source แปลว่า “แหล่งที่มา” ใช้ระบุพาธหรือ URL ของรูปที่จะนำมาแสดง เช่น <img src="my_image.jpg" alt="ภาพดอกไม้"> ถ้า src ผิด รูปจะไม่ขึ้น (มักเจอเป็นไอคอนรูปแตก) 3) imgsrc html ที่เขียนบ่อย (พาธแบบต่างๆ) - ไฟล์อยู่โฟลเดอร์เดียวกัน: src="my_image.jpg" - อยู่ในโฟลเดอร์ย่อย images: src="images/my_image.jpg" - ใช้ลิงก์เต็มจากเว็บอื่น: src="https://example.com/pic.jpg" ทิปที่เราใช้ประจำคือ ลองเปิดลิงก์ใน src บนเบราว์เซอร์ก่อน ถ้าเปิดแล้วเห็นรูป แปลว่า URL ใช้ได้ 4) ทำไม alt ถึงสำคัญ (ทั้งผู้ใช้และ SEO) alt คือข้อความอธิบายรูป กรณีรูปโหลดไม่ขึ้นก็ยังมีข้อความให้เข้าใจ และช่วยเรื่องการเข้าถึง (โปรแกรมอ่านหน้าจอ) รวมถึง SEO ด้วย ตัวอย่าง alt ที่ดี: alt="รองเท้าวิ่งสีขาว รุ่น X มุมด้านข้าง" หลีกเลี่ยง alt แบบยัดคำหรือกว้างเกินไป เช่น “รองเท้า รองเท้า ราคาถูก รองเท้า…” 5) width/height ควรใส่ไหม จากที่ทำเว็บเอง การใส่ width และ height ช่วยให้หน้าเว็บจัดเลย์เอาต์นิ่งขึ้น ลดอาการหน้ากระโดดตอนรูปโหลด (ดีต่อประสบการณ์ผู้ใช้) เช่น <img src="my_image.jpg" alt="ภาพดอกไม้" width="200" height="150"> แต่ถ้าอยากให้ยืดหยุ่นตามหน้าจอ มักไปคุมด้วย CSS มากกว่า เช่นกำหนดให้กว้าง 100% แล้วสูงอัตโนมัติ 6) เช็กลิสต์เวลา “รูปไม่ขึ้น” - พิมพ์ชื่อไฟล์/นามสกุลตรงไหม (ตัวเล็กตัวใหญ่บางระบบมีผล) - พาธถูกโฟลเดอร์ไหม (images/…) - ลิงก์ https ใช้ได้จริงไหม - มีการบล็อก hotlink หรือสิทธิ์ไฟล์บนเซิร์ฟเวอร์หรือเปล่า สรุปสั้นๆ: ถ้าจำได้แค่ 2 อย่าง ให้โฟกัสว่า img คือแท็กแสดงรูป และ src คือพิกัดรูป ส่วน alt คือสิ่งที่ควรใส่เสมอเพื่อให้เว็บเป็นมิตรกับผู้ใช้และช่วย SEO ไปในตัว
