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

ใน HyperText Markup Language (HTML) มีหลายวิธีในการแสดงและสร้างกราฟิกในเอกสาร HTML กราฟิก HTML ชนิดที่ใช้กันอย่างแพร่หลายที่สุดคือรูปภาพที่วางโดยตรงในหน้า HTML เรียกว่ารูปภาพแบบอินไลน์แม้ว่าจะมีวิธีอื่น ๆ เช่นการใช้ภาษาสคริปต์หรือเว็บแอปพลิเคชันที่คอมไพล์ซึ่งสามารถใช้เพื่อให้ได้ผลลัพธ์เดียวกัน สำหรับกราฟิกที่สร้างขึ้นแบบไดนามิกสำหรับแผนภูมิหรือกราฟสามารถใช้กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) นอกจากนี้ยังมีกราฟิก HTML พื้นฐานบางอย่างที่สนับสนุนโดยข้อกำหนดภาษาและไม่จำเป็นต้องใช้ไฟล์ภายนอกเช่นเส้นแนวนอนและกระสุนในรายการ กราฟิก HTML ที่ซับซ้อนมากขึ้นสามารถทำได้ผ่านการใช้ภาษาสคริปต์ cascading style sheets (CSS) และองค์ประกอบ HTML canvas ให้ตัวเลือกเนทีฟสำหรับเอฟเฟกต์บางอย่างที่ก่อนหน้านี้เป็นไปได้เฉพาะผ่านวัตถุภายนอกและปลั๊กอิน

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

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

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