บทเรียนดิจิตอล

ภาพที่เหมาะสมกับการใช้งาน

ภาพที่นำมาใช้ในการนำเสนอผ่านเครือข่ายอินเทอร์เน็ต ด้วยเอกสารเว็บ ควรใช้ภาพนามสกุล .GIF หรือ .JPG เท่านั้น โดยมีหลักการพิจารณาเลือก คือ ภาพที่มีสีน้อยๆ หรือภาพที่ต้องการทำพื้นให้โปร่งใส ควรจัดเก็บในฟอร์แมต .GIF และกำหนดค่าเพิ่มเติม (Option) เป็น Interlaced คือ ให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ในขณะที่ภาพที่ต้องการความคมชัด ความสดใส ควรจัดเก็บในฟอร์แมต .JPG และกำหนดคุณภาพ (Quality) ที่เหมาะสมกับภาพนั้นๆ ค่าแนะนำ คือ 4 - 6 หากต้องการให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ให้กำหนดค่าเพิ่มเติม (Option) เป็น Progressive ด้วย สำหรับความละเอียดของภาพ (Resolution) ควรใช้ค่า 72 dpi

ตัวอย่าง เปิดภาพตัวอย่างของ Photoshop 5.5 ชื่อ dune.tif มาจัดเก็บใหม่ด้วยฟอร์แมต และค่าต่างๆ ได้ผลดังนี้

ต้นฉบับ .TIF	1,061 KB
.JPG ค่า Quality = 8	44 KB
.JPG ค่า Quality = 3	17 KB
.GIF	102 KB

ดังนั้นภาพนี้ ซึ่งเป็นภาพสี ที่มีความคมชัด และสดใส ควรเก็บด้วยฟอร์แมต JPG เท่านั้น สำหรับค่า Quality กำหนดได้ โดยดูความเหมาะสมของการนำไปใช้งาน โดยหากกำหนดค่า Quality ไว้ต่ำ จะทำให้คุณภาพความคมชัดของภาพลดลงไปด้วย แม้ว่าจะได้ขนาดไฟล์เล็กก็ตาม

คำสั่งการนำเสนอไฟล์รูปภาพ

< img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" >

เราสามารถกำหนดคุณสมบัติของรูปภาพได้ โดยเราจะใส่ภายในคำสั่ง < IMG SRC > เพื่อที่จะทำให้รูปภาพสามารถใช้ร่วมกับข้อ ความหรือตัวอักษรและทำให้ เว็บเพจนั้นมีความน่าสนใจมากยิ่งขึ้น

< img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" alt= "ข้อความอธิบาย" align="top/middle/bottom/left/right" width="ค่าตัวเลข" height="ค่าตัวเลข" hspace="ค่าตัวเลข" vspace="ค่าตัวเลข" border="กำหนดเป็นตัวเลข" >

Alt= เป็นการกำหนดข้อความอธิบาย โดยจะปรากฎก็ต่อเมื่อนำเมาส์ลากมาที่รูปข้อความก็จะปรากฎ
Align = "top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ
Align = "middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ
Align = "bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ
Align = "left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ
Align = "right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ
Width = การกำหนดขนาดความกว้างของรูปภาพ
Height = การกำหนดขนาดความสูงของรูปภาพ
Hspace = เป็นการกำหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <IMG> จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
Vspace = เป็นการกำหนดระยะเว้นขอบจากด้านบนกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <IMG> จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
Border = เป็นการกำหนดเส้นกรอบของรูปภาพ - สำหรับการใส่เส้นขอบให้กับรูปใดๆ นั้น ให้ใช้แอตทริบิวต์ BORDER แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง