จุดประสงค์การเรียนรู้
เมื่อนักเรียนเรียนเรื่อง ตกแต่งเว็บเพจด้วยภาพแล้ว นักเรียนสามารถ
1. นำภาพมาใช้งานได้
2. ทำงานกับภาพบนเว็บเพจได้
3. วางภาพและข้อความบนหน้าเว็บเพจได้สวยงาม
4. นำภาพมาเป็นพื้นหลังเว็บเพจได้
5. ตกแต่งรูปภาพให้สวยงามได้
6. จองพื้นที่ให้ภาพบนหน้าเว็บเพจได้
สาระการเรียนรู้
1. นำภาพมาใช้งาน
2. ทำงานกับภาพบนเว็บเพจ
3. วางภาพและข้อความบนหน้าเว็บเพจ
4. นำภาพมาเป็นพื้นหลังเว็บเพจ
5. ตกแต่งรูปภาพให้สวยงาม
6. จองพื้นที่ให้ภาพบนหน้าเว็บเพจ
ลักษณะของภาพกราฟิกในเว็บเพจ
1. สิ่งที่ต้องคำนึงถึงในการเลือกรูปภาพ
รูปภาพหรือภาพกราฟิกที่นำมาประกอบเนื้อหาในเว็บเพจ เป็นส่วนหนึ่งที่ทำให้ผู้อ่านเข้าใจเรื่องราวที่นำเสนอมายิ่งขึ้น และช่วยให้เว็บเพจมีสีสันสวยงามน่าอ่าน
การนำภาพกราฟิกมาประกอบเว็บเพจมีหลักการที่จะต้องคำนึงถึง ดังนี้
1. ความแตกต่างของเครื่องคอมพิวเตอร์
การนำรูปภาพมาใช้ในคอมพิวเตอร์จำต้องคำนึงถึงความแตกต่างของเครื่องคอมพิวเตอร์ ที่ผู้ใช้อินเทอร์เน็ตทั่วไปใชข้กันอยู่ บางเครื่องอาจจะเป็นคอมพิวเตอร์รุ่นเก่า ประสิทธิภาพการทำงานของเครื่องในหลายด้าน เช่น หน่วยความจำ หน่วยประมวลผลกลาง ขนาดจอภาพระบบปฏิบัติการ ฯลฯ อาจแตกต่างกันซึ่งมีผลทำให้ภาพที่แสดงผลออกมาไม่ตรงกัน เช่น ขนาด สีสัน ความคมชัด เป็นต้น ซึ่งผู้เลือกใช้ภาพจะต้องจัดเตรียมภาพที่เป็นมาตรฐานสากลมาใช้
2. ความแตกต่างของเครื่องคอมพิวเตอร์
เบราว์เซอร์ที่ผู้ใชอินเทอร์เน็ตนิยมใช้ เช่น Internet Exploer Firefox และ Google Chome ก็มีลักษณะการแสดงผลไม่เหมือนกันเสียทีเดียว บางครั้งภาพที่ดูเหมาะสมกับเบราว์เซอร์หนึ่ง อาจจะมีขนาดเล็กหรือใหญ่เกินไปกับอีกเบราว์เซอร์หนึ่งก็เป็นไปได้ วิธีแก้ไขก็ต้องเลือกภาพที่มีขนาดปานกลาง และทดลองแสดงผลกับเบราว์เซอร์ต่างๆ เพื่อให้แน่ใจว่าใช้ได้ดีกับทุกๆ เบราว์เซอร์
3. กำหนดหน่วยวัดมาตรฐานของภาพให้เป็นมาตรฐานเดียวกัน
หน่วยวัดมาตรฐานสากลของรูปภาพสำหรับแสดงผลบนคอมพิวเตอร์ คือ Pixel ดังนั้น เมื่อกำหนดขนาดบนเว็บเพจควรกำหนดเป็นพิกเซล ถ้าใช้หน่วยวัดเป็นเซ็นติเมตร หรือมิลลิเมตร อาจจะมำให้ภาพมีนนาดไม่เป็นไปอย่างที่ต้องการเมื่อแสดงผลบนเว็บยเพจก็ได้
4. ความละเอียดของรูปภาพ
ความละเอียดของภาพ (Resolution) เป็นการกำหนดให้ภาพมีขนาดความละเอียดของเม็ดสี จำนวนจุดต่อนิ้ว โดยปกติภาพบนเว็บเพจจะใช้เพียง 72 จุดต่อนิ้วก็เพียงพอ เพื่อความรวดเร็วในการดาวน์โหลดไฟล์
5. ขนาดของไฟล์ภาพ
ขนาดของภาพก็คือความกว้างและความยาวของภาพ ซึ่งมีผลต่อการดาวน์โหลดข้อมูล ภาพขนาดใหญ่ทำให้แสดงผลช้า ผู้ใช้อินเทอร์เน็ตส่วนมากจะไม่นิยมรอนาน ถ้าผ่านไป 30 วินาที หรือ 1 นาที แล้วยังดาวน์โหลดข้อมูลไม่ครง ผู้อ่านจะปิดเว็บเพจหน้านั้นหรือเปิดข้ามไปหน้าอื่นทันที วิธีการเลือกขนาดภาพให้เหมาะสมมีหลักการ ดังนี้
- 5.1 ลดขนาดพิกเซลของภาพให้เล็กลงที่สุดเท่าที่จะทำได้ โดยไม่ทำให้คุณภาพของภาพเสียไป
5.2 ถ้าไม่สามารถหลีกเลี่ยงได้ต้องใช้ภาพใหญ่ เช่น หัวเว็บไซต์ ภาพศิลปะ ฯลฯ ควรตัดภาพออกเป็นส่วนย่อย ๆ เพื่อให้สามารถดาวน์โหลดได้ทีละส่วน ผู้ชมจะได้รอชมภาพเต็มได้โดยไม่เบื่อเสียก่อน - 5.3 แสดงข้อความก่อนภาพ เป็นเทคนิคที่ทำให้ผู้อ่านได้อ่านเนื้อเรื่องไปพรางๆ ก่อนที่ภาพจะปรากฏขึ้นมา
- 5.4 ใช้ภาพเดิมซ้ำๆ ที่ม่อยู่แล้ว เนื้อหาบางอย่างสามารถใช้ภาพเดิมประกอบได้ ซึ่งเบราว์เซอร์จะจำภาพนั้นได้ ช่วยให้การดาวน์โหลดเร็วขึ้น
2. ประเภทของรูปภาพ
รูปภาพที่ใช้งานด้านการทำเว็บเพจโดยทั่วไปแบ่งออกเป็น 2 ประเภท คือ
ภาพจริง เป็นภาพที่เกิดจากวัตถุของจริง เช่น ภาพถ่าย ภาพแสกน
ภาพกราฟิก เป็นภาพที่เกิดจากการประมวลผลของคอมพิวเตอร์หรือวาดจากโปรแกรมกราฟิก เช่น Paint
รูปภาพที่เก็บไว้ในหน่วยความนำคอมเิวเตอร์ทั้ง 2 แบบดังกล่าวเกิดจากจุดของสีลักษณะสี่เหลี่ยมเล็กๆ เรียกว่า พิกเซล (Pixcel) มาเรียงต่อกันเป็นภาพ ซึ่งแบ่งแแกตามลักษณะการประมวลผลเป็น 2 ชนิด คือ
ภาพเวกเตอร์ (Vector) เป็นภาพที่อาศัยการคำนวณทางคณิตศาสตร์ โดยมีสีและตำแหน่งของสีที่แน่นอน ทำให้เวลาเคลื่อนย้าย ย่อ ขยายภาพจะไม่เสียรูปทรงในเชิงเรขาคณิต เช่น ภาพจากโปรแกรม Illustrator และ CorelDraw เป็นต้น
ภาพบิตแมป (Bitmap) เป็นภาพที่อาศัยการอ่านค่าสีในแต่ละพิกเซล เรียกว่า Raster Image โดยจะเก็บข้อมูลเป็นค่า 0 และ 1 แต่ละพิกเซลจะมีค่าสีแบบเจาะจงในตำแหน่งนั้นๆ ทำให้เวลาขยายภาพ ภาพจะแตก ไม่คมชัด โปรแกรมประมวลผลภาพแบบบิตแมป เช่น Photoshop และ Pait เป็นต้น
การนำภาพกราฟิกมาใช้ในเว็บเพจนิยมใช้ภาพ 3 ฟอร์มแมต คือ .gif .jpeg และ .png ซึ่งมีรายละิเอียดของภาพแต่ละชนิดโดยสังเขป ดังนี้
ภาพ GIF ย่อมาจาก Graphic Interchange Format เป็นรูปแบบไฟล์ภาพที่พัฒนาขึ้นโดย CompuServe สำหรับบีบอัดข้อมูลภาพลายเส้น กำหนดสีได้สูงสุด 256 สี มีคุณลักษณะโปร่งแสง และสร้างภาพเคลื่อนไหวได้
ภาพ JPEG ย่อมาจาก Joint Photographic Experts Group เป็นรูปแบบไฟล์ภาพที่บีบอัดข้อมูลให้เล็กลง หลังการบีบอัดยังคงแสดงสีได้สูงถึง 17.6 ล้านสี แต่ถ้าบีบอัดไฟลมากๆ คุณภาพจะเสียไป ไฟล์ที่บีบอัดทำให้ขนาดเล็กกว่าภาพ .gif สามารถดาวน์โหลดได้เร็ว แต่เมื่อนไมาแสดงผลก็อาจจะช้าบ้าง เพราะต้องขยายไฟล์ขณะแสดงผล
ภาพ PNG ย่อมาจาก Portable Network Graphic เป็นรูปแบบไฟล์บีบอัดข้อมูลได้ดีกว่า .gif ประมาณ 20-30 เปอร์เซ็นต์ ไฟล์มีขนาดใหญ่ แต่แสดงผลได้เร็วกว่าภาพ JPEG และสามารถทำภาพโปร่งแสงได้