<โจทย์>
2 . อธิบายรูปแบบของ Image - GIF, JPG/JPEG, PNG ที่ใช้
ในการเขียน Web Page

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

>> 1.คุณสมบัติเฉพาะ
>> 2.ลักษณะการนำไปใช้งาน
>> 3.เครื่องมือที่ใช้ในการสร้างภาพ
>> 4.ตัวอย่างภาพ

1. คุณสมบัติเฉพาะ
ฟอร์แมต GIF
- Graphics Interchange Format (GIF) ถูกพัฒนาโดย CompuServe
ในปี 1980 เพื่อบีบอัดข้อมูลภาพลายเส้น
- มีข้อจำกัดการใช้งานอยู่ที่ 256 สีเท่านั้น (8 บิต)
- ใช้การบีบอัดแบบสร้าง Palette สีขึ้นใหม่ ทำให้ไม่สูญเสียคุณภาพของภาพ
เพราะไม่มีการตัดสีภาพออก แต่เป็นลักษณะการแทนสีภาพในแต่ละพิกเซล
ด้วยสีที่กำหนดขึ้นใหม่ ฉะนั้นคุณภาพไฟล์จะไม่เสีย
- ความสามารถในการแสดงภาพโปร่งแสง และภาพพเคลื่อนไหว
- สามารถใช้สร้างภาพ animated
- สามารถใช้ได้กับหลากหลาย Browser
- จะใช้วิธีการ lossless compression สามมารถบันทึกข้อมูลที่เป็นฟอร์แมต
GIF ได้ตลอดเวลาโดยข้อมูลจะไม่สูญเสียไประหว่างการบีบอัด
- คุณภาพของภาพที่ได้หลังจากการบีบอัดข้ออมูลแบบฟอร์แมต GIF จะด้อยกว่า
ภาพจริง เนื่องจากฟอร์แมต GIF เก็บข้อมูลสี 8 บิต จากภาพจริงที่เก็บข้อมูล
ที่ขนาด 24 บิต
- เราสามารถลดจำนวนสีใน GIF และเลือก opttion เพื่อควบคุม dither ของสี
ใน application หรือใน browser ได้

ฟอร์แมต JPEG
- ถูกพัฒนาขึ้นโดย Joint Photographic Exxperts Group เพื่อจุดประสงค์
ในการบีบอัดข้อมูลของไฟล์รูปภาพ มีจุดเด่นคือหลังการบีบอัด ยังสามารถใช้สี
ได้ถึง 16.7 ล้านสี ในขณะที่ .GIF ใช้ได้เพียง 256 สีเท่านั้น
- ไม่จำเป็นต้องกำหนดพาเลตสีเพื่อการใช้งงาน เพราะรองรับข้อมูลสีได้มากถึง
16.7 ล้านสีอยู่แล้ว
- ลักษณะการบีบอัดเป็นการลบข้อมูลส่วนที่ซ้ำซ้อนกันมากที่สุดออกจากภาพ
ยิ่งมีการบีบอัดข้อมูลมากขึ้นเท่าไหร่ คุณภาพก็จะสูญเสียมากขึ้นเท่านั้น
- ผลของการบีบอัดข้อมูลจะได้ไฟล์ภาพที่มีขนาดเล็กยิ่งกว่าฟอร์แมต GIF
ซึ่งจะทำให้ใช้เวลาการดาวน์โหลดน้อย แต่ใช้เวลาในการแสดงผลนาน เพราะ
ต้องขยายข้อมูลการบีบอัดก่อนการแสดงผล
- ไม่สนับสนุนการบีบอัดข้อมูลที่มีภาพโปรร่งแสงเพราะหลังการบีบอัดพิกเซล
ที่โปร่งแสงจะถูกแทนที่ด้วยสีของ Background
- ฟอร์แมต JPEG มีการบีบอัดแบบ lossy และะถ้ามีการ set quality สูงขึ้น
ก็จะทำให้สูญเสียข้อมูลน้อยลงด้วย
- วิธีการบีบอัดข้อมูลของ JPEG ทำให้รายลละเอียดความคมชัดของภาพลดลง
- ฟอร์แมต JPEG สนับสนุนการแสดงผลแบบ CMYYK, RGB และ grayscale
color mode และไม่สนับสนุนการแสดงผลแบบ alpha channel
- เมื่อเปิดภาพฟอร์แมต JPEG จะมีการคลายกการบีบอัดโดยอัตโนมัติ
- โดยส่วนใหญ่ ถ้ามีการ set quality ที่สูงจะทำให้ผลของภาพที่ได้จะไม่แตกต่าง
จากต้นฉบับมากนัก (คือมีการบีบอัดข้อมูลน้อย ยิ่งถ้ามีการบีบอัดน้อยเท่าไหร่
ภาพที่ได้ก็จะเหมือนจริงมากขึ้นเท่านั้น)

