Skip to main content

กราฟิก HTML คืออะไร?

ในภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML) มีหลายวิธีในการแสดงและสร้างกราฟิกในเอกสาร HTMLกราฟิก HTML ที่ใช้กันอย่างแพร่หลายมากที่สุดคือรูปภาพที่วางอยู่ในหน้า HTML โดยตรงเรียกว่าภาพอินไลน์แม้ว่าจะมีวิธีอื่น mdash;เช่นการใช้ภาษาสคริปต์หรือเว็บแอปพลิเคชันที่รวบรวม mdash;ที่สามารถใช้เพื่อให้ได้ผลลัพธ์เดียวกันสำหรับกราฟิกที่สร้างขึ้นแบบไดนามิกสำหรับแผนภูมิหรือกราฟสามารถใช้กราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG)นอกจากนี้ยังมีกราฟิก HTML พื้นฐานบางอย่างที่รองรับโดยข้อกำหนดภาษาและไม่ต้องการไฟล์ภายนอกเช่นเส้นแนวนอนและกระสุนในรายการกราฟิก HTML ที่ซับซ้อนมากขึ้นสามารถทำได้ผ่านการใช้ภาษาสคริปต์แผ่นสไตล์การเรียงซ้อน (CSS) และองค์ประกอบ HTML Canvas ซึ่งเป็นตัวเลือกดั้งเดิมสำหรับเอฟเฟกต์บางอย่างที่เคยเป็นไปได้ผ่านวัตถุภายนอกและปลั๊กอินกราฟิก HTML แบบอินไลน์เป็นวิธีที่ใช้มากที่สุดและเป็นวิธีที่ง่ายที่สุดในการวางภาพในเอกสาร HTMLสิ่งนี้เกี่ยวข้องกับการสร้างภาพในตัวแก้ไขรูปภาพบันทึกเป็นรูปแบบไฟล์ที่ใช้กันทั่วไปจากนั้นระบุชื่อและตำแหน่งของไฟล์รูปภาพในเอกสาร HTML ด้วยแท็ก IMGนอกเหนือจากความเรียบง่ายของการรวมกราฟิกแบบอินไลน์ในเอกสารแล้วเอ็นจิ้นการแสดงผลในเว็บเบราว์เซอร์ส่วนใหญ่สามารถวางกราฟิกลงในเค้าโครงหน้าเว็บที่ซับซ้อนมากขึ้นได้อย่างง่ายดายภาวะแทรกซ้อนหนึ่งที่สามารถเกิดขึ้นได้กับภาพอินไลน์คือขนาดภาพอาจต้องปรับขนาดให้พอดีกับจอแสดงผลขนาดใหญ่หรือขนาดเล็กเป็นพิเศษเมื่อดูซึ่งอาจลดคุณภาพของภาพ

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

ด้วยการพัฒนามาตรฐาน HTML เวอร์ชัน 5 มาตรฐานภาษา (HTML5) กราฟิก HTML แบบไดนามิกสามารถสร้างได้ภายในภาษา HTML พื้นฐานสิ่งนี้ทำได้โดยการวาดโดยตรงไปยังพื้นผิวพิเศษที่รู้จักกันในชื่อผืนผ้าใบในเอกสาร HTMLโดยใช้ JavaScript reg;และ CSS วิธีนี้สามารถสร้างภาพเคลื่อนไหวหรือเกมที่สามารถตอบสนองต่อการป้อนข้อมูลของผู้ใช้หรือปรับกราฟิกขึ้นอยู่กับการตั้งค่าของเว็บเบราว์เซอร์หรือข้อมูลอื่น ๆอย่างไรก็ตามการสร้างกราฟิก HTML5 อาจเป็นขั้นตอนที่ซับซ้อนซึ่งอาจส่งผลให้บล็อกสคริปต์ยาวซึ่งอาจทำงานช้ามากในคอมพิวเตอร์หรืออุปกรณ์บางเครื่อง