HTML แบบฟอร์ม <img>

  • หน้าก่อนหน้า <iframe>
  • หน้าต่อไป <input>

คำนิยามและวิธีใช้

<img> แท็กใช้สำหรับที่จะใส่ภาพในหน้า HTML

ในทางเทคนิค จริงๆแล้วไม่ได้ใส่ภาพเข้าไปในหน้าเว็บ แต่ได้ใช้ภาพเป็นลิงก์ที่อื่นที่หน้าเว็บ<img> แท็กสร้างฝากแทนที่ใช้สำหรับอ้างอิงภาพ

<img> แท็กมีคุณสมบัติที่จำเป็นสองอย่าง:

  • src - กำหนดรายละเอียดทางรูปภาพ
  • alt - กำหนดข้อความแทนของภาพถ้าไม่สามารถแสดงภาพได้เนื่องจากสาเหตุบางอย่าง

แนะนำ:นอกจากนี้ ต้องกำหนดความกว้างและความสูงของภาพตลอดเวลา ถ้าไม่กำหนดความกว้างและความสูง หน้าเว็บอาจเลื่อนเร็วในขณะที่โหลดภาพ

คำแนะนำ:เพื่อใช้ภาพเป็นลิงก์ที่อื่น แค่ใส่ <img> แท็กที่วงล้อม <a> ภายในแท็ก (ดูตัวอย่างด้านล่าง)

ดูเพิ่มเติม:

ตูร์ HTML:HTML รูปภาพ

คู่มือ HTML DOM:Object Image

ตูร์ CSS:ตั้งรูปแบบภาพ

อ่านเพิ่มเติม:วิธีการใช้ภาพอย่างถูกต้อง

ตัวอย่าง

ตัวอย่าง 1

ในตัวอย่างด้านล่างนี้ เราทำการใส่ภาพที่ถ่ายโดยเจ้าหน้าที่ CodeW3C.com ที่ซานฟรานซิสโกซึ่งเป็นแก้ววาลนัสที่ทุ่งฝรั่งฝน

<img src="tulip.jpg" alt="ซานฟรานซิสโก - แก้ววาลนัส" />

ทดลองด้วยตัวเอง

ส่วนกึ่งดอกไม้ซานฮาง - ทายาทีร์

ตัวอย่าง 2

ตัวอย่างเพิ่มเติมที่วางเว็บไซต์เช่นนี้เพื่อใส่ภาพ:

<img src="dancer.png" alt="แนวราชการ" width="500" height="749">

ทดลองด้วยตัวเอง

คำแนะนำ:มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

คุณสมบัติ

คุณสมบัติ ค่า คำอธิบาย
alt ข้อความ กำหนดข้อความแทนของภาพ
crossorigin
  • anonymous
  • use-credentials
 อนุญาตให้ใช้ภาพจากเว็บไซต์ที่อนุญาตให้เข้าถึงข้ามโดเมนด้วยรูปภาพและแคนวาส
height พิกัดพิสัย กำหนดความสูงของภาพ
ismap ismap กำหนดภาพเป็นแผนที่ฝั่งบริการ
loading
  • eager
  • lazy
 กำหนดว่าโปรแกรมน่าจะโหลดภาพทันทีหรือลองโหลดภาพจนกระทั่งเกิดเงื่อนไขบางอย่าง
longdesc URL กำหนด URL ที่มีรายละเอียดเพิ่มเติมของภาพ
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 กำหนดข้อมูลอ้างอิงที่ต้องใช้เมื่อหาภาพ
sizes ขนาด กำหนดขนาดรูปภาพสำหรับแบบจัดการหน้าเว็บต่างๆ
src URL กำหนดรายละเอียดทางรูปภาพ。
srcset URL-list กำหนดรายชื่อไฟล์ภาพที่ใช้ในสถานการณ์ต่างๆ
usemap #mapname กำหนดภาพเป็นภาพมาตรฐานของเครื่องปฏิบัติการ
width พิกัดพิสัย กำหนดความกว้างของภาพ

