แท็ก HTML <img> เพิ่มรูปภาพลงในหน้าเว็บ ใช้ attribute src ระบุตำแหน่งของรูปภาพที่คุณต้องการฝัง Attribute alt มักใช้แสดงข้อความแทนรูปภาพหากโหลดไม่ได้
เมื่อเว็บเพิ่งถูกสร้างขึ้น หน้าเว็บแสดงได้แค่ข้อความ อย่างไรก็ตาม ความสามารถในการเพิ่มรูปภาพลงในหน้าเว็บถูกเพิ่มเข้ามาเร็วๆ นี้ ตั้งแต่นั้นมา รูปภาพกลายเป็นส่วนสำคัญของหน้าเว็บส่วนใหญ่ จากโลโก้ถึงภาพถ่าย รูปภาพอยู่ทุกที่บนอินเทอร์เน็ต
บทช่วยสอนนี้จะอภิปรายวิธีใช้แท็ก <img> ทำงานกับ HTML Images ในฐานะนักพัฒนาเว็บ เราจะพูดถึง attributes หลักบางอย่างที่คุณสามารถใช้กับแท็ก <img> ได้
HTML Image Tag
แท็ก HTML <img> เพิ่มรูปภาพลงในเอกสารเว็บ ใช้ attribute src ระบุตำแหน่งของรูปภาพที่คุณต้องการฝัง สามารถเป็นไฟล์บนคอมพิวเตอร์ของคุณหรือ URL ไปยังไฟล์อื่น Attribute alt ให้คุณระบุ alternative text ที่ปรากฏหากรูปภาพโหลดไม่ได้
นี่คือ syntax สำหรับแท็ก HTML <img>:
<img src="house.png">
แท็ก <img> ไม่มีแท็กปิด แท็กจะจบด้วย ">/>" นี้แสดงว่าแท็ก <img> ไม่ต้องการแท็กปิดแยกต่างหาก แท็ก <img> ได้รับการรองรับในทุกเบราว์เซอร์
HTML สมมติว่าโฟลเดอร์ที่จัดเก็บไฟล์ HTML ของคุณคือโฟลเดอร์เดียวกันที่จัดเก็บรูปภาพที่คุณอ้างอิง พฤติกรรมนี้สามารถข้ามได้โดยระบุ file path หรือ URL ที่แน่นอนที่รูปภาพอยู่
ใน syntax ข้างต้น <img> ของเราจะอ้างอิงไฟล์ house.png ไฟล์นี้อยู่ในโฟลเดอร์เดียวกับไฟล์ HTML ที่เรากำลังทำงาน
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
อย่างไรก็ตาม หากเราจัดเก็บไฟล์รูปภาพในโฟลเดอร์อื่น — เรียกว่า pictures ตัวอย่างเช่น — เราจะใช้โค้ดนี้:
<img src="pictures/house.png">
หากเราต้องการฝังรูปภาพจากแหล่งภายนอก เราสามารถใช้ absolute URL นี่คือตัวอย่างแท็ก <img> อ้างอิงรูปภาพภายนอก:
<img src="https://www.example.org/pictures/house.png">
มีการพูดว่า ปกติแล้วควรอ้างอิงรูปภาพจากไฟล์ท้องถิ่นเมื่อเป็นไปได้ เนื่องจากอ้างอิงรูปภาพภายนอกทำให้เบราว์เซอร์ทำงานมากกว่าเมื่อดึงรูปภาพจากไฟล์ท้องถิ่น
HTML Image Example
มาสำรวจตัวอย่างแท็ก HTML <img> ในการทำงาน สมมติเรากำลังสร้างเว็บไซต์สำหรับร้านกาแฟท้องถิ่น The Golden Roast The Golden Roast ต้องการรูปถ้วยกาแฟปรากฏบนหน้าแรก
ไฟล์ที่พวกเขาให้เราเพิ่มในหน้าเว็บชื่อ coffee.png โฟลเดอร์ที่จัดเก็บหน้า HTML ของเราก็จัดเก็บรูปภาพนี้เช่นกัน เพื่อเพิ่มรูปภาพนี้ในเว็บไซต์ของเรา เราสามารถใช้โค้ดต่อไปนี้:
<body> <h1>The Golden Roast</h1> <img src="coffee.png"> </body>
โค้ดของเราคืนค่า:
มาวิเคราะห์โค้ดของเรา ก่อนอื่น เราใช้แท็ก <body> ซึ่งจัดเก็บ elements หลักของหน้าเว็บของเรา จากนั้น เราใช้แท็ก <h1> กำหนด heading บนหน้าของเรา ข้อความของ heading นี้คือ: The Golden Roast
บรรทัดถัดไป เราใช้ element img เพิ่มรูปภาพ — ชื่อ coffee.png — ลงในโค้ดของเรา รูปภาพนี้อยู่ในโฟลเดอร์เดียวกับไฟล์ HTML ของเรา ดังนั้น เราไม่ต้องชี้ไปที่โฟลเดอร์โดยใช้ attribute src เราแค่ระบุชื่อไฟล์
Image HTML: Alternative Text
การเพิ่ม alternative text เป็นส่วนสำคัญของการทำงานกับรูปภาพใน HTML Alternative text แทนด้วย attribute alt คือคำอธิบายข้อความของรูปภาพ
มีเหตุผลหลายอย่างที่คุณควรระบุ attribute alt เมื่อทำงานกับรูปภาพ Alt text:
- อธิบายรูปภาพที่ตั้งใจแต่ไม่มีอยู่ Alt text มีประโยชน์หากไม่พบรูปภาพ — ตัวอย่างเช่น เนื่องจากไฟล์ไม่มีอยู่ในโฟลเดอร์ที่คุณระบุ
- อธิบายรูปภาพที่ตั้งใจแต่โหลดช้า หากผู้เยี่ยมชมหน้าเว็บมีการเชื่อมต่อช้า อาจมีการล่าช้าในการโหลดรูปภาพ
- ปรับปรุงการเข้าถึง (accessibility) หากผู้เยี่ยมชมใช้ screen reader การมี alt text จะช่วยให้พวกเขาได้ยินคำอธิบายรูปภาพ
Alt text รับรองว่าหากรูปภาพไม่สามารถเรนเดอร์ได้ด้วยเหตุผลใดเหตุผลหนึ่ง หน้าเว็บจะยังคงนำเสนอข้อความบางอย่างให้ผู้ใช้ หากคุณไม่ระบุ alt text และรูปภาพพัง ไอคอนรูปภาพพังจะปรากฏ
HTML Alternative Text Example
สมมติเราต้องการเพิ่ม attribute alt ให้รูปภาพในตัวอย่างร้านกาแฟข้างต้น alt text ที่เราต้องการระบุคือ Roasting coffee, surrounded by coffee beans on a light brown wooden table. เราสามารถเพิ่ม alt text นี้ได้ด้วยโค้ดต่อไปนี้:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table."> </body>
ตอนนี้ สมมติใครย้ายไฟล์ coffee.png ไปโฟลเดอร์อื่น ผลคือหน้าเว็บของเราไม่สามารถหาไฟล์ได้อีกต่อไป นี่จะทำให้ alt text ของเราปรากฏบนหน้าเว็บเพราะรูปภาพไม่พบ นี่คือตัวอย่างสิ่งที่ผู้เยี่ยมชมจะเห็นบนหน้าเว็บของเราในกรณีนี้:
เมื่อคุณเพิ่ม attribute alt พยายามให้สั้น และใช้เพื่ออธิบายรูปภาพเอง ในตัวอย่างกาแฟของเรา เราอธิบายว่ารูปภาพของกาแฟมีอะไร เราไม่ควรซ้ำข้อความที่มีอยู่บนหน้าแล้ว เพราะจะทำให้ผู้ใช้สับสน
HTML Image: Title
คุณสามารถใช้ attribute title เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับรูปภาพ เมื่อใช้ attribute title จะให้ tooltip ปรากฏเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ
Attribute title มีประโยชน์หากคุณต้องการเพิ่ม tooltip ให้รูปภาพ อย่างไรก็ตาม attribute title ไม่มีการรองรับ screen reader และไม่มองเห็นบนอุปกรณ์มือถือ (ซึ่งไม่มีเมาส์)
สมมติเราต้องการเพิ่ม attribute title ค่า A cup of coffee on a table ให้รูปภาพจากก่อนหน้า เราสามารถใช้โค้ดต่อไปนี้:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" alt="Roasting coffee, surrounded by coffee beans on a light brown wooden table." title="A cup of coffee on a table"> </body>
เมื่อเราวางเมาส์เหนือรูปภาพด้วยเคอร์เซอร์ เนื้อหาของ title tag จะปรากฏ
HTML Image Size: Width and Height
คุณสามารถใช้ attribute width และ height ของรูปภาพ เพื่อระบุความกว้างและความสูงของรูปภาพ ตามลำดับ
กลับไปที่ตัวอย่างร้านกาแฟ สมมติเราต้องการรูปภาพกาแฟกว้าง 400 พิกเซล ยาว 400 พิกเซล เราไม่ต้องการรูปภาพนี้ใช้พื้นที่มากเกินไปบนหน้าเว็บ เราสามารถใช้โค้ดต่อไปนี้ระบุพารามิเตอร์เหล่านี้:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400"> </body>
โค้ดของเราคืนค่า:
ตามที่เห็น รูปภาพในตัวอย่างนี้เล็กลงจากตัวอย่างก่อนหน้า ในตัวอย่างแรก รูปภาพของเรา 500x500 ตอนนี้ รูปภาพของเรา 400x400 เพราะเราระบุทั้ง height และ width attribute และตั้งค่าแต่ละอย่างเป็น 400
HTML Image: Positioning the Image
เมื่อคุณทำงานกับรูปภาพ คุณอาจตัดสินใจว่าต้องการให้มันลอยไปทางซ้ายหรือขวาของหน้า Float หมายถึงการจัดตำแนวนอน — ซ้ายหรือขวา — ของรูปภาพบนหน้า นั่นคือที่มาของ CSS float attribute
สมมติเราต้องการรูปภาพกาแฟจากก่อนหน้าปรากฏทางขวาของหน้า เราสามารถทำได้ด้วยโค้ดต่อไปนี้:
<body> <h1>The Golden Roast</h1> <img src="coffee.png" width="400" height="400" style="float:right;"> </body>
โค้ดของเราคืนค่า:
เราใช้ attribute float:right; ภายใน attribute style นี่ช่วยให้เราระบุได้ว่ารูปภาพของเราควรลอยไปทางขวาของหน้าของเรา
สรุป
คุณสามารถใช้แท็ก <img> HTML วางรูปภาพบนหน้าเว็บ รูปภาพสามารถเรนเดอร์จากไฟล์ท้องถิ่น โฟลเดอร์ หรือจากแหล่งภายนอก
บทช่วยสอนนี้อภิปรายวิธีทำงานกับแท็ก <img> ใน HTML เรายังพูดถึงวิธีใช้บาง attributes ที่เสนอโดยแท็ก HTML <img> ตอนนี้คุณมีความรู้ที่ต้องการเริ่มใช้รูปภาพใน HTML อย่างมืออาชีพแล้ว!
ต้องการเรียนรู้ HTML เพิ่ม? ดูคู่มือ How to Learn HTML ของเราสำหรับเคล็ดลับจากผู้เชี่ยวชาญและรายการคอร์สออนไลน์และทรัพยากรการเรียนรู้
