2. ข้อพิจารณาการเลือกใช้รูปภาพข้อพิจารณาการเลือกใช้รูปภาพ 1. ไม่ควรเน้นรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีข้อความและรูปภาพที่สมดุลกัน 2. การใช้รูปภาพที่เป็นไฟล์ขนาดใหญ่จะทําให้การโหลดเว็บเพจใช้เวลานานกว่าจะแสดงภาพ ดังนั้น จึงควรใช้ภาพที่มีพอเหมาะสื่อกับผู้ชม หรืออาจใช้โปรแกรมทางกราฟิก เช่น Photoshopหรือ ACDSeeทําการลดขนาดภาพ (Resize)ก่อนนํามาลงบนเว็บเพจก็ได้

3. ข้อพิจารณาการเลือกใช้รูปภาพข้อพิจารณาการเลือกใช้รูปภาพ • 3. ปัจจุบันการนํารูปภาพลงเว็บเพจ ควรคํานึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นด้วย แต่บางเว็บไซต์ก็มีการแจกรูปภาพให้ฟรี ซึ่งสามารถนํามาใช้ประโยชน์โดยไม่ต้องเสียค่าลิขสิทธิ์ • 4. ควรเลือกใช้ภาพที่มีโทนเดียวกับส่วนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไม่แตกต่างกัน

4. ชนิดของรูปภาพ • 1. ภาพ  GIF (Graphic Interchange Format) เป็นรูปแบบไฟล์ภาพที่พัฒนาขึ้นโดย Compuserveสำหรับบีบอัดข้อมูลภาพลายเส้น กำหนดสีได้สูงสุด 256 สี มีคุณลักษณะโปร่งแสงและสร้างภาพเคลื่อนไหวได้ สามารถแสดงผลบนเบราวเซอร์ได้ทุกชนิด มักเป็นรูปที่มีสีพื้นเป็นส่วนใหญ่ ไม่ค่อยมีการไล่สี แต่ถ้ามีการขยายภาพทำให้ภาพแตกได้ เช่น โลโก้ รูปการ์ตูนต่าง ๆ ที่มา : www.thaiscouting.comที่มา : www.hellokittydreams.fr ภาพที่มีสกุลเป็น GIF 

5. ชนิดของรูปภาพ 2. ภาพ  JPEG (Joint Photographic Experts Group)  เป็นรูปแบบไฟล์ที่บีบอัดข้อมูลให้เล็กลง หลังการบีบอัดยังคงแสดงสีได้สูงถึง 16.7 ล้านสี แต่ถ้าบีบอัดมากๆ คุณภาพจะเสียไป ไฟล์ที่บีบอัดทำให้ขนาดเล็กกว่าภาพ .gif ก็ได้ สามารถดาวน์โหลดได้เร็วแต่เมื่อนำมาแสดงผลก็อาจจะช้าบ้าง เพราะต้องขยายไฟล์ขณะแสดงผลสามารถแสดงผลบนบราวเซอร์ได้ทุกชนิดเช่นกัน ส่วนใหญ่มักจะเป็นภาพถ่าย หรือภาพที่มีรายละเอียดสีมาก ๆ ที่มา : http://www.bloggang.com/data/mr-virus/picture/1194274410.jpg

6. ชนิดของรูปภาพ 3. ภาพ PNG (Portable Network Graphic)พัฒนาขึ้นมาใช้งานบนเบราว์เซอร์ แต่ ขณะนี้ยังไม่ได้ความนิยมมากนักเมื่อเทียบกับไฟล์ .gif และ .jpg ขยายได้โดยภาพไม่แตก ที่มา : http://cc.in.th/wiki/_media

7. การนำรูปภาพมาใช้งานในเว็บเพจการนำรูปภาพมาใช้งานในเว็บเพจ

8. การปรับขนาดรูปภาพ คลิกที่ขอบของภาพและย่อหรือขยายขนาด โดยกดปุ่ม < Shift >  ค้างไว้ จะเป็นการปรับขนาดตามสัดส่วนเดิม

9. การจัดวางรูปภาพ  (Align Left) สำหรับวางรูปชิดขวา  (Align Left) สำหรับวางรูปชิดซ้าย (Align Center) สำหรับวางรูปตรงกลาง

10. การใส่กรอบให้รูปภาพ คลิกเลือกรูปที่ต้องการใส่กรอบ กำหนดความหนาของกรอบเป็นตัวเลข ลงในช่อง  Border

11. การกำหนดระยะห่างของรูป

12. การปรับความคมชัดให้กับภาพการปรับความคมชัดให้กับภาพ • 1. คลิกภาพที่ต้องการปรับความคมชัด • 2. คลิกปุ่ม (Sharpen) ที่ Properties Inspector • 3. คลิกเลื่อนเพื่อเลือกระดับความคมชัด

13. การปรับความสว่างให้กับภาพการปรับความสว่างให้กับภาพ • 1. คลิกภาพที่ต้องการปรับความสว่างและคอนทราสต์ • 2. คลิกปุ่ม (Brightness and Contrast)  ที่  Properties Inspector • 3.คลิกเลื่อนเพื่อเลือกระดับคอนทราสต์

14. การใส่รูปภาพเป็นฉากหลัง • 1. คลิกที่ปุ่ม  Page Properties  หรือกดปุ่ม  < Ctrl + J >  เพื่อเปิดหน้าต่าง  Page Properties

15. การใส่รูปภาพเป็นฉากหลัง • 2. คลิกที่หัวข้อ  Appearance • 3. คลิกที่ปุ่ม Browse • 4. เลือกไฟล์รูปภาพที่ต้องการนำมาเป็นฉากหลัง • 5. คลิกที่ปุ่ม  OK

16. Thank You !