บทที่ 4

การแต่งเว็บเพจด้วยรูปภาพ

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

3.1 ความรู้ทั่วไปเกี่ยวกับการแสดงภาพบนเว็บ

ในการออกแบบเพื่อใช้บนเว็บนั้น เราจำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับอินเทอร์เน็ตและเว็บด้วยจึงจะสร้างสรรค์งานได้อย่างเหมาะสม ซึ่งพอจะสรุปสิ่งที่ควรทราบได้ดังนี้ คือ

1.       ความแตกต่างระหว่างระบบเครื่อง ระบบปฏิบัติการ และเว็บบราวเซอร์

เนื่องจากอินเทอร์เน็ตเป็นระบบที่เชื่อมโยงกับเครื่องคอมพิวเตอร์ทั่วโลก เราจึงพบกับความแตกต่างที่มาจากเครื่องแต่ละรุ่นโดยสิ่งที่เราควรทราบคือมาตรฐานจอภาพที่ต่างกัน ระบบการแสดงผลที่ต่างกันจะให้สีที่ต่างกัน เช่น จอภาพของเครื่อง Apple จะให้สีที่มีความสว่างกว่าจอภาพของเครื่อง PCฉะนั้นเมื่อเราออกแบบภาพบนเครื่อง PC เราต้องกำหนดความสว่างให้ลดลงกว่าปกติเล็กน้อย เพราะหากแสดงผลเครื่อง Apple อาจทำให้ภาพที่ได้ดูสว่างมากไป

2.       การใช้ชนิดของบราวเซอร์ที่แตกต่างกัน

บราวเซอร์ที่แตกต่างกันอาจทำให้การแสดงผลของภาพบนเว็บแตกต่างกัน

3.       หน่วยวัดมาตรฐานของภาพบนเว็บ

เมื่อสร้างภาพบนเว็บให้กำหนดหน่วยวัดเป็นพิกเซล        เพราะพิกเซลเป็นหน่วยมาตรฐาน

สำหรับการแสดงผลบนจอภาพ ต่างกับสร้างสื่อสิ่งพิมพ์ซึ่งจะกำหนดหน่วยวัดเป็นนิ้ว

4.       ความละเอียดของภาพ

1)      ภาพบนเว็บไม่จำเป็นต้องใช้ความละเอียดเท่ากับภาพบนสื่อสิ่งพิมพ์ ความละเอียด

โดยทั่วไปที่ยอมรับได้ คือ 72 จุดต่อนิ้ว

2)      การออกแบบต้องคำนึงถึงค่าต่ำสุดของความละเอียดภาพ   กล่าวคือขนาดของภาพ

                                ต้องไม่เกิน 625 X 320             ไม่ว่าที่ความละเอียดใดก็ตามเพื่อจะสามารถ

                                แสดงผลจอภาพมาตรฐาน 14 นิ้วได้

5.       ขนาดของไฟล์

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

1)      แบ่งภาพเป็นไฟล์เล็ก ๆ นำมาเรียงต่อเป็นภาพใหญ่ ดีกว่าดาวน์โหลดภาพใหญ่เพียงภาพเดียว

2)      ลดขนาดของภาพโดยลดจำนวนสีที่ใช้ หรือลดความละเอียดของภาพ ซึ่งหากทำอย่างดีก็จะได้ภาพที่ดูไม่เห็นความแตกต่างจากภาพเดิม แต่มีขนาดที่เล็กมาก

3)      พยายามใช้ภาพเดิมในหน้าเว็บไซต์อื่น ๆ เพื่อจะไม่เสียเวลาดาวน์โหลดนาน

4)      กำหนดโครงสร้างของเว็บให้แสดงผลในส่วนที่เป็นตัวอักษรก่อน เพื่อไม่ให้ผู้เข้าชมเสียเวลา เพราะได้อ่านส่วนแสดงผลข้อความที่ดาวน์โหลด ได้เร็วกว่าส่วนแสดงผลของภาพ

6.       Dither

เป็นกระบวนการสร้าง  Palette สี (จานสี)     ขึ้นใหม่ตามจำนวนสีที่กำหนดแล้วแทรกลงไปบนภาพในลักษณะการแทรกจุดสีซึ่งเป็นการไล่ระดับสี เพื่อหลอกตาให้เห็นว่ามีสีนั้นอยู่ในภาพอย่างกลมกลืน ใช้สำหรับการแปลงภาพจากที่มีสีมากกว่า ไปยังภาพที่มีสีน้อยกว่าภาพโดยทั่วไป 16.7 ล้านสี ปรับให้เป็น 256 สี มักจะทำโดยการใช้ขบวนการนี้ นั่นคือ จะคำนวณค่าสีเพื่อสร้างจานสีใหม่ โดยสีที่อยู่ในจานสีใหม่อาจมาจากสีเดิม หรือาศัยการคำนวณค่าสีใกล้เคียง

