ใน HTML คุณสามารถแทรกรูปภาพเพื่อให้หน้าเว็บดูสวยงามและน่าสนใจยิ่งขึ้น
โดยใช้
<img> ซึ่งใช้สำหรับแสดงรูปภาพจากไฟล์ที่อยู่ภายในหรือภายนอกเว็บไซต์
HTML ยังสามารถปรับขนาด จัดตำแหน่ง และเพิ่มข้อความคำอธิบายให้กับรูปภาพได้อีกด้วย
ตัวอย่างการใส่ภาพ
<img src="images/pic_ocean.jpg" alt="Ocean">
<img src="images/pic_dessert.jpg" alt="waffle with fruits">
<img src="images/pic_building.jpg" alt="balcony hotel building">
โครงสร้าง <img>
<img> ใช้สำหรับแสดงรูปภาพบนเว็บไซต์
โดยรูปภาพจะไม่ถูกบันทึกลงในไฟล์ HTML โดยตรง แต่ <img> จะเป็นตัวเชื่อมโยงไปยังไฟล์ภาพแทน
<img> เป็น Empty Tag (ไม่มีแท็กปิด)
และใช้ Attributes เพื่อระบุข้อมูลของภาพ
Attributes ที่จำเป็น:
srcระบุที่อยู่ของรูปภาพaltข้อความแทนรูปภาพ (เมื่อโหลดไม่สำเร็จ)
<img src="url" alt="alternatetext">
แอตทริบิวต์ src
Attribute src ใช้เพื่อระบุ เส้นทางที่อยู่ (URL) ของรูปภาพที่ต้องการให้แสดงบนหน้าเว็บ
<img src="images/pic_building.jpg" alt="balcony hotel building" width="322" height="215">
ตรวจสอบให้แน่ใจว่าไฟล์รูปภาพอยู่ในตำแหน่งที่ถูกต้อง และ URL ที่ระบุใน src สามารถใช้งานได้จริง
แอตทริบิวต์ alt
alt คือข้อความที่แสดงแทนรูปภาพในกรณีที่รูปภาพไม่สามารถโหลดได้
ตัวอย่าง กรณีรูปภาพสามารถโหลดได้
<img src="images/pic_building.jpg" alt="balcony hotel building" width="322" height="215">
ตัวอย่าง กรณีรูปภาพไม่สามารถโหลดได้
<img src="images/pic_building.gif" alt="balcony hotel building">
📝 เคล็ดลับ
โปรแกรม Screen Reader จะอ่านข้อความใน alt เพื่อช่วยให้ผู้ที่มีปัญหาทางสายตาเข้าใจเนื้อหาของภาพ
ขนาดรูปภาพ
สามารถกำหนด ความกว้างและความสูง ของรูปภาพได้หลายวิธี
ตัวอย่างการใช้ style:
<img src="images/pic_dessert.jpg" alt="waffle with fruits" style="width:322px;height:215px;">
หรือใช้ Attributes
width และ height
<img src="images/pic_dessert.jpg" alt="waffle with fruits" width="322" height="215">
📝 Note
ควรกำหนดขนาดของรูปภาพเสมอ เพื่อป้องกันไม่ให้หน้าเว็บกระตุกระหว่างโหลด
ควรใช้ width / height หรือ style ดี?
ทั้งหมดสามารถใช้ได้ แต่แนะนำให้ใช้ style (CSS)
เพราะควบคุมได้ยืดหยุ่นกว่า และไม่ทำให้โครงสร้างเว็บเพี้ยนเมื่อปรับขนาดภาพ
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="images/html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
รูปภาพในโฟลเดอร์ย่อย
หากรูปภาพอยู่ใน Sub-folder (โฟลเดอร์ย่อย)
ต้องระบุชื่อโฟลเดอร์ใน src ด้วย เช่น
<img src="images/html5.gif" alt="HTML5 Icon">
รูปภาพจากเว็บไซต์ภายนอก
หากรูปภาพอยู่บนเว็บไซต์อื่น ให้ระบุ URL แบบเต็ม ใน src
<img src="https://www.hostatom.com/wp-content/uploads/2024/03/hostatom-w-logo.png" alt="hostatom.com" style="width:104px;height:104px;">
📝 หมายเหตุ
ภาพจากลิงก์ภายนอกอาจมีลิขสิทธิ์
หากภาพถูกเปลี่ยนหรือลบ จะไม่สามารถแสดงผลได้
ภาพเคลื่อนไหว
HTML รองรับภาพเคลื่อนไหวประเภท GIF (.gif)
<img src="images/cat-dance.gif" alt="Cat Dance" style="width:90px;height:90px;">
ใช้รูปภาพเป็นลิงก์
สามารถใช้รูปภาพแทนข้อความลิงก์ได้
โดยใส่ <img> ภายใน <a>
<a href="https://www.hostatom.com/">
<img src="https://www.hostatom.com/wp-content/uploads/2024/03/hostatom-w-logo.png" alt="hostatom" style="width:204px;height:46px;">
</a>
การจัดวางรูปภาพ
ใช้ CSS
float เพื่อจัดวางรูปภาพให้ชิดซ้ายหรือขวา
<p><img src="images/smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
ข้อความกับการจัดวางตำแหน่งของภาพ
</p>
<p><img src="images/smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
ข้อความกับการจัดวางตำแหน่งของภาพ
</p>
ประเภทไฟล์รูปภาพที่รองรับ
นามสกุลไฟล์รูปภาพที่นิยมใช้และรองรับบนเบราว์เซอร์หลัก เช่น Chrome, Edge, Firefox, Safari และ Opera
| ไฟล์ | รูปแบบของไฟล์ | นามสกุลไฟล์ |
|---|---|---|
| APNG | ภาพเคลื่อนไหว สีมากกว่า GIF | .apng |
| GIF | ภาพเคลื่อนไหว ความละเอียดไม่สูง ใช้สีได้ 256 สี | .gif |
| ICO | ไอคอนของ Microsoft | .ico, .cur |
| JPEG | ภาพละเอียดสูง ขนาดไฟล์ไม่ใหญ่ | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | รองรับพื้นหลังโปร่งใส เหมาะกับโลโก้ | .png |
| SVG | กราฟิกแบบเวกเตอร์ 2 มิติ | .svg |
สรุป
- ใช้
<img>เพื่อใส่รูปภาพ - ใช้
srcระบุที่อยู่ของรูปภาพ - ใช้
altแสดงข้อความแทนรูป - ใช้
width,heightหรือstyleกำหนดขนาดรูปภาพ - ใช้
floatจัดตำแหน่งซ้าย/ขวา