ประเภทของไฟล์รูปภาพ |
การแทรกรูปภาพ |
การจัดวางตำแหน่งของรูปภาพ |
การกำหนดเส้นขอบรูปภาพ |
คำอธิบายรูปภาพ
การเขียนเว็บเพจในช่วงแรกๆ จะใช้ตัวอักษรและข้อความเป็นหลักในการนำเสนอ แต่ในระยะหลัง ได้มีการพัฒนาเทคโนโลยีมัลติมีเดียเข้าไปใส่ในเว็บเพจ ทำให้เว็บเพจดูน่าสนใจและน่าชมมากยิ่งขั้น
 ประเภทของไฟล์รูปภาพ
|
เราสามารถนำรูปภาพมาประกอบบนหน้าเว็บเพจได้ เช่น แทรกภาพในเว็บเพจ ใส่เส้นกรอบเป็นรูปภาพ และการแสดงภาพให้เป็นพื้นหลังของเว็บเพจ ชนิดของภาพที่จะนำมาประกอบบนเว็บเพจ ควรจะต้องมีขนาดเล็ก เพื่อนำไปเรียกใช้บนเว็บเพจได้อย่างรวดเร็ว เช่น GIF, JPEG และ PNG ซึ่งในการเลือกใช้ฟอร์แมตภาพได้ย่างเหมาะสมเราควรต้องทำความเข้าใจลักษณะการบีบอัดข้อมูลของแต่ละฟอร์แมต เพราะแต่ละแบบจะบีบอัดข้อมูลได้อย่างมีประสิทธิภาพสูงสุดเมื่อนำมาใช้กับภาพที่เหมาะสม
|
รู้จักกับชนิดของภาพกราฟิกบนเว็บ
|
ตัวอย่างภาพ
|
ไฟล์สกุล JPG (Joint Photographers Experts Group)
 เป็นไฟล์หนึ่งที่นิยมใช้บน Internet มีความละเอียดสูง และใช้สีจำนวนมาก (สนับสนุนถึง 24 bit color) ไฟล์ชนิดนี้มักจะใช้กับภาพถ่ายที่นำมาสแกน และต้องการนำไปใช้บนอินเทอร์เน็ต เพราะให้ความคมชัดและความละเอียดของภาพสูง
- จุดเด่น
สนับสนุนสีได้ถึง 24 bit
สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive
มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
เรียกดูได้กับ Graphics Browser ทุกตัว
ตั้งค่าการบีบไฟล์ได้ (compress files)
- จุดด้อย
ทำให้พื้นของรูปโปร่งใสไม่ได้
|
|
ไฟล์สกุล GIF (Graphics Interlace File)
พัฒนาโดยบริษัท CompuServe จัดเป็นไฟล์ภาพสำหรับการเผยแพร่ผ่านอินเทอร์เน็ตตั้งแต่ยุคแรก
- จุดเด่น สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
- มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำให้สามารถส่งไฟล์ภาพได้รวดเร็ว
- สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent)
- มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace
- มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
- เรียกดูได้กับ Graphics Browser ทุกตัว
- ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation)
- จุดด้อย ไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้ การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น
|
|
ไฟล์สกุล PNG (Portable Network Graphics)
ไฟล์สกุลล่าสุดที่นำจุดเด่นของไฟล์ GIF และ JPEG มาพัฒนาร่วมกัน ทำให้ภาพในสกุลนี้แสดงผลสีได้มากกว่า 256 สี และยังสามารถทำพื้นภาพให้โปร่งใสได้ จึงเป็นไฟล์ภาพที่ได้รับความนิยมมากในปัจจุบันด้วยอีกสกุลหนึ่ง คุณสมบัติของภาพคือ
- สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า ระบบคอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
- ขนาดไฟล์เล็ก ด้วยเทคนิคการบีบอัดคงสัญญาณ LZW
- สามารถทำภาพโปร่งใสจากสีพื้น 256 ระดับ
- แสดงภาพแบบสอดประสานเช่นเดียวกับ GIF โดยมีความคมชัดที่ดีกว่า
- มีคุณสมบัติ Gamma ทำให้ภาพสามารถปรับตัวเองได้ตามจอภาพ และปรับระดับความสว่างที่แท้จริงตามที่ควรจะเป็น
- จุดเด่น
สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ 64 bit)
สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace)
สามารถทำพื้นโปร่งใสได้
- จุดด้อย
หากกำหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ขนาดของไฟล์จะมีขนาดต่ำ
ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4
ความละเอียดของภาพและจำนวนสีขึ้นอยู่กับ Video Card
โปรแกรมสนับสนุนในการสร้างมีน้อย
|
|
|
การแทรกรูปภาพในเว็บเพจ
|
คำสั่ง <IMG SRC="ชื่อรูปภาพ"> คือ คำสั่งในการแทรกรูปภาพในหน้าเว็บเพจ
<html>
<head>
<title>
Insert Images : การแทรกภาพ
</title>
</head>
<body background="images\bgimage.gif">
ข้อความที่แสดงในส่วนเนื้อหา<br>
<img src="images/chicklittle.gif">
</body>
</html> |
|
จะสังเกตได้ว่าคำสั่ง IMG นี้เป็นคำสั่งเดี่ยวไม่ต้องมีคำสั่งปิด เมื่อมีการเก็บรูปภาพไว้ในโฟลเดอร์ใดเป็นการเฉพาะ จะต้องกำหนดเส้นทางชี้ไปยังรูปภาพให้ถูกต้องด้วย เช่น เมื่อเก็บรูปภาพไว้ในโฟลเดอร์ชื่อ images เราจะต้องอ้างในคำสั่งเป็น <IMG SRC="images/name.gif"> หากอ้างผิดไฟล์ภาพนั้นก็จะไม่แสดงดังตัวอย่างภาพนี้ 
เพราะไม่มีรูปนี้อยู่จริง
หากเราต้องการแสดงรูปให้มีขนาดต่างจากขนาดจริงของภาพ ก็สามารถทำได้ด้วยการกำหนดเพิ่มในส่วนของความกว้าง ความยาวของรูปภาพ ดังตัวอย่าง ภาพแรกคือภาพขนาดจริง ภาพที่สองเป็นการลดขนาดลง และภาพที่สามเป็นการเพิ่มขนาดขึ้น
| END : สรุปคำสั่งที่ใช้ในบทนี้ |
| TAGS |
รายละเอียด |
| <img src="ชื่อไฟล์รูปภาพ width="x" hight="y" > |
คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือ ชื่อและสถานที่รูปนั้นอยู่ โดยรูปภาพชนิด JPG, GIF, PNG |
width กำหนด ความกว้างของรูปภาพ ( x แทนค่า ตัวเลข หน่วย pixel)
hight กำหนด ความสูงของรูปภาพ ( y แทนค่า ตัวเลข หน่วย pixel) |
