Bloggang.com : กึ่งยิงกึ่งผ่าน : JPG vs. GIF (ตอนที่ 2)

JPG vs. GIF (ตอนที่ 2)

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

มากันคราวนี้เรามาพูดถึงไฟล์ภาพอีกแบบหนึ่งที่เราเห็นกันมากไม่น้อยไปกว่า JPG นั่นก็คือ GIF นั่นเอง

GIF ย่อมาจากคำว่า Graphic Interchange Format ซึ่งจะใช้หลักการเก็บภาพค่อนข้างแตกต่างกับ JPG นั่นคือ GIF จะเก็บภาพโดยมองเรื่อง "สี" เป็นหลัก และเก็บเป็น 8 bit ซึ่งนั่นทำให้จำนวนสีที่มากที่สุดที่ GIF เก็บได้จะมีเพียง 256 สีเท่านั้น ที่สีที่ว่านี้จะเป็นอัตราส่วนกันคือ 2, 4, 8, 16, 32, 64, 128, 256 (2 ยกกำลัง 1 ถึง 8) ซึ่งเราจะเรียกตรงนี้ว่า "จานสี" หรือ Pallete

แต่ .. สีเพียงเท่านี้ก็เหมาะกับลักษณะของภาพบางอย่าง เช่นภาพเล็กๆ น้อยๆ จุ๊กจิ๊กๆ ที่เห็นกันทั่วไปบนเว็บ และที่สำคัญที่ GIF ทำได้แต่ JPG ทำไม่ได้นั่นคือ การมองทะลุ (Transparent) และเป็นภาพเคลื่อนไหว (Animation)

การเก็บภาพของ GIF จะเป็นแบบ Lossless แปลว่า "ไม่สูญเสีย" ซึ่งต่างจาก JPG ที่เป็นแบบ Lossy คือ "สูญเสีย" ที่เป็นอย่างนี้ก็เพราะว่า GIF มองข้อมูลของภาพเป็น "สี" จึงจะจำตำแหน่งต่างๆ ว่าใช้สีอะไร และทำการเก็บข้อมูลทุกบิต โดยไม่มีการตัดทอนออกเหมือนอย่าง JPG ซึ่งการเก็บแบบนี้ เป็นการ compress ภาพในรูปแบบของ LWZ (Lempel Zev Welch ... น่าจะเป็นชื่อคนนะ)
มีพี่ที่มีความชำนาญแนะนำเพิ่มเติมว่า Lossless อย่างแท้จริง ที่ไม่มีการสูญเสียบิตของข้อมูลนั้น ต้องมีจำนวนสีเป็น 8 bit (256) สีเท่ากันกับต้นฉบับ ถ้าเกินกว่านั้น จำนวนสีจะพร่องลงมาตามจำนวนสีของ palette .. ขอบคุณพี่ LTG ครับ

นอกจากนี้ GIF ยังมีลักษณะพิเศษที่เรียกว่า Interlaced GIF อีกด้วย ซึ่งนี่คือการ "ค่อยๆ แสดงภาพเมื่อยังโหลดไม่หมด"

นี่คือตัวอย่างภาพที่ทำการ Interlace .. ภาพจะค่อยๆ ชัดทีละนิดๆๆๆ

ถ้าดูไม่ทันเห็นการ interlace ก็ลอง refresh ดูนะครับ

การทำ Interlace นี้ เหมาะกับภาพ GIF ที่มีขนาดใหญ่ เพราะจะค่อยๆ แสดงภาพให้เห็นทั้งภาพ แล้วค่อยๆ ชัดขึ้นทีละน้อย (ต่างจาก JPG ที่แสดงทีละเส้นจากบนลงล่าง ไม่ได้เห็นทั้งหมด) ดังนั้นการทำ Interlace จึงไม่เหมาะกับภาพ GIF ที่มีขนาดเล็กๆ เพราะยิ่งเล็ก ยิ่งโหลดเร็ว ก็ไม่มีความจำเป็นต้องทำการ Interlace (เพราะการทำ Interlace จะต้องเพิ่มเนื้อที่อีกนิดหน่อยนั่นเอง)

สำหรับที่กล่าวมาข้างบน เป็น GIF เวอร์ชั่นที่ 87a และได้มีเวอร์ชั่นหลังจากนั้นมา ซึ่งก็คือ 89a ซึ่งเวอร์ชั่นหลังนี้มีคุณสมบัติที่เท่มากอย่างหนึ่งอย่างที่ได้บอกไปแล้วคือ "มองทะลุได้" .. ซีทรู .. หวิวๆ

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

สีปกติที่ให้มองทะลุผ่าน

กำหนดสีเขียวให้มองทะลุ

กำหนดสีฟ้าให้มองทะลุ

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

ตัวอย่าง GIF ที่เป็นภาพเคลื่อนไหวครับ

แล้วมาพบกันใหม่กับเรื่องอื่นๆ นะครับ
(เอ๊ะ รู้สึกจะมีคนขอ TIFF , PNG อะไรอยู่น๊าาาา)

