รูปภาพอินไลน์คืออะไร?

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

Data URIs อนุญาตให้ทำการฝังข้อมูลขนาดเล็กที่เบราว์เซอร์สามารถเรียกใช้ได้ทันที เบราว์เซอร์แบบอินไลน์จะถูกดึงมาพร้อมกับ HTML และแสดงเป็นส่วนหนึ่งของเอกสารเว็บ เพื่อให้เบราว์เซอร์สามารถเรียกคืนและแสดงภาพได้โดยไม่ต้องใช้เวลาและปัญหามากเกินไปขอแนะนำให้ใช้ภาพอินไลน์ขนาดเล็ก

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

รูปภาพอินไลน์ HTML นั้นมาจากเซิร์ฟเวอร์ของเว็บไซต์ที่จะแสดงหรือรวมไว้จากเซิร์ฟเวอร์ภายนอกอื่น ๆ การใช้รูปภาพแบบอินไลน์จากแหล่งภายนอกเป็นเรื่องของความขัดแย้งเนื่องจากสามารถทำได้โดยไม่ได้รับอนุญาต แท็ก img ใช้เพื่อแทรกรูปภาพอินไลน์ลงในย่อหน้าและส่วนหัวในหน้าเว็บ แท็ก img ไม่สามารถใช้ในรูปแบบลอยตัวฟรี มันจะต้องมีการปิดล้อมภายในองค์ประกอบอื่น

คุณลักษณะที่จำเป็นของแท็ก img คือแอตทริบิวต์ src คุณลักษณะ src ระบุที่อยู่เว็บหรือ URL ที่เบราว์เซอร์สามารถดึงไฟล์ภาพได้ นอกเหนือจากคุณสมบัติ src รูปภาพแบบอินไลน์ HTML สามารถกำหนดได้ด้วยสามคุณลักษณะเพิ่มเติม เหล่านี้คือ alt จัดตำแหน่งและ ismap

แอตทริบิวต์ alt ให้ทางเลือกข้อความภาพแบบอินไลน์ ดังนั้นในกรณีที่เบราว์เซอร์ของผู้ดูไม่รองรับกราฟิกผู้ดูจะเห็นข้อความแทนที่รูปภาพ ขอแนะนำให้ใช้แอตทริบิวต์ alt

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

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

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

ซึ่งแตกต่างจากแอตทริบิวต์ alt และการจัดตำแหน่งแอตทริบิวต์ ismap ไม่ทำงานโดยรวมเพียงในแท็ก img มันต้องมีการกำหนดค่าบางอย่างบนเซิร์ฟเวอร์ อาจจำเป็นต้องมีความรู้เกี่ยวกับการเขียนโปรแกรมจำนวนหนึ่ง