คุณสมบัติทั่วไป

<img> ตามที่รู้กัน รายละเอียดของคุณสมบัติทั่วไปใน HTML。

คุณสมบัติเหตุการณ์

<img> ตามที่รู้กัน รายละเอียดของคุณสมบัติเหตุการณ์ใน HTML。

ตัวอย่างเพิ่มเติม

ตัวอย่าง 3

จัดลำดับภาพ (ใช้ CSS)

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

ทดลองด้วยตัวเอง

ตัวอย่าง 4

เพิ่มเส้นขอบภาพ (ใช้ CSS)

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

ทดลองด้วยตัวเอง

ตัวอย่าง 5

เพิ่มระยะทางด้านซ้ายด้านขวา ของภาพ (ใช้ CSS)

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

ทดลองด้วยตัวเอง

ตัวอย่าง 6

เพิ่มระยะทางด้านบนด้านล่างด้านนอก ของภาพ (ใช้ CSS)

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

ทดลองด้วยตัวเอง

ตัวอย่าง 7

ฝากภาพถ่ายจากโฟลเดอร์อื่น หรือเว็บไซต์อื่นๆ

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

ทดลองด้วยตัวเอง

ตัวอย่าง 8

วิธีการเพิ่มลิงก์ในรูปภาพ

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

ทดลองด้วยตัวเอง

ตัวอย่าง 9

วิธีการสร้างรูปภาพที่มีพื้นที่ที่สามารถกดได้

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

ทดลองด้วยตัวเอง

อ่านเพิ่มเติม - วิธีการใช้รูปภาพอย่างถูกต้อง

หนึ่งในคุณสมบัติที่น่าสนใจที่สุดของ HTML และ XHTML คือ สามารถใส่รูปภาพในข้อความของเอกสารได้ ไม่ว่าจะใช้รูปภาพเป็นส่วนที่รวมอยู่ด้วยตัวเอง (รูปภาพแนวตรง) หรือใช้เป็นเอกสารที่สามารถดาวน์โหลดได้ผ่านลิงก์ หรือใช้เป็นภาพพื้นหลังของเอกสาร

การเพิ่มรูปภาพอย่างเหมาะสมในเนื้อหาของเอกสาร (ไอคอนที่มีการเคลื่อนไหว รูปภาพ ชี้แจง ภาพวาด และอื่นๆ) ทำให้เอกสารมีความสดใสและน่าสนใจมากขึ้น และดูมากขึ้นด้วยความเป็นมืออาชีพ และมีข้อมูลมากขึ้นและง่ายต่อการอ่าน ยังสามารถทำให้รูปภาพเป็นทางแนวที่มีการกดเพื่อเป็นส่วนที่มีลิงก์ได้

อย่างไรก็ตาม ถ้าใช้รูปภาพเกินไป เอกสารจะกลายเป็นส่วนที่แตกแยก และสับสน และยากที่จะอ่าน และจะเพิ่มเวลาที่ผู้ใช้ต้องรอที่มากขึ้นเมื่อดาวน์โหลดและดูหน้าเว็บนี้

โปรดอ่านบทความด้านล่างนี้เพื่อเรียนรู้สอบความรู้เกี่ยวกับรูปภาพสองรูปแบบหลักบนเว็บ: GIF และ JPEG รวมทั้งวิธีการใช้รูปภาพอย่างถูกต้อง:

การตั้งค่า CSS โดยเริ่มต้น

ส่วนใหญ่ของเบราวเซอร์จะแสดงค่าเริ่มต้นดังนี้ <img> องค์ประกอบ：

img {
  display: inline-block;
}

ทดลองด้วยตัวเอง

การสนับสนุนโปรแกรมบราวเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <iframe>
  • หน้าต่อไป <input>