ฟอร์แมต PNG
- ฟอร์แมต Portable Network Graphics (PNNG) ใช้การบีบอัดแบบ losslessly
และใช้แสดงภาพบน World Wide Web
- บีบอัดข้อมูลได้ดีกว่า GIF 20-30 เปอร์เซ็นต์ ไม่เสียข้อมูลเหมือนกับแบบ JPEG
- สามารถเลือกการจัดเก็บข้อมูลได้ทั้งแบบบ 8 บิต 24 บิต และ 32 บิต ต่างกับ .GIF
- ถูกพัฒนาโดย Thomas Boutell และ Tom Laane วัตถุประสงค์ เพื่อการ
ทำงานข้ามระบบเพราะมีการจัดเก็บข้อมูลเกี่ยวกับลักษณะเครื่อง ทำให้สามารถ
แสดงผลได้อย่างถูกต้องกับเครื่องทุกระบบ
- แสดงผลได้เร็วกว่าแบบ .GIF เพราะภาพใน .GIF จะเริ่มแสดงผลเมื่อดาวน์โหลด
ข้อมูลมาได้ 1 ใน 18 ส่วน ขณะที่ PNG เริ่มแสดงผลเมื่อข้อมูลถูกโหลดเข้ามา
1 ใน 64 ส่วน
- สนับสนุนการทำงานกับภาพโปร่งใส
- ในบาง Web Browser version เก่าๆ จะยังไม่สนับสนุนการแสดงผลแบบ PNG
- ฟอร์แมต PNG สนับสนุนการแสดงผลแบบ grayyscale และ RGB color mode
แบบ single alpha channel และแบบ indexed-color modes
- ฟอร์แมต PNG ใช้การบันทึกข้อมูลแบบ alphha channel ในการบันทึกข้อมูล
แบบโปร่งใส

2. ลักษณะการนำไปใช้งาน
หลักการโดยทั่วไปสำหรับการเลือกใช้ คือ
- ใช้ .JPEG สำหรับภาพถ่าย หรือภาพวาดที่มีจำนวนสีมากๆ
- ใช้ .GIF หรือ .PNG-8 สำหรับภาพที่มีลักษณะเป็นลายเส้นหรือภาพที่ต้องการสร้าง
เป็นภาพโปร่งใส เช่น ภาพการ์ตูน
- ใช้ .PNG-24 สำหรับภาพถ่ายที่ต้องการให้มีลักษณะโปร่งแสงแต่ไฟล์ที่ได้หลังการ
บีบอัด จะมีขนาดใหญ่กว่าไฟล์ JPEG และมีคุณภาพมากกว่าไฟล์ JPEG
- ในการแสดงผลแบบ online เช่น การแสดงผลบน World Wide Web
รูปภาพแบบ JPEG จะให้โทนสีที่ต่อเนื่อง และแฟ้มข้อมูลมีขนาดเล็ก แต่ถ้าภาพนั้น
เป็นแบบลายเส้น หรือต้องการภาพแบบโปร่งใส ก็ควรใช้ฟอร์แมต GIF จะดีกว่า
- การบันทึกภาพแบบโปร่งแสง นิยมบันทึกให้เป็นฟอร์แมต GIF และ PNG โดย GIF
จะเก็บข้อมูลแบบ indexed-color และ RGB ส่วน PNG เก็บแบบ indexed-color
- ฟอร์แมต PNG-24 จัดเก็บข้อมูลแบบ 24 บิต เหมือนฟอร์แมต JPEG
- PNG-24 ให้ผลในวงกว้าง และให้รายละเอียดที่หลากหลายในส่วนของแสงและ
hue ของภาพ
- ให้ความคมชัดเหมาะกับการแสดงผลที่เป็น ลายเส้น, logos และภาพประกอบที่แสดง
ถึงชนิดของรูปภาพ
- PNG-24 ใช้การบีบอัดแบบ lossless เหมือนกับฟอร์แมต PNG-8 ซึ่งจะทำให้ข้อมูล
ไม่สูญเสียไปในการบีบอัด และเหตุผลนี้เองทำให้ PNG-24 เป็นที่นิยมมากกว่า JPEG
ที่ให้ผลของภาพเหมือนกันแต่ต้องสูญเสียข้อมูลของภาพไป
- ความสามารถในการแสดงภาพโปร่งแสง
- สนับสนุนการทำงานแบบ multilevel transpparency แต่ก็ยังไม่ support
ในทุกๆ Browser

3. เครื่องมือที่ใช้ในการสร้างภาพ
เครื่องมือที่ใช้มีอยู่หลายโปรแกรมด้วยกัน เช่น
- Adobe Photoshop
- Macromedia Flash
- Paint Shop
- Illustrator

4. ตัวอย่างภาพ

CS.GIF
CS.JPG
CS.PNG

>> www.oocities.org/yodole2001/work4image.com

รู ปด้านซ้ายเป็นตัวอย่างการบีบอัดภาพให้เป็น .GIF เป็น transparency 256 สี
ค่า Dither กำหนดให้เป็น Pattern และเลือก options เป็นแบบ interlaced
เมื่อบีบอัดแล้วจะได้ไฟล์ที่มีขนาด 20k

รู ปตรงกลางเป็นตัวอย่างการบีบอัดภาพให้เป็น .JPG/JPEG และ set quality
เป็น 5 Medium เลือก options เป็น Baseline("Standard")
เมื่อบีบอัดแล้วจะได้ไฟล์ที่มีขนาด 10k

รู ปด้านขวาเป็นตัวอย่างการบีบอัดภาพให้เป็น .PNG และ set interlace เป็น
Adam7, set filter เป็น Up เมื่อบีบอัดแล้วจะได้ไฟล์ที่มีขนาด 42k

จ ะเห็นว่าจากรูปภาพเดียวกัน มีขนาดของภาพเท่ากัน แต่มีการบีบอัดภาพคนละแบบ
ก็จะให้ขนาดของไฟล์ไม่เท่ากันด้วยตามคุณลักษณะเฉพาะของรูปแบบนั้นๆ