การนำรูปภาพมาใส่ในเว็บเพจ
การใส่รูปภาพลงในเว็บเพจ เป็นอีกวิธีหนึ่งที่จะทำให้เว็บเพจมีความสวยงามขึ้น โดยเราสามารถนำรูปภาพที่สร้างขึ้นด้วยโปรแกรมกราฟิกต่าง ๆ เช่น Photoshop หรือภาพถ่าย ภาพอื่น ๆ ที่มีชนิดไฟล์ภาพเป็น .jpg .png หรือ .gif มาใส่ลงลงในเว็บเพจร่วมกับข้อความได้ และเรายังสามารถนำภาพมาใช้ทำเป็นพื้นหลังของเว็บเพจได้ เพื่อเพิ่มความสวยงามมากยิ่งขึ้น การใช้ภาพและสีพื้นต่าง ๆ ที่ประกอบกันอย่างลงตัว ทำให้หน้าเว็บมีความสวยงาม ดึงดูดความสนใจ และใช้สื่อความหมายต่าง ๆ แทนการบรรรยายได้เป็นอย่างดี ภาพที่ใช้จะถูกจัดวางไว้ในตำแหน่งต่าง ๆ ในหน้าเว็บเพจ โดยวางด้วยโค้ดภาษา HTML หรือ วางด้วย CSS ซึ่งการใช้ CSS เข้ามาช่วยจะทำให้สามารถจัดวางภาพได้แบบซับซ้อนมากยิ่งขึ้น
การใส่ภาพตกแต่งเว็บไซต์เพิ่มความสวยงามและการสื่อความหมาย
คุณสมบัติของไฟล์รูปภาพ
การนำรูปภาพมาใส่ลงในหน้าเว็บเพจของเราควรจะต้องมีการพิจารณาคุณสมบัติของไฟล์ภาพนั้น ๆ อันได้แก่
- ความละเอียดของภาพ (Resolution) และความลึกของสี (Color Depth) ภาพควรมีความละเอียดขนาด 72 DPI หรือ 96 DPI (Dots per inch) ซึ่งเป็นขนาดที่มีความเหมาะสมในการแสดงผลบนสื่อ Screen ทั่ว ๆ ไป ส่วนความลึกของสีก็ควรอยู่ที่ 8 Bit หากภาพมีความละเอียดมากกว่านี้จะส่งผลต่อขนาดของไฟล์ภาพ เพราะเมื่อไฟล์ภาพมีขนาดใหญ่ การโหลดหน้าเว็บที่มีภาพย่อมต้องใช้เวลามากขึ้น
- การแสดงภาพเคลื่อนไหว (Animation) รูปภาพบางชนิดจะองรับการแสดงภาพเคลื่อนไหวอย่างง่าย ๆ ได้โดยการเก็บภาพหลายภาพที่เกี่ยวเนื่องกันไว้ในไฟล์เดียวกัน และหน้าเว็บเพจก็จะแสดงภาพเหล่านั้นต่อเนื่องกันและวนรอบไปเรื่อย ๆ ซึ่งมักนิยมใช้บนหน้าเว็บเพจมากกว่าการใช้คลิปวิดีโอ
- ลักษณะโปร่งใส (Transparency) รูปภาพบางชนิดสามารถทำให้พื้นหลังของรูปภาพโปร่งแสงได้ ทำให้เมื่อวางรูปภาพนั้นลงในเอกสารเว็บเพจจะมองเห็นส่วนของเอกสารที่ถูกทับอยู่ได้
ตัวอย่างการนำภาพเคลื่อนไหว้ (Animation) มาใช้งานบนเว็บเพจ
ชนิดของไฟล์รูปภาพ (Image Filetype)
ไฟล์รูปภาพมีอยู่หลากหลายชนิด แต่ที่สามารถนำมาใส่ลงในเว็บเพจได้มีอยู่ 3 ชนิดด้วยกัน คือ
- รูปภาพชนิด GIF (Graphics Interchange Format) เป็นไฟล์รูปภาพที่มีการบีบขนาดของข้อมูลให้เล็กลง โดยคุณภาพของรูปภาพไม่ลดลง ทำพื้นหลังแบบโปร่งแสงได้ แต่สามารถแสดงสีได้เพียง 256 สีเท่านั้น
- รูปภาพชนิด JPEG หรือ JPG (Joint Photographic Experts Group) เป็นไฟล์รูปภาพที่ถูกบีบขนาดไว้เช่นกัน โดยใช้เทคนิค lossy ซึ่งคุณภาพของรูปภาพจะด้อยลงตามขนาดที่บีบอัด แต่สามารถแสดงสีได้ประมาณ 16 ล้านสี (True Color) เหมาะกับภาพถ่ายหรือภาพที่ต้องการความละเอียด ชัดเจน สวยงามเมื่อแสดงผลทางจอภาพ
- รูปภาพชนิด PNG (Portable Network Graphics) เป็นไฟล์รูปภาพที่นำคุณสมบัติเด่นของ JPG และ GIF มารวมเข้าไว้ด้วยกัน คือแสดงสีได้ประมาณ 16 ล้านสี เหมือน JPG และกำหนดพื้นหลังเป็นแบบโปร่งแสงได้เหมือนกับ GIF
GIF File | JPEG File | PNG File |
- แสดงสีได้ 256 สี -เหมาะสำหรับทำภาพการ์ตูน หรือภาพเคลื่อนไหว -ทำภาพโปร่งแสงได้ -ขนาดไฟล์ไม่ใหญ่มาก |
- แสดงสีได้ประมาณ 16 ล้านสี -เหมาะสำหรับใช้กับภาพถ่ายหรือภาพที่เน้นความละเอียดสวยงาม -ขนาดไฟล์สามารถใช้โปรแกรมช่วยบีบอัดได้ |
- แสดงสีได้ประมาณ 16 ล้านสี - เหมาะกับทุกรูปแบบภาพ - ขนาดไฟล์มีความเหมาะสมไม่ใหญ่มาก - ทำภาพโปร่งแสงได้ |