ดาวโหลดเอกสาร [DOC] [PDF]
ประเภทของไฟล์รูปภาพ
สามารถนำรูปภาพมาประกอบบนหน้าเว็บเพจได้ เช่น แทรกภาพในเว็บเพจ ใส่เส้นกรอบเป็นรูปภาพ และการแสดงภาพให้เป็นพื้นหลังของเว็บเพจ ชนิดของภาพที่จะนำมาประกอบบนเว็บเพจ ควรจะต้องมีขนาดเล็ก เพื่อนำไปเรียกใช้บนเว็บเพจได้อย่างรวดเร็ว เช่น GIF, JPEG และ PNG ซึ่งในการเลือกใช้ฟอร์แมตภาพได้อย่างเหมาะสม ควรต้องทำความเข้าใจลักษณะการบีบอัดข้อมูลของแต่ละฟอร์แมต เพราะแต่ละแบบจะบีบอัดข้อมูลได้อย่างมีประสิทธิภาพสูงสุดเมื่อนำมาใช้กับภาพที่เหมาะสม
รู้จักกับชนิดของภาพกราฟิกบนเว็บ
1.ไฟล์สกุล JPG (Joint Photographer’s Experts Group)
เป็นไฟล์หนึ่งที่นิยมใช้บน Internet มีความละเอียดสูง และใช้สีจำนวนมาก (สนับสนุนถึง 24 bit color) ไฟล์ชนิดนี้ส่วนใหญ่จะใช้กับภาพถ่ายที่นำมาสแกน และต้องการนำไปใช้บนอินเทอร์เน็ต เพราะให้ความคมชัดและความละเอียดของภาพสูง
จุดเด่น
1. สนับสนุนสีได้ถึง 24 bit
2. สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
3. มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive
4. มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
5. เรียกดูได้กับ Graphics Browser ทุกตัว
6. ตั้งค่าการบีบไฟล์ได้ (compress files)
7. สนับสนุนสีได้ถึง 24 bit สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
จุดด้อย
ทำให้พื้นของรูปโปร่งใสไม่ได้
2. ไฟล์สกุล GIF (Graphics Interlace File)
สร้างขึ้นมาโดยบริษัท Compu surve ซึ่งเป็นบริษัทที่ให้บริการด้านเครือข่ายของสหรัฐ เหมาะกับการเก็บไฟล์รูปภาพขนาดเล็ก และมีจำนวนของสีน้อย มีขนาดไฟล์เล็กเพราะสร้างขึ้นมาเพื่อใช้ในระบบเครือข่าย
จุดเด่น
1. มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำให้สามารถส่งไฟล์ภาพได้รวดเร็ว
2. สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent)
3. มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace
4. มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
5. เรียกดูได้กับ Graphics Browser ทุกตัว
6. ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation)
7. สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
จุดด้อย
ไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้ การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น
3. ไฟล์สกุล PNG (Portable Network Graphics)
ไฟล์สกุลล่าสุดที่นำจุดเด่นของไฟล์ GIF และ JPEG มาพัฒนาร่วมกัน ทำให้ภาพในสกุลนี้แสดงผลสีได้มากกว่า 256 สี และยังสามารถทำพื้นภาพให้โปร่งใสได้ จึงเป็นไฟล์ภาพที่ได้รับความนิยมมากในปัจจุบันด้วยอีกสกุลหนึ่ง คุณสมบัติของภาพคือ สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า ระบบคอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้ ขนาดไฟล์เล็ก ด้วยเทคนิคการบีบอัดคงสัญญาณ LZW สามารถทำภาพโปร่งใสจากสีพื้น 256 ระดับ แสดงภาพแบบสอดประสานเช่นเดียวกับ GIF โดยมีความคมชัดที่ดีกว่า มีคุณสมบัติ Gamma ทำให้ภาพสามารถปรับตัวเองได้ตามจอภาพ และปรับระดับความสว่างที่แท้จริงตามที่ควรจะเป็น
จุดเด่น
1. สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ 64 bit)
2. สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
3. มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace)
4. สามารถทำพื้นโปร่งใสได้
จุดด้อย
1. การกำหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ขนาดของไฟล์จะมีขนาดต่ำ
2. ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4
3. ความละเอียดของภาพและจำนวนสีขึ้นอยู่กับ Video Card
4. โปรแกรมสนับสนุนในการสร้างมีน้อย
การแทรกรูปภาพ
คำสั่ง <img src="ชื่อรูปภาพ"> คือ คำสั่งในการแทรกรูปภาพในหน้าเว็บเพจ สำหรับคำสั่งการใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้ ไม่ว่าจะเป็นขนาดความกว้าง ความสูงของรูปภาพว่าต้องการให้แสดงขนาดกว้างและสูง เท่าไหร่ ซึ่งถ้าไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ นอกจากนี้ ยังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้
ความกว้าง width="ตัวเลขระบุความกว้าง"
ความสูง height="ตัวเลขระบุความสูง"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ"
คำอธิบาย alt = “คำอธิบายรูปภาพ”
ตัวอย่างที่ 1 การแทรกภาพ
<html>
<head>
<title> Insert Images : การแทรกภาพ</title>
</head>
<body background="bg.jpg">
<img src = "01.jpg" width="200" height="150" border="1" alt = “ทุ่งหญ้า”>
</body>
</html>
แสดงผลตัวอย่างที่ 1
หมายเหตุ ใช้ รูป 2 รูป คือ 01.jpg (ภาพทุ่งหญ้า) และ bg.jpg (ภาพพื้นหลัง)
การจัดตำแหน่งรูปภาพ
คำสั่ง <IMG SRC = "ชื่อรูปภาพ" ALIGN="ตำแหน่ง" >
align=left หรือ center หรือ Right หรือ top หรือ bottom : เป็นการกำหนดตำแหน่งของรูปว่าจะให้อยู่ด้านซ้าย ขวา หรือ ตรงกลาง ส่วน top กับ bottom ใช้จัดตำแหน่งอักษร เช่น จัดรูปให้อยู่ด้านขวา <img src="2.jpg" align=right>
ตารางแสดงคำสั่งการจัดตำแหน่งของภาพ
ตัวอย่าง ที่ 2 การจัดตำแหน่งรูปภาพ
<html>
<head>
<title> การจัดตำแหน่งรูปภาพ</title>
</head>
<body>
<img src = "pic/01.jpg" align = "top">
<img src = "pic/02.jpg" align = "middle">
<img src = "pic/03.jpg" align = "bottom">
<img src = "pic/04.jpg" align = "left">
<img src = "pic/05.jpg" align = "right">
</body>
</html>
แสดงตัวอย่างที่ 2
