ชนิดของรูปภาพ
การนำรูปภาพมาใส่ในเวบเพจเป็นส่วนหนึ่งที่สร้างความน่าสนใจให้กับเวบเพจเป็นอย่างมาก โดยเฉพาะการสร้างเวบเพจในปัจจุบันก้าวไปถึงขั้นมีการตอบโต้กับผู้ที่เข้าชมเวบเพจ หรือที่เรียกกว่า อินเตอร์แอ็คทีฟ (Interactive) การนำรูปภาพในใช่ในเวบเพจยงิ่ มีความจำเป็นมากยิ่งขึ้น
ในการแสดงผลในเวบเพจนั้น ภาพในแบบที่เหมาะสมคือภาพในแบบ GIF หรือ JPEG เนื่องจากภาพที่ได้จะมีขนาดเล็ก ทำให้แสดงผลได้อย่างรวดเร็ว
1. Graphics Interchange Format (GIF) เป็นภาพที่มีการบีบอัดข้อมูล ภาพจึงมีขนาดเล็ก แต่สีที่รูปภาพในแบบ GIF นั้นสามารถแสดงผลได้เพียง 256 สี จึงเหมาะกับภาพในลักษณะภาพวาด ไฟล์ภาพแบบ GIF มีอยู่ด้วยกัน 2 ชนิด คือ
– GIF87a เป็นไฟล์ GIF ทั่วไป
– GIF89a เป็นไฟล์ GIF ที่สามารถเคลื่อนไหวได้ หรือที่เรียกว่า GIF Animation ไฟล์ภาพแบบ GIF ทั้งสองชนิดสามารถปรับการแสดงผลได้ 3 แบบ ได้แก่
– แบบ Interlaced จะทำการแสดงภาพออกเป็นช่วง ๆ แทนที่จะแสดงไล่ลงมาจากบนลงล่าง
ตามปกติ
– แบบ Progressive จะทำการแสดงภาพแบบหยาบ ๆ ก่อน แล้วค่อย ๆ ชัดขึ้น
– แบบ Transparent Background จะแสดงภาพโดยไม่มีพื้นฉากหลัง
2. Joint Photographic Experts Group (JPEG หรือ JPG) เป็นรูปภาพที่ถูกบีบอัดข้อมูลไว้ โดยใช้เทคนิค Lossy ซึ่งคุณภาพของภาพที่ได้จะมีคุณภาพลดลงตามขนาดที่บีบอัดข้อมูล แต่ไม่จำกัดจำนวนสี ไฟล์ภาพแบบ JPEG เหมาะสำหรับภาพในลักษณะภาพถ่าย
คำสั่งในการใส่รูปภาพในเวบเพจ (Image)
เราจะใช้แท็ก <IMG> ในการนำภาพเข้ามาแสดงผลในเวบเพจ โดยมีรูปแบบดังนี้
<IMG SRC = “ไฟล์ภาพ”>
สำหรับ Attributes ที่ใช้ระบุตำแหน่งของรูปภาพคือ SRC หรือ Source เราสามารถที่จะชี้ตำแหน่งที่เก็บภาพได้ เช่น <IMG SRC=”http://www.north.rit.ac.th/image/logo.gif”> เป็นต้น
ตัวอย่าง image1.html
<HTML>
<HEAD><TITLE> Image </TITLE></HEAD>
<BODY>
<CENTER>
<IMG SRC=”mypic.jpg”>
</CENTER>
</BODY>
</HTML>
ถ้าเราต้องการใส่คำอธิบายภาพ ภาษา HTML มี Attributes ที่ช่วยทำในส่วนนี้ คือ ALT (Alternative Text) ประโยชน์สำหรับ Attributes นี้คือ เมื่อผู้ใช้เวบบราวเซอร์ที่ไม่รองรับการแสดงผลในแบบกราฟฟิค ในส่วนของภาพจะมีข้อความขึ้นมาอธิบายในส่วนนั้น โดยมีรูปแบบดังนี้
<IMG SRC = “ไฟล์ภาพ” ALT = “คำอธิบาย”>
ตัวอย่าง image2.html
<HTML>
<HEAD><TITLE> Image </TITLE></HEAD>
<BODY>
<CENTER>
<IMG SRC=” mypic.jpg” ALT=”รูปใครเอ่ย”>
</CENTER>
</BODY>
</HTML>
การนำรูปภาพทำเป็นพื้นหลัง
เราสามารถนำรูปภาพไปประกอบเป็นพื้นหลังหรือที่เรียกว่าวอลล์เปเปอร์ (Wall Paper) ของเวบเพจได้โดยกำหนดในส่วนของแท็ก Body ซึ่งใช้ Attributes Background โดยมีรูปแบบดังนี้
<BODY Background = “ไฟล์ภาพ”>
ตัวอย่าง image_background.html
<HTML>
<HEAD><TITLE> Wall Paper </TITLE></HEAD>
<BODY Background=”logo_bg.gif”>
<CENTER>
We are students
</CENTER>
</BODY>
</HTML>