แต่งสวยด้วยรูปภาพ Images

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

• ไฟล์ GIF (CompuServe Graphics Interchange Format) มีนามสกุล .gif เป็นไฟล์ชนิด บิตแมบ 8 บิตสี เก็บค่าสีสูงสุดได้ 256 สี เป็นไฟล์แบบบีบย่อขนาด ใช้แสดงผลพวกภาพ การ์ตูน หรือกราฟิกที่มีสีสันไม่มาก และภาพชนิดเคลื่อนไหวที่มีความละเอียดไม่มากนัก
• ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group) มีนามสกุล .jpg เป็นไฟล์ที่ พัฒนาเพื่อใช้งานกับภาพที่มีสีสันสดใสและความละเอียดสูงมาก สามารถเก็บภาพได้ 24 บิตสี แสดงสีได้ถึง 16.7 ล้านสี เป็นไฟล์ที่ผ่านกระบวนการบีบอัดข้อมูลในอัตรา 10:1 ใน การแสดงผลในเว็บเพจ ไฟล์ *.jpg จะแสดงผลช้ากว่าไฟล์ *.gif ในขนาดไฟล์ที่เท่ากัน ดังนั้นจึงนิยมใช้ไฟล์ *.jpg ในภาพขนาดใหญ่ ถ้าเป็นภาพขนาดเล็กจะใช้ไฟล์ชนิด *.gif มากกว่า
• ไฟล์ PNG (Portable Network Graphic) เป็นไฟล์ที่พัฒนาขึ้นมาโดยนำเอาคุณสมบัติที่ดีเด่นของไฟล์ GIF และ JPG มารวมกัน กล่าวคือสนับสนุนจำนวนบิตสีได้ถึง 24 บิต เหมือนกับภาพแบบ JPG ในขณะที่การบีบอัดไฟล์ใช้การทำงานแบบ GIF การแสดงผลในแบบ Interlace และยังสามารถทำภาพโปร่งใสได้อีกด้วย เยี่ยมจริงๆ
• คำสั่งในการใส่รูปภาพในเว็บเพจคือ
            <IMG SRC="ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path/ชื่อไฟล์" หรือ "image URL">
  การระบุตำแหน่งที่เก็บรูปภาพนี้สำคัญมาก ถ้าบอก path หรือเส้นทางผิด เว็บบราวเซอร์จะ แสดงผลเป็นกรอบรูปภาพเล็ก ๆ แล้วมีเครื่องหมายกากบาท (x)หรือ ? กำกับ สังเกตที่ path จะใช้เครื่องหมาย สแลช (/) ต่างจากในวินโดว์ที่ใช้แบคสแลช (\) ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง ดังตัวอย่าง
  

  <IMG SRC="glow_button.gif"> อ้าง path ผิด

  <IMG SRC="images/glow_button.gif "> อ้าง path ถูกต้อง

• ถ้าเป็นรูปภาพที่มีขนาดใหญ่ การแสดงผลอาจทำได้ช้า ซึ่งผู้ชมบางคนอาจจะไม่รอดูภาพนี้ ดังนั้นควรใส่คำอธิบายภาพไว้ด้วย โดยการเติมคำ ALT="ชื่อภาพ" ไว้ต่อจากชื่อภาพใน Tag IMG ซึ่งเว็บบราวเซอร์จะแสดงชื่อนี้ก่อนที่จะโหลดภาพจริงเสร็จสิ้น หรือผู้ที่ใช้บราวเซอร์แบบ Textจะได้เดาได้ว่าภาพประกอบนี้คืออะไร
• ถ้าเป็นไปได้ควรกำหนดขนาดของภาพที่ต้องการให้แสดงผลด้วยตัวเลขบอกความกว้าง x ยาวในหน่วย pixels เช่น <IMG SRC="images/glow_button.gif " ALT="blink button" WIDTH="50" HEIGHT="50">
• เราสามารถกำหนดระยะห่างระหว่างภาพกับตัวอักษรได้ด้วยคำสั่ง
  1. VSPACE="x" สำหรับกำหนดระยะห่างระหว่างบนและล่างของรูปภาพ "x" ตัวเลข หน่วยเป็นพิกเซล
  2. HSPACE="x" สำหรับกำหนดระยะห่างระหว่างซ้ายและขวาของรูปภาพ "x" ตัวเลข หน่วยเป็นพิกเซล
• กรณีที่เราใช้รูปภาพทำ Image Map เช่น ใช้แผนที่ซึ่งการแสดงผลมักจะช้ามาก เราอาจใช้ คำสั่งแสดงภาพให้ซ้อนกันได้ โดยครั้งแรกใช้ภาพที่มีความละเอียดน้อย ๆ (ขาวดำ) แล้วจึง ค่อยแสดงภาพนั้นเป็นภาพสีที่ชัดเจนได้ (ภาพทั้งสองต้องมีขนาดเท่ากันด้วย) โดยใช้คำสั่ง LOWSRC ดังนี้
            <IMG SRC="example_html.jpg" LOWSRC="example_html2.jpg">
  
  
              การแสดงผลในคำสั่งนี้จะเริ่มจากภาพ example_html2.jpg ก่อน เมื่อภาพ example_html.jpg โหลดมาจน เสร็จก็จะแสดงแทนที่ในตำแหน่งเดิม