ข้อมูลเบื้องต้นเกี่ยวกับรูปภาพบนเว็บไซต์
ก่อนที่จะเริ่มต้นเขียน Code คำสั่ง HTML ในการใส่รูปภาพในเว็บเพจ สิ่งแรกที่ต้องเรียนรู้ก่อนคือ การเกิดภาพบนคอมพิวเตอร์ ประเภทของไฟล์รูปภาพ รวมถึงการเลือกใช้รูปภาพบนเว็บไซต์เพื่อให้เว็บเพจโหลดได้รวดเร็ว และแสดงผลอย่างมีประสิทธิภาพสูงสุด
ภาพบนคอมพิวเตอร์เกิดได้อย่างไร
ภาพที่ปรากฏบนหน้าจอคอมพิวเตอร์ที่เราเห็นอยู่ทั่วไปนั้น เกิดจากจุดสี่เหลี่ยมเล็กๆ ของสี ที่เราเรียกว่า พิกเซล(Pixel) มาประกอบกันเป็นภาพขนาดต่างๆ นั่นเอง
พิกเซล (Pixel) มาจากคำว่า Picture และคำว่า Element แปลตรงตัวก็คือ องค์ประกอบที่รวมกันเกิดเป็นภาพ ซึ่งสรุปก็หมายถึงจุดสี่เหลี่ยมเล็กๆ ที่เป็นองค์ประกอบรวมกันเป็นภาพความละเอียดของภาพ เป็นจำนวนของพิกเซลที่อยู่ภายในภาพ โดยใช้หน่วยวัดเป็นพิกเซลต่อนิ้ว (ppi : Pixel per Inch) เช่น 300 ppi หรือ 600 ppi เป็นต้น ภาพที่มีความละเอียดมากก็จะมีความชัดกว่าภาพที่มีความละเอียดน้อย
ความละเอียดของจอภาพ เป็นหน่วยที่ใช้วัดจำนวนพิกเซลสูงสุดที่จอคอมพิวเตอร์สามารถผลิตออกมาได้ ซึ่งความละเอียดของจอภาพนั้น เกิดขึ้นโดยการ์ดจอหรือหน่วยแสดงผลภาพ และควบคุมการทำงานด้วยซอฟท์แวร์บน Windows ดังนั้นเราสามารถตั้งค่าการแสดงความละเอียดของจอภาพบน Windows ได้ เช่น ความละเอียด 1024×768 หมายถึง จำนวนพิกเซลในแนวนอน 1024 พิกเซลและจำนวนวีดีโอพิกเซลในแนวตั้ง 768 พิกเซล
ภาพที่เกิดบนจอภาพเกิดจากการทำงานของโหมดสี RGB ซึ่งประกอบด้วย สีแดง(Red) สีเขียว(Green) และสีน้ำเงิน(Blue) โดยใช้หลักการยิงประจุไฟฟ้าให้เกิดการเปล่งแสงของสีทั้ง 3 สีมาผสมกันทำให้เกิดเป็นจุดสีสี่เหลี่ยมเล็กๆ ที่เรียกว่า พิกเซล (Pixel) ซึ่งมาจากคำว่า Picture กับ Element โดยพิกเซลจะมีหลากหลายสี เมื่อนำมาวางต่อกันจะเกิดเป็นรูปภาพ ซึ่งภาพที่ใช้กับเครื่องคอมพิวเตอร์มี 2 ประเภท คือ แบบ Bitmap และแบบ Vector
ภาพบิตแมป (Bitmap) เป็นภาพแบบ Resolution Dependent ประกอบขึ้นด้วยจุดสีต่างๆ ที่มีจำนวนคงที่ตายตัวตามการสร้างภาพที่มี Resolution หรือความละเอียดของภาพต่างกันไป หากขยายภาพ Bitmap จะเห็นว่ามีลักษณะเป็นตารางเล็กๆ
ภาพแว็กเตอร์ (Vecter) เป็นภาพประเภท Resolution-Independent มีลักษณะของการสร้างให้แต่ละส่วนเป็นอิสระต่อกัน โดยแยกชิ้นส่วนของภาพทั้งหมดออกเป็นเส้นตรง รูปทรงหรือส่วนโค้ง โดยอ้างอิงตามความสัมพันธ์ทางคณิตศาสตร์หรือการคำนวณเป็นตัวสร้างภาพ เป็นการรวมเอา Object (เช่น วงกลม เส้นตรง ทรงกลม ลูกบาศก์และอื่นๆ เรียกว่ารูปทรงพื้นฐาน) ต่างชนิดมาผสมกัน มีทิศทางการลากเส้นไปในแนวต่างๆ เพื่อสร้างภาพที่แตกต่างกันโดยใช้คำสั่งง่ายๆ จึงเรียกภาพประเภทนี้ว่า Vector Graphic
ประเภทของไฟล์ภาพดิจิตอล
.JPG เป็นไฟล์ที่มีการบันทึกข้อมูลแบบสูญเสียข้อมูล ภาพที่ได้นำมาใช้งานทั่วๆ ไป ไฟล์ประเภทนี้จะตัดรายละเอียดของภาพบางส่วนออก ซึ่งเป็นรายละเอียดที่ไม่สามารถมองเห็นสีได้มากนัก เหมาะสำหรับเก็บไว้ดูหรือนำไปลงอินเทอร์เน็ต
.GIF เป็นไฟล์ที่มีการบีบอัดข้อมูลสูง แต่จะให้ความละเอียดของภาพมากกว่า ทำให้ไฟล์มีขนาดเล็กมาก มักนำมาใช้งานบนอินเทอร์เน็ตมากที่สุด เพราะไฟล์ที่มีขนาดเล็กทำให้ไม่เสียเวลาในการเปิดหน้าเว็บไซต์ที่มีรูปภาพประกอบได้ในเวลาอันรวดเร็ว
.TIF เป็นไฟล์ที่ใช้สำหรับงานสิ่งพิมพ์เป็นส่วนใหญ่ สามารถแสดงผลความละเอียดของภาพได้ทุกระดับตั้งแต่ภาพขาวดำไปจนถึงภาพสี ซึ่งจะนำไปใช้กับงานทางด้านการพิมพ์ สามารถใช้ได้กับทั้งเครื่อง MAC และ PC โปรแกรมที่ใช้ ตัวอย่างเช่น PageMaker
.PNG ย่อมาจาก Portable Network Graphics ซึ่งเป็นรูปแบบของไฟล์รูปภาพที่ถูกพัฒนามาเพื่อใช้สำหรับการแสดงผลบนเว็บไซต์โดยเฉพาะ และเพื่อใช้แทนรูปแบบของไฟล์ GIF เป็นไฟล์ที่มีความยืดหยุ่นสูง ใช้งานได้กับเครื่องที่มีการเปลี่ยนแพลตฟอร์มการทำงาน และสามารถทำงานอยู่บนคนละระบบปฏิบัติการ เช่น Linux และ Windows จะเห็นได้ว่าไฟล์แต่ละประเภทนั้นมีลักษณะการทำงานและการบีบอัดไฟล์ที่ต่างกันออกไป ขึ้นอยู่กับการนำมาใช้งานและความต้องการของผู้ใช้งานว่าต้องการไฟล์แบบใด
.PSD เป็นไฟล์ที่เกิดจากโปรแกรมตกแต่งรูปภาพคือ Photoshop ไฟล์ประเภทสามารถแก้ไขได้ง่าย เพราะมีการทำงานเป็นเลเยอร์ มีข้อจำกัดคือมีไฟล์ขนาดใหญ่ และสามารถเปิดได้กับโปรแกรม Photoshop อย่างเดียวเท่านั้น ไม่สามารถนำไปเปิดกับโปรแกรมจัดการรูปภาพอื่น ๆ ได้
การแทรกรูปภาพ (Image)
รูปแบบคำสั่ง HTML การใส่รูปภาพแบบปกติจะใช้ Tag <img> และเพิ่ม Attribute ที่ชื่อ src เพื่อระบุที่อยู่ของไฟล์รูปภาพ
รูปแบบ
<img src="ระบุที่อยู่ของรูปภาพ"/>เมื่อใส่รูปภาพและระบุที่อยู่ของรูปภาพเรียบร้อยแล้ว Tag <img> จะมี Attribute ที่ชื่อ alt (Alternative) เป็นชื่อหรือคำอธิบายรูปภาพว่าเป็นรูปภาพเกี่ยวกับอะไร ซึ่งอาจใช้เป็นข้อความสำรองในกรณีที่รูปภาพเกิดข้อผิดพลาดไม่สามารถแสดงผลบนหน้าเว็บเพจได้เช่นเดียวกัน
รูปแบบ
<img src="ระบุที่อยู่ของรูปภาพ" alt="ข้อความอธิบายภาพ"/>การระบุขนาดของความกว้างความสูงของรูปภาพ
รูปแบบ
<img src="ระบุที่อยู่ของรูปภาพ" alt="ข้อความอธิบายภาพ" width="กรอกตัวเลขความกว้างของรูปภาพ" height="กรอกตัวเลขความสูงของรูปภาพ"/>ตัวอย่าง
การจัดตำแหน่งของรูปภาพ (HTML position images)
การจัดแต่งตำแหน่งรูปภาพนั้น เราจะใช้ Attribute ที่ชื่อ align หรือ Alignment เข้าไปเพื่อกำหนดตำแหน่งของรูปภาพได้ ซึ่งจะเหมือนกับคำสั่งการจัดตำแหน่งข้อความโดยที่ “ตำแหน่ง” จะเป็นค่าในการกำหนดตำแหน่งของรูปภาพดังนี้
Left : จัดข้อความในย่อหน้าให้ชิดซ้าย ซึ่งเป็นค่าปกติ
Center : จัดข้อความในย่อหน้าให้อยู่กึ่งกลาง
Right : จัดข้อความในย่อหน้าให้ชิดขวา
รูปแบบ
<p align ="ตำแหน่ง">รูปภาพ</p>การใส่ภาพพื้นหลัง (HTML background images)
สามารถใส่ภาพพื้นหลังโดยใช้ Attribute ที่ชื่อ “style” แล้วกำหนด Path ของรูปภาพด้วย CSS ได้เลยตัวอย่างโค้ดด้านล่างดังนี้
รูปแบบ
<body style="background-image: url(‘https://kru-it.com/wp-content/uploads/2023/10/Logo-kru-it-2565-2.png ');">
</body>ตัวอย่าง
การสร้างลิงก์เชื่อมโยง (Hyperlinks)
การเชื่อมโยงเว็บเพจ หรือที่เรียกสั้นๆ ว่า “ลิงก์ (Link)” จะเป็นการกำหนดข้อความหรือรูปภาพโดยผ่านการคลิกเพื่อเชื่อมโยงไปยังเนื้อหาอื่นๆ ซึ่งเนื้อหานั้นอาจจะอยู่ในเว็บเพจเดียวกัน หรือคนละเว็บเพจ หรือคนละเว็บไซต์ก็ได้ การเชื่อมโยงนี้จะช่วยให้ผู้ใช้ติดตามดูข้อมูลในเว็บเพจของเราได้อย่างสะดวกและต่อเนื่อง
การเชื่อมโยงภายในเว็บไซต์เดียวกัน
เป็นการเชื่อมโยงไปยังหน้าเว็บเพจอื่นๆ ที่อยู่ในเว็บไซต์เดียวกัน ตัวอย่างเช่น เรามีหน้าเพจอยู่ 2 เพจคือ page1.html และ page2.html ต้องการเชื่อมโยงจาก page1.html ไปยังเพจ page2.html เป็นต้น
รูปแบบ
<a href="page1.html">ไปหน้าที่ 2</a>หรือหากต้องการกำหนดให้แสดงหน้าเว็บเพจในหน้าต่างใหม่ (New tab) ให้เพิ่ม Attribute ที่ชื่อ Target เข้าไปใน Tag ดังตัวอย่างด้านล่างนี้
รูปแบบ
<a href="page2.html" target="_blank">ไปหน้าที่ 2</a>หมายเหตุ
_blank = เปิดหน้าเอกสารในหน้าต่างใหม่หรือแท็บใหม่ (New tab)
_self = เปิดหน้าเอกสารในหน้าต่างเดิมหรือแท็ปเดิม ในพื้นที่เฟรมนั้นๆ (ค่าเริ่มต้น)
_parent = เปิดหน้าเอกสารในหน้าเดิมเต็มพื้นที่กรอบของเฟรมหลัก
_top = เปิดหน้าเอกสารในหน้าเดิมเต็มพื้นที่กรอบบราวเซอร์
การเชื่อมโยงไปยังเว็บไซต์อื่น
เป็นการเชื่อมโยงไปยังเว็บไซต์อื่นๆ บนอินเทอร์เน็ตที่ออนไลน์อยู่
รูปแบบ
<a href="URL">ข้อความลิงค์</a>ตัวอย่าง
<a href="https://www.kru-it.com/" target="_blank">ครูไอที</a> การเชื่อมโยงด้วยรูปภาพ
การเชื่อมโยงด้วยรูปภาพจะเหมือนกันกับการเชื่อมโยงด้วยข้อความคือ เปลี่ยนจากข้อความเป็นรูปภาพเท่านั้นเอง
รูปแบบ
<a href="URL หรือเพจที่ต้องการเชื่อมโยง"><img src="ระบุที่อยู่ของรูปภาพ"></a>ตัวอย่าง
<a href="https://kru-it.com"><img src="images/Logo-kru-it-2565-2.png" width="100"></a>
