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 29 comments Last Update : 15 มีนาคม 2548 0:00:26 น. Counter : 1938 Pageviews. Share Tweet

มาติดตาม และรอตอนต่อไปค่า ...   โดย: ขอบคุณที่รักกัน (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 น.