3.2 รู้จักกับฟอร์แมตไฟล์สำหรับภาพกราฟิกบนเว็บ

เราสามารถจัดเก็บภาพกราฟิกได้หลายแบบที่เรียกว่าฟอร์แมต ซึ่งโดยมากเนื่องจากภาพบนเว็บต้องมีขนาดไฟล์ที่เล็ก ฉะนั้นฟอร์แมตที่ใช้ต้องมีการบีบอัดข้อมูลเพื่อลดขนาดภาพกราฟิก สำหรับฟอร์แมตที่มีการจัดเก็บแบบบีบอัดข้อมูล ได้แก่ GIF, JPEG และ PNG ซึ่งในการเลือกใช้ฟอร์แมตภาพได้อย่างเหมาะสม เราต้องทำความเข้าใจลักษณะการบีบอัดข้อมูลของแต่ละฟอร์แมต เพราะแต่ละแบบจะบีบอัดข้อมูลได้อย่างมีประสิทธิภาพสูงสุดเมื่อนำมาใช้กับภาพที่เมาะสมเท่านั้น

3.2.1 หลักการโดยทั่วไปสำหรับการเลือกใช้ฟอร์แมตไฟล์สำหรับภาพกราฟิก

                                1. ใช้ .JPEG สำหรับภาพถ่าย หรือภาพวาดที่มีจำนวนสีมาก ๆ

                                2. ใช้ .GIF หรือ .PNG-8 สำหรับภาพที่มีลักษณะเป็นลายเส้น หรือภาพที่ต้องการสร้างภาพเป็นภาพโปร่งใส เช่นภาพการ์ตูน

                                3. ใช้ .PNG-24 สำหรับภาพถ่ายที่ต้องการให้มีลักษณะโปร่งแสง แต่ไฟล์ที่ได้หลังการบีบอัด จะมีขนาดใหญ่กว่าไฟล์ JPEG และมีคุณสมบัติมากกว่าไฟล์ JPEG

3.2.2 ฟอร์แมต GIF

                                1. ถูกพัฒนาโดย CompuServe ในปี 1980 เพื่อบีบอัดข้อมูลลายเส้น

                                2. มีข้อจำกัดการใช้งานอยู่ที่ 256 สีเท่านั้น (8 บิต)

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

                                4. ความสามารถในการแสดงภาพโปร่งแสง และภาพเคลื่อนไหว

3.2.3 ฟอร์แมต JPEG

                                1. ถูกพัฒนาขึ้นโดย Joint Photographic Experts Group เพื่อจุดประสงค์ในการบีบอัดข้อมูลของไฟล์รูปภาพ มีจุดเด่นคือหลังการบีบอัด ยังสามารถขยายสีได้ถึง 16.7 ล้านสี ในขณะที่ .GIF ใช้ได้เพียง 256 สีเท่านั้น

                                2. ไม่จำเป็นต้องกำหนดพาเลตสีเพื่อการใช้งาน    เพราะรองรับข้อมูลสีได้มากถึง 16.7 ล้านสีอยู่แล้ว

                                3. ลักษณะการบีบอัด เป็นการลบข้อมูลส่วนที่ซ้ำซ้อนกันมากที่สุดออกจากภาพ ยิ่งมีการบีบอัดข้อมูลมากขึ้นเท่าไหร่ คุณภาพก็จะสูญเสียมากขึ้นเท่านั้น

                                4. ผลของการบีบอัดข้อมูลจะได้ไฟล์ที่มีขนาดเล็กยิ่งกว่าฟอร์แมต GIF ซึ่งจะทำให้ใช้เวลาดาวน์โหลดน้อย แต่ใช่เวลาในการแสดงผลนาน เพราะต้องขยายข้อมูลการบีบอัดก่อนการแสดงผล

                                5. ไม่สนับสนุนการบีบอัดข้อมูลที่มีภาพโปร่งแสง เพราะหลังการบีบอัดพิกเซลที่โปร่งแสงจะถูกแทนที่ด้วยสีของ Background

                3.2.4 ฟอร์แมต PNG

1. ถูกพัฒนาโดย Thomas Boutell และ Tom Lame วัตถุประสงค์ เพื่อการทำงานข้ามระบบ เพราะมีการจัดการเก็บข้อมูลเกี่ยวกับลักษณะเครื่อง ทำให้สามารถแสดงผลได้ถูกต้องกับเครื่องทุกระบบ