Create Date : 07 มีนาคม 2548

Last Update : 15 มีนาคม 2548 0:00:26 น.

29 comments

Counter : 1723 Pageviews.

มาติดตาม และรอตอนต่อไปค่า ...

โดย: ขอบคุณที่รักกัน (blueberry_cpie

) วันที่: 7 มีนาคม 2548 เวลา:6:36:39 น.

แวะมาอ่านครับ มือใหม่หัดเล่นกราฟิกครับ
รอตอนต่อไปนะครับ

โดย: Revenge of the Xzelder. (xzelder

) วันที่: 7 มีนาคม 2548 เวลา:8:04:31 น.

โย่ว!!

=)

โดย: ฮัน (hunjang

) วันที่: 7 มีนาคม 2548 เวลา:8:22:05 น.

จ้องไอ้รูปสุดท้ายมาตั้งนานแล้ว ไม่เห็นมานขยับซะทีง่ะ

โดย: หมาร่าหมาหรอด

วันที่: 7 มีนาคม 2548 เวลา:9:19:20 น.

หงะ มาเปิดกระโหลก

โดย: Together In 80s Dream

วันที่: 7 มีนาคม 2548 เวลา:11:51:31 น.

ขอบคุณค๊าสำหรับคำแนะนำดี ๆ

มีความรู้ใหม่อีก 1 เรื่องแล้ว เย๊

โดย: น.ส.มารร้าย

วันที่: 7 มีนาคม 2548 เวลา:13:23:27 น.

ได้ความรู้ดีจังค่ะ : )

เอ่อ....เห็นร้าน ชาโคลเกรย์ แล้วคิดถึง ไม่ได้ไปนานมากแล้ว

โดย: มัชฌิมา

วันที่: 7 มีนาคม 2548 เวลา:14:09:26 น.

เอามาเสริมคุณกึ่งยิงกึ่งผ่านครับ

สีที่เลือกแล้ว สามารถมองทะลุได้ เรียกว่า key color เป็นสิ่งสำคัญในการทำเกมสองมิติด้วย

compression นั้นมีสองแบบตามที่คุณกึ่งกล่าวมา
โดยส่วนมาก lossy นั้นจะใช้กับข้อมูลที่ฝ่ายรับเป็นมนุษย์ เช่น ภาพ เสียง วิดิโอ ข้อมูลพวกนี้ แม้ผิดไปสามหรือสี่บิต ก็ไม่เป้นไร เพราะยังดูรู้ว่าเป็นอะไร
ส่วนพวก lossless นั้น ส่วนมากเป็นข้อมูลที่ฝ่ายรับเป็นคอมพิวเตอร์ เช่น ไฟล์ในเวิด.doc ถ้าผิดไปแม้แต่บิตเดียว คอมพิวเตอร์ก็ไม่สามารถเอากลับขึ้นมาอ่านได้

พูดถึง LWZ แล้ว ก็มีเรื่องตลกของ Huffman ด้วย (Huffman เป็น compression อีกแบบหนึ่ง)
ตอนนั้น Huffman เป็นนักศึกษาอยู่ใร มหาวิทยาลัย(ชื่อไรจำไม่ได้แล้ว) อาจารย์มาบอกว่า ครูจะให้เธอเลือกระหว่าง สอบไฟนอล กับทำเปเปอร์ชิ้นหนึ่ง เลือกเอา
และHuffman ก็เลือกทำเปเปอร์
ผลเปเปอร์ที่ออกมา คือ Huffman คิดอัลกอริทึ่ม ที่บีบอีกได้ดีกว่าของอาจารย์ของHuffman เสียอีก

และที่ร้ายไปกว่านั้น Huffman เอาอัลกอริทึ่มของอาจารย์ มาโมดิฟาย เท่านั้นเอง
ฮ่าๆๆๆๆ

เอามาแลกเปลี่ยนครับ คุณกึ่ง

โดย: ทายาท

วันที่: 7 มีนาคม 2548 เวลา:15:14:25 น.

แวะมาเก็บความรู้แถวๆ นี้ฮับ

โดย: Nessa

วันที่: 7 มีนาคม 2548 เวลา:15:52:32 น.

มาเก็บความรู้เช่นกันค่า

โดย: THE BEGINNING

วันที่: 7 มีนาคม 2548 เวลา:18:03:49 น.

เข้ามาเรียนรู้ค่ะ

โดย: ปุ้ม หญิง

วันที่: 7 มีนาคม 2548 เวลา:19:37:29 น.

มีภาพอีกหลายแบบเลยนิ จะอธิบายไหวไหมเนี้ย อิอิ

โดย: MooG.G

วันที่: 7 มีนาคม 2548 เวลา:19:55:19 น.

เข้ามาเก็บความรู้เหมือนกันค่ะ ~*

แต่เอ.....คนในรูปที่เล่นดนตรีอ้ะ ใช่พี่เวอร์รึ

ป่าวคะ อิ อิ

