tag img
# Tag img 'in HTML is used for displaying images on web pages. It is an "empty" (self-closing) tag, which means no separate closing tag is required. The < img > tag refers to the image file via the src attribute. There are also other attributes that can be used with the < img > tag, such as alt (for alternative text), width, and height.
< img > tag infrastructure:
Code
< img src = "URL _ of image" alt = "image description text" width = "width" height = "height" >
Example of use:
Code
< img src = "my _ image.jpg" alt = "flower image" width = "200" height = "150" >
Attribute description:
SRC:
Define the URL of the image to display.
ALT:
Define the text to display if the image cannot be displayed or to explain the meaning of the image.
WHITE:
Define the width of the image in pixels.
Heat:
Define the height of the image in pixels.
Importance of < img > tags:
Visualization:
The < img > tag is the main element to display images on web pages.
Access:
The alt attribute is important to the access of visually impaired users because screen readers will use alt text to describe images.
SEO:
The use of appropriate alt attributes also helps to improve the SEO (Search Engine Optimization) of the website.
หลายคนเริ่มทำเว็บแล้วติดคำถามคล้ายๆ กันเลย: 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 ไปในตัว
