การนำรูปภาพมาใส่ในเว็บเพจ

การใส่รูปภาพลงในเว็บเพจ เป็นอีกวิธีหนึ่งที่จะทำให้เว็บเพจมีความสวยงามขึ้น โดยเราสามารถนำรูปภาพที่สร้างขึ้นด้วยโปรแกรมกราฟิกต่าง ๆ เช่น Photoshop หรือภาพถ่าย ภาพอื่น ๆ ที่มีชนิดไฟล์ภาพเป็น .jpg .png หรือ .gif มาใส่ลงลงในเว็บเพจร่วมกับข้อความได้ และเรายังสามารถนำภาพมาใช้ทำเป็นพื้นหลังของเว็บเพจได้ เพื่อเพิ่มความสวยงามมากยิ่งขึ้น การใช้ภาพและสีพื้นต่าง ๆ ที่ประกอบกันอย่างลงตัว ทำให้หน้าเว็บมีความสวยงาม ดึงดูดความสนใจ และใช้สื่อความหมายต่าง ๆ แทนการบรรรยายได้เป็นอย่างดี ภาพที่ใช้จะถูกจัดวางไว้ในตำแหน่งต่าง ๆ ในหน้าเว็บเพจ โดยวางด้วยโค้ดภาษา HTML หรือ วางด้วย CSS ซึ่งการใช้ CSS เข้ามาช่วยจะทำให้สามารถจัดวางภาพได้แบบซับซ้อนมากยิ่งขึ้น

image web
การใส่ภาพตกแต่งเว็บไซต์เพิ่มความสวยงามและการสื่อความหมาย

คุณสมบัติของไฟล์รูปภาพ

การนำรูปภาพมาใส่ลงในหน้าเว็บเพจของเราควรจะต้องมีการพิจารณาคุณสมบัติของไฟล์ภาพนั้น ๆ อันได้แก่
  • ความละเอียดของภาพ (Resolution) และความลึกของสี (Color Depth) ภาพควรมีความละเอียดขนาด 72 DPI หรือ 96 DPI (Dots per inch) ซึ่งเป็นขนาดที่มีความเหมาะสมในการแสดงผลบนสื่อ Screen ทั่ว ๆ ไป ส่วนความลึกของสีก็ควรอยู่ที่ 8 Bit  หากภาพมีความละเอียดมากกว่านี้จะส่งผลต่อขนาดของไฟล์ภาพ เพราะเมื่อไฟล์ภาพมีขนาดใหญ่ การโหลดหน้าเว็บที่มีภาพย่อมต้องใช้เวลามากขึ้น
  • การแสดงภาพเคลื่อนไหว (Animation) รูปภาพบางชนิดจะองรับการแสดงภาพเคลื่อนไหวอย่างง่าย ๆ ได้โดยการเก็บภาพหลายภาพที่เกี่ยวเนื่องกันไว้ในไฟล์เดียวกัน และหน้าเว็บเพจก็จะแสดงภาพเหล่านั้นต่อเนื่องกันและวนรอบไปเรื่อย ๆ ซึ่งมักนิยมใช้บนหน้าเว็บเพจมากกว่าการใช้คลิปวิดีโอ
  • ลักษณะโปร่งใส (Transparency) รูปภาพบางชนิดสามารถทำให้พื้นหลังของรูปภาพโปร่งแสงได้ ทำให้เมื่อวางรูปภาพนั้นลงในเอกสารเว็บเพจจะมองเห็นส่วนของเอกสารที่ถูกทับอยู่ได้

animate 01
ตัวอย่างการนำภาพเคลื่อนไหว้ (Animation) มาใช้งานบนเว็บเพจ 

ชนิดของไฟล์รูปภาพ (Image Filetype)

ไฟล์รูปภาพมีอยู่หลากหลายชนิด แต่ที่สามารถนำมาใส่ลงในเว็บเพจได้มีอยู่ 3 ชนิดด้วยกัน คือ
  1. รูปภาพชนิด GIF (Graphics Interchange Format) เป็นไฟล์รูปภาพที่มีการบีบขนาดของข้อมูลให้เล็กลง โดยคุณภาพของรูปภาพไม่ลดลง ทำพื้นหลังแบบโปร่งแสงได้ แต่สามารถแสดงสีได้เพียง 256 สีเท่านั้น
  2.  รูปภาพชนิด JPEG หรือ JPG (Joint Photographic Experts Group) เป็นไฟล์รูปภาพที่ถูกบีบขนาดไว้เช่นกัน โดยใช้เทคนิค lossy ซึ่งคุณภาพของรูปภาพจะด้อยลงตามขนาดที่บีบอัด แต่สามารถแสดงสีได้ประมาณ 16 ล้านสี (True Color) เหมาะกับภาพถ่ายหรือภาพที่ต้องการความละเอียด ชัดเจน สวยงามเมื่อแสดงผลทางจอภาพ
  3. รูปภาพชนิด PNG (Portable Network Graphics) เป็นไฟล์รูปภาพที่นำคุณสมบัติเด่นของ JPG และ GIF มารวมเข้าไว้ด้วยกัน คือแสดงสีได้ประมาณ 16 ล้านสี เหมือน JPG และกำหนดพื้นหลังเป็นแบบโปร่งแสงได้เหมือนกับ GIF

GIF File  JPEG File  PNG File 
file gif file jpg file png
- แสดงสีได้ 256 สี
-เหมาะสำหรับทำภาพการ์ตูน หรือภาพเคลื่อนไหว
-ทำภาพโปร่งแสงได้
-ขนาดไฟล์ไม่ใหญ่มาก
- แสดงสีได้ประมาณ 16 ล้านสี
-เหมาะสำหรับใช้กับภาพถ่ายหรือภาพที่เน้นความละเอียดสวยงาม
-ขนาดไฟล์สามารถใช้โปรแกรมช่วยบีบอัดได้
- แสดงสีได้ประมาณ 16 ล้านสี
- เหมาะกับทุกรูปแบบภาพ
- ขนาดไฟล์มีความเหมาะสมไม่ใหญ่มาก
- ทำภาพโปร่งแสงได้