2. บีบอัดข้อมูลได้ดีกว่า GIF 20-30 เปอร์เซ็นต์ ไม่เสียข้อมูลเหมือนแบบ JPEG

3. สามารถเลือกการจัดเก็บข้อมูลได้ทั้งแบบ 8 บิต 24 บิต และ 32 บิต ต่างกับ .GIF

4. แสดงผลได้เร็วกว่าแบบ .GIF เพราะใน .GIF จะเริ่มแสดงผลเมื่อดาวน์โหลดข้อมูลมาได้ 1 ใน 8 ส่วน ขณะที่ PNG เริ่มแสดงผลเมื่อข้อมูลถูกโหลดเข้ามา 1 ใน 64 ส่วน

5. สนับสนุนการทำงานกับภาพโปร่งใส

การตกแต่งเว็บเพจด้วยรูปภาพ 
1. ลักษณะของภาพกราฟิกในเว็บเพจ
 สิ่งต้องคำนึงถึงในการเลือกรูปภาพ
                ภาพกราฟิกหรือรูปภาพที่นำมาประกอบเนื้อหาในเว็บเพจเป็นส่วนหนึ่งที่ทำให้ผู้อ่านเข้าใจเรื่องราวที่นำเสนอมากยิ่งขึ้น  และช่วยให้เว็บเพจมีสีสันสวยงาม  น่าอ่าน
                การนำภาพกราฟิกมาประกอบเว็บเพจ  มีสิ่งที่จะต้องคำนึงถึงหลัก ๆ  ดังนี้
                1.  ความแตกต่างกันของระบบคอมพิวเตอร์
                2.  การเลือกใช้ชนิดของเบราเซอร์
                3.  กำหนดหน่วยวัดมาตรฐานของภาพให้เป็นมาตรฐานเดียวกัน
                4.  ความละเอียดของรูปภาพ
                5.  ขนาดของไฟล์ภาพ

ชนิดของรูปภาพ
                การนำภาพกราฟิกมาใช้ในเว็บเพจนิยมใช้ภาพ 3 ฟอร์แมต (นามสกุล)  คือ  .gif , .jpg ,  .png  ซึ่งมีรายละเอียดของภาพแต่ละชนิด  ดังนี้
ภาพ  GIF (Graphic Interchange Format)  สามารถแสดงผลบนบราวเซอร์ได้ทุกชนิด มักเป็นรูปที่มีสีพื้นเป็นส่วนใหญ่ ไม่ค่อยมีการไล่สี เช่น โลโก้ รูปการ์ตูนต่าง ๆ

ภาพ  JPEG (Joint Photographic Experts Group)  สามารถแสดงผลบนบราวเซอร์ได้ทุกชนิดเช่นกัน ส่วนใหญ่มักจะเป็นภาพถ่าย หรือภาพที่มีรายละเอียดสีมาก ๆ

                ภาพ PNG (Portable Network Graphic)พัฒนาขึ้นมาใช้งานบนบราวเซอร์ แต่ขณะนี้ยังไม่ได้ความนิยมมากนักเมื่อเทียบกับไฟล์ .gif และ .jpg

2. การเตรียมรูปภาพ 
 การเลือกภาพให้เหมาะสมกับเว็บเพจ 
                ภาพกับเว็บเพจควรออกแบบให้เหมาะสม  ในแต่ละคอลัมน์ควรมีภาพประกอบอย่างน้อย 1 ภาพ  แต่ถ้าเนื้อหายาวมาก  ก็ควรเพิ่มภาพให้มากขึ้น  เพื่อพักสายตาผู้อ่าน
                สิ่งที่ต้องคำนึงถึงในการเลือกภาพ มีดังนี้
                1.  จำนวนภาพ
                2.  ขนาดภาพ
                3.  ความสวยงามของภาพ
3.  การใส่รูปภาพ
การนำรูปภาพมาใช้งานในเว็บเพจ

1. วางเคอร์เซอร์ลงบนเว็บเพจ  บริเวณที่ต้องการแทรกภาพ
2. คลิกปุ่ม  Insert แล้วเลือกคำสั่ง  (Image)              
3. เลือกภาพที่ต้องการนำมาแทรกในเว็บเพจ  ซึ่งสามารถดูตัวอย่างภาพได้โดยคลิก
4. คลิกปุ่ม OK

