การจัดการรูปภาพ

การจัดการรูปภาพ

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

การใส่รูปภาพ (IMAGES)

การใส่ภาพภายในเว็บเพจเป็นส่วนดึงดูดของเว็บให้ดูดีมีสาระมากขึ้น เพิ่มความสวยงาม  ดึงดูดความสนใจให้กับผู้ที่ผ่านที่เข้าชม เข้าศึกษา นอกจากจะช่วยให้ผู้ชมได้เห็นภาพจริงไม่ต้องจินตนาการแล้ว ยังมีส่วนช่วยให้เกิดความตื่นตาตื่นใจได้มากกว่าหน้าเว็บเพจที่มีแต่ข้อความล้วน ๆ ภาพที่ดีเพียงหนึ่งภาพสามารถแทนคำพูดได้มากกว่าพันคำภาพที่นำมาใช้ในการนำเสนอผ่านเครือข่ายอินเทอร์เน็ต   ด้วยเอกสาร HTML นั้นจะต้องเป็นภาพที่มีขนาดเล็กเพื่อให้สามารถแสดงผลได้เร็ว ที่นิยมใช้อยู่ 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 และยังสามารถทำภาพโปร่งใสได้

จากข้อมูลเบื้องต้นเกี่ยวกับรูปภาพที่จะใส่ในเอกสาร HTML ในขั้นตอนต่อไป จะนำรูปภาพมาใส่ในเอกสาร โดยจะใช้คำสั่งในการใส่รูปภาพ คือ

<img src="ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์" หรือ "image URL">

รูปแบบคำสั่ง HTML ที่ใช้ในการใส่ข้อความกำกับรูปภาพ

<IMG SRC= “ชื่อไฟล์รูปภาพ.นามสกุล” ALT= “ข้อความกำกับภาพ”>

การปรับขนาดของรูปภาพ รูปแบบคำสั่ง HTML ที่ใช้ในการปรับขนาดของรูปภาพ

<IMG SRC= “ชื่อไฟล์รูปภาพ.นามสกุล” WIDTH= ความกว้างของภาพ HIGHT=ความสูงของภาพ>

การใส่กรอบให้รูปภาพรูปแบบคำสั่ง HTML ที่ใช้ในการใส่กรอบให้รูปภาพ

<IMG SRC= “ชื่อไฟล์รูปภาพ.นามสกุล” BORDER=ขนาดของกรอบ>