โดย: เปิ้ล (Mu_in_love

) วันที่: 7 มีนาคม 2548 เวลา:20:09:49 น.

มาแอบอ่าน

โดย: รำเพย

วันที่: 7 มีนาคม 2548 เวลา:20:12:00 น.

กึ่งยิงกึ่งผ่าน say :
ขอบคุณคุณทายาทนะครับ ที่มาช่วยเสริมข้อมูลกันครับ เยี่ยมเลยครับ แหะๆๆๆ
ในภาพที่เล่นกีต้าร์ไม่ใช่ผมหรอกครับ เป็นพี่โอม ชาตรี คงสุวรรณ น่ะครับ
วันนั้นไปดูแกเล่นพอดี

โดย: กึ่งยิงกึ่งผ่าน

วันที่: 7 มีนาคม 2548 เวลา:21:01:30 น.

ขอเก็บเกี่ยว ..ด้วยคนครับ

โดย: พัตเตอร์สีเงิน

วันที่: 7 มีนาคม 2548 เวลา:21:13:21 น.

มาเก็บความรู้ค่ะ

โดย: ngomngay

วันที่: 7 มีนาคม 2548 เวลา:22:20:53 น.

เสียใจ ใช้ adsl เลิกเห็นรูปค่อย ๆ ชัดมาครึ่งปีละ มีแต่เห็นแบบชัดพร้อมกันทั้งรูป
ว่ะฮ่ะฮ่ะ

โดย: วี

วันที่: 9 มีนาคม 2548 เวลา:2:23:01 น.

มาทักทายค่ะ
และตามมาเก็บความรู้ด้วยน้า

โดย: zaesun

วันที่: 9 มีนาคม 2548 เวลา:3:40:46 น.

^_^ อ้อ....ม่ะช่ายพี่เวอร์หรอคะ งุงิ

มองมุมนี้ม่ะเหมือนพี่โอมเรยยอ้ะ

วันก่อนนั้นเปิ้ลเจอพี่โอมที่เซ็นทรัล อ้วนกว่านี้

แต่มุมนี้ดูไม่อ้วนเรยย แถมไว้หนวดเคราซะดู

เข้มซ้า

โดย: เปิ้ลMu_in_love (Mu_in_love

) วันที่: 9 มีนาคม 2548 เวลา:22:14:21 น.

เก่งจังเลยค่ะ คุณกึ่งยิงฯ

โดย: ถั่วแดงเย็น

วันที่: 10 มีนาคม 2548 เวลา:15:59:00 น.

เมื่อไหร่จะเขียนอีกละคะ รออ่านอยู่นา

(อิอิอิ....เมื่อไหร่จะได้เขียนน้าาาาา)

โดย: รำเพย

วันที่: 10 มีนาคม 2548 เวลา:19:38:29 น.

จะเอา PNG อ่ะครับ เพราะผมชอบใช้ PNG สีสวยกว่า GIF และถ้าใช้ capture หน้าจอที่เป็น text มา save เป็น PNG ขนาด file มันเล็กมาๆ เล็กกว่า GIF อีก

โดย: panumas05

วันที่: 10 มีนาคม 2548 เวลา:21:32:05 น.

มาขอแอบเรียนวิชาด้วยคนค่ะ

โดย: man u girl

วันที่: 11 มีนาคม 2548 เวลา:23:18:28 น.

ทำไงให้ PNG มันเล็กๆ อ่ะ เรา save ทีไร ใหญ่ทุกที

โดย: nopu.th

วันที่: 13 มีนาคม 2548 เวลา:8:39:43 น.

เปิดหนังสือ ไปเจอฟอร์แมตแบบใหม่ที่เอามาแทน GIF Animation - มันคือ MNG (Multiple-Image Network Graphics) นอกเหนือจาก PNG (Portable Network Graphics) ที่เอามาแทน GIF ธรรมดา

คุณกึ่งช่วยค้นเพิ่มให้หน่อยสิครับ อยากรู้ว่ามันมีดีอย่างไร

โดย: Shelling Ford`

วันที่: 15 มีนาคม 2548 เวลา:11:02:16 น.

เดี๋ยวนี้โหลดเว็บที มาเต็มๆจอเลยค่ะ
ทั้งรูปภาพและตัวอักษร (TvT)
ฮือๆ ดีใจจัง ในที่สุดเน็ตเราก็ไม่ช้าอีกต่อไป(น้ำตาไหลพรากๆๆๆๆ)

โดย: เหอๆ นอกเรื่องนิดนะคะ IP: 58.8.249.190 วันที่: 19 มีนาคม 2548 เวลา:19:33:37 น.

มานั่งเรียน

โดย: ป้ามด

วันที่: 17 เมษายน 2548 เวลา:10:14:36 น.

to be continues ..

Picture Wars
Trilogy

คริๆๆ ขอบคุณมากครับ
จะติดตามตอนต่อไปอย่างใจจดใจจ่อ

ปล. add ซะเลย

โดย: Prof.Sirius

วันที่: 23 เมษายน 2548 เวลา:13:37:34 น.