การปรับขนาดรูปภาพ 
                เมื่อนำรูปภาพมาวางในเว็บเพจแล้ว  หากมีขนาดไม่เหมาะสม  เช่น  รูปมีขนาดใหญ่หรือเล็กเกินไป  เราสามารถปรับขนาดรูปภาพเพื่อให้มีขนาดพอดีกับหน้าเว็บเพจ  ซึ่งมีขั้นตอนดังนี้
                1.  คลิกเลือกรูปที่ต้องการปรับขนาด
                2.  คลิกเลื่อนเมาส์ที่ขอบของภาพและย่อหรือขยายขนาด  โดยกดปุ่ม < Shift >  ค้างไว้จะเป็นการปรับขนาดตามสัดส่วนเดิม  หรือปรับค่าตัวเลขขนาดภาพตามต้องการใน Property Inspectoc

การจัดวางรูปภาพ 
                เมื่อได้นำรูปภาพมาใส่ลงในเว็บเพจแล้ว  สามารถจัดวางรูปในลักษณะต่าง ๆ  เช่น  ชิดซ้าย  ตรงกลาง  หรือชิดขวาก็ได้  โดยการจัดวางรูปภาพมีขั้นตอนดังนี้

1. คลิกเลือกรูปที่ต้องการจัดรูปแบบ
2. คลิกเลือกปุ่มเพื่อจัดวางให้เหมาะสมกับหน้าเว็บเพจ

                                (Align Left)  สำหรับวางรูปชิดซ้าย
                                (Align Center)  สำหรับวางรูปตรงกลาง
                                 (Alight Right)  สำหรับวางรูปชิดขวา

4. การตกแต่งรูปภาพให้สวยงาม 

การใส่กรอบให้รูปภาพ

1. คลิกเลือกรูปที่ต้องการใส่กรอบ

    2.  กำหนดความหนาของกรอบลงในช่อง  Border

3.  คลิกเมนู  File >> Save  เพื่อบันทึกเว็บเพจ   จากนั้นกดปุ่ม  < F12 >  เพื่อทดสอบกับเบราเซอร์


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

1. คลิกเลือกรูปที่ต้องการกำหนดระยะห่าง
2. ในหน้าต่าง  Properties Inspector  ในช่อง  V space  พิมพ์ตัวเลขสำหรับกำหนดระยะห่างในแนวตั้ง  และที่ช่อง  H space  พิมพ์ตัวเลขสำหรับกำหนดระยะห่างในแนวนอน

1. รูปจะมีระยะห่างเปลี่ยนแปลงไปตามค่าที่กำหนด

การปรับความคมชัดให้กับภาพ
ในกรณีที่ภาพประกอบที่เตรียมไว้แทรกในเว็บเพจยังไม่คมชัดเท่าที่ควร  และไม่ต้องการเสียเวลาเข้าไปปรับแต่งในโปรแกรมกราฟิก  อีกทางเลือกหนึ่งคือการปรับแต่งความคมชัดของภาพจาก Properties Inspector ใน Dreamwever ได้โดยตรง  ดังนี้

1. คลิกภาพที่ต้องการปรับความคมชัด

1. คลิกปุ่ม  (Sharpen) ที่ Properties Inspector

2.คลิกเลื่อนเพื่อเลือกระดับความคมชัด  ซึ่งดูภาพตัวอย่างผลลัพธ์ในภาพได้

  เมื่อได้ระดับความคมชัดแล้ว  คลิกปุ่ม  OK  ภาพที่ได้จากการปรับความคมชัดจะปรากฏขึ้น

การปรับความสว่างให้กับภาพ 

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

       3.  คลิกเลื่อนเพื่อเลือกระดับความสว่าง  ซึ่งดูภาพตัวอย่างผลลัพธ์ในภาพได้
       4.  คลิกเลื่อนเพื่อเลือกระดับคอนทราสต์ 

       5.  เมื่อได้รับความสว่างและคอนทราสต์แล้ว  คลิกปุ่ม OK
       6.  ภาพที่ได้จากการปรับความสว่างและคอนทราสต์จะปรากฏขึ้น

การใส่รูปภาพเป็นฉากหลัง

1. คลิกที่ปุ่ม  Page Properties  หรือกดปุ่ม  < Ctrl + J >  เพื่อเปิดหน้าต่าง  Page Propertie

1. คลิกที่หัวข้อ  Appearance
2. คลิกที่ปุ่ม Browse

1. เลือกไฟล์รูปภาพที่ต้องการนำมาเป็นฉากหลัง
2. คลิกที่ปุ่ม  OK
3. คลิกที่ปุ่ม  OK  ที่หน้าต่าง  Page Properties  อีกครั้ง