บทที่ 6 การนำเสนอรูปภาพ

ชนิดของแฟ้มข้อมูลรูปภาพ

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

ชนิดของแฟ้มข้อมูลรูปภาพ
รูปภาพที่ใช้ประกอบในเนื้อหาของเว็บเพจนั้น ถือว่าเป็นส่วนประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ เพราะจะทำให้ เว็บเพจนั้นมีความน่าสนใจยิ่งขึ้น โดยทั่วไปแล้วแฟ้มข้อมูลรูปภาพที่นิยมนำมาใช้ประกอบในการสร้างเว็บเพจนั้น มีอยู่ 2 ประเภทคือ ไฟล์เจพีจี ไฟล์จีไอเอฟ
ไฟล์เจพีจี ( Joint Photographic Experts Group JPEG)
แฟ้มข้อมูลรูปภาพชนิดเจพีจีเป็นแฟ้มข้อมูลที่ผ่านกระบวนการบีบอัดข้อมูล โดยนำเอา ข้อมูลส่วนที่ไม่สำคัญออกไป และทำการบีบอัดข้อมูลในอัตราส่วน 10:1 โดยขนาดของแฟ้มข้อมูลที่นำมาใช้นั้นอาจมีขนาดลดลงเหลือเพียง 10-30% ของขนาดแฟ้มข้อมูลที่จะทำการบีบอัดข้อมูล โดยระดับของการบีบอัดนั้นจะมี 3 ระดับคือ High, Middle, Low compressionโดยแฟ้มข้อมูลที่มีการบีบอัดข้อมูลมากจะทำให้แฟ้มข้อมูลมีขนาดเล็กลงมาก แต่คุณภาพของรูปภาพนั้นก็จะลดลงตามไป ด้วยหากต้องการคงคุณภาพของรูปภาพที่ทำการบีบอัดแล้วมีคุณภาพดีขนาดของแฟ้มข้อมูลก็จะมีขนาดใหญ่ตามไปด้วย มักนิยมใช้กับรูปภาพที่เป็นลักษณะของภาพถ่าย
ไฟล์จีไอเอฟ (Graphics Interchange Format, GIF)
แฟ้มข้อมูลรูปภาพชนิดจีไอเอฟเป็นแฟ้มข้อมูลชนิดบิตแมป ที่ใช้เทคนิคการบีบอัดภาพ การเก็บภาพนั้นจะเก็บค่าของ จุดสี ที่เรียงต่อกันจนเกิดเป็นรูปภาพ แฟ้มข้อมูลชนิดนี้ ส่วนใหญ่นิยมใช้กับภาพถ่ายและภาพการ์ตูน นอกจากนั้นสามารถ ทำการรวมเอาภาพชนิดจีไอเอฟนี้หลายภาพมาทำการรวมเป็นแฟ้มข้อมูลเดียวกัน ซึ่งจะทำให้สามารถแสดงผลเป็นภาพ เคลื่อนไหวได้ ชนิดของแฟ้มข้อมูลรูปภาพจีไอเอฟ มีอยู่ 2 ชนิดคือ
1.GIF87a เป็นแฟ้มข้อมูลที่ใช้งานทั่วไป
2. GIF89a เป็นแฟ้มข้อมูลชนิดที่สนับสนุนการทำภาพเคลื่อนไหว (Animation GIF)
นอกจากนี้แฟ้มข้อมูลรูปภาพแบบจีไอเอฟ ยังสามารถปรับการแสดงผลได้อีก 3 แบบ
1.Transparent Background เป็นการแสดงรูปภาพโดยไม่ต้องแสดงสีพื้นหลัง
2. Progressive เป็นการแสดงภาพอย่างหยาบก่อน แล้วจึงแสดงภาพอย่างละเอียด
3.Interlaced เป็นการแบ่งการแสดงผลรูปภาพออกเป็นช่วง ๆ เพื่อที่จะรวมเป็นการแสดงภาพทั้งหมด

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

รูป แสดงการใช้งานคำสั่ง IMG


การกำหนดลักษณะเพิ่มเติม (Attribute) ของการนำเสนอรูปภาพ Alt
เป็นการกำหนดอธิบายรูป โดยข้อความนั้นจะปรากฎเมื่อนำเมาส์มาวางยังตำแหน่งของรูปภาพ ซึ่งจะเป็นวิธี ช่วยให้ผู้ที่เข้ามาอ่านเอกสารเว็บไม่รู้สึกเบื่อกับการรอคอยกับการดึงข้อมูลรูปภาพ โดยปกติแล้วข้อมุลที่เป็นข้อความ หรือตัวอัษรนั้นจะสามารถทำการดึงข้อมูลได้เร็วกว่าข้อมูลที่เป็นรูปภาพ ดังนั้นหากมีการแทรกภาพในเอกสารเว็บ ควรมีการกำหนดค่า ALT กำกับภาพทุกภาพด้วย

รูปแสดงการใช้คำสั่ง IMG โดยการใช้ร่วมกับการกำหนดคุณลักษณะเพิ่มเติม Alt

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

Align เป็นการกำหนดตำแหน่งของข้อความกับการแสดงผลของรูปภาพ
- Top เป็นการกำหนดข้อความให้อยู่ด้านบนของรูปภาพ
- Middle เป็นการกำหนดข้อความให้อยู่กึ่งกลางของรูปภาพ
- Bottoom เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ
- Left เป็นการกำหนดให้รูปภาพอยู่ด้านขวาของหน้าจอ
- Right เป็นการกำหนดให้รูปภาพอยู่ด้านขวาของหน้าจอ

รูปแสดงการใช้คำสั่ง IMG โดยใช้ร่วมกับ Align = Top

รูปแสดงการใช้คำสั่ง IMG โดยใช้ร่วมกับ Align = middle

คำสั่งสำหรับกำหนดพื้นหลังของเอกสารให้เป็นรูปภาพ

การกำหนดรูปสำหรับใช้เป็นภาพพื้นหลัง (Background) ของเอกสารนั้นสามารถทำได้โดยการกำหนดเพิ่มเติม ในส่วนของการกำหนดลักษณะพิเศษของคำสั่ง BODY ที่ใช้สำหรับบอกจุดเริ่มต้นส่วนเนื้อหาของเอกสารเว็บ คำสั่งที่ ใช้กำหนดพื้นหลังคือ Background โดยรูปแบบการใช้งานคำสั่งดังนี้

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

รูป ภาพที่ต้องการจะนำมาแสดงใช้เป็นพื้นหลัง

รูป แสดงการใช้คำสั่งสำหรับกำหนดพื้นหลังของเอกสารให้เป็นรูปภาพ

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