Blog tips เก็บ ๆ เค้ามา #8 ภาพกับนามสกุล

---

เรื่องของภาพ

---

นามสกุลของภาพ

ก่อนที่เราจะเริ่มการแทรกภาพเข้าไปในหน้า blog มารู้จักนามสกุลของภาพกันก่อนครับ





GIF

---

GIF หรือ Graphics Interchange Format คือ การเก็บข้อมูลภาพในรูปที่ขนาดเล็ก GIF เป็นที่นิยมสูงมาก โดยใช้ในกรณีของภาพขนาดเล็ก เช่น icon หรือแผนภูมิ หรืแแม้แต่ภาพที่มีจำนวนสีไม่มาก หรือสีเดียวได้โดย loss-less คือไม่มัว หรือไม่มีการเบลอ เทคนิคที่ใช้ในการบีบอัดข้อมูลเรียกว่า LZW compression โดยกลไกคือหาว่า pixels ใดที่มีรูปแบบซ้ำ ๆ กัน ซึ่งจะไม่ลดคุณภาพของภาพ

ตามปกติ จะจำกัดขนาดของสีสูงสุดที่ 256 สี (หรือเรียก 8 bit = 2⁸)ทำให้ภาพนั้นมีความสวยสดสมจริงน้อย แต่ก็สามารถใช้กลวิธีที่เรียกกันว่า Dither คือผสมสีพื้น ๆ สองสีให้ได้สีที่ใกล้เคียงกับสีต้นฉบับครับ แต่ไม่สวยเท่าไหร่หรอก

นอกจากนี้ยังทำเป็นภาพเคลื่อนไหว file animated ได้ด้วย จำพวก banner โค-สะ-นา นั่นล่ะ แล้วยังเลือกสีให้โปร่งแสง (transparency) ได้ด้วย (single-bit transparency) เช่น เหม็นหน้าสีม่วงมาก ลบซะ ตรงที่เคยเป็นสีม่วงจะหายไปเกิดช่องใส ๆ ใน pixels ที่เดิมเป็นสีม่วงซะ ก็จะทำให้มองทะลุไปยัง background ของ blog หรือของ page นั้น ๆ ได้น่ะเองครับ

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





JPEG

---

JPEG หรือ Joint Photographic Experts Group บ้างก็เรียก JPG เฉย ๆ ครับ กลุ่มนี้จะสีสันสดใสกว่า ด้วยว่าแบ่งเฉดสีได้ถึง 16 bit ดีเดียว การเก็บข้อมูลนี้เพื่อให้รูปถ่ายสีสดสมจริงโดยไม่ต้องอาศัยวิธี Dither เลยครับ ทำให้มีการผสมฉีดเฉดต่าง ๆ ได้กลมกลืนทีเดียว

หลักการบีดอัดนั้นค่อนข้างซับซ้อน หลักการบียอัดก็ง่าย ๆ โดยทำเป็นเลือกไม่จำรายละเอียดของภาพ โดยจะสามารถเลือกเป็นระดับได้ เช่น ถ้าเลือก 0% compression คือ ไม่บีบอัดเลย ภาพจะคมชัดเท่าต้นฉบับ ถ้า compression มาก ๆ ก็จะไม่ชัดเลยเพราะว่ารายละเอียดหายเหี้ยน ว่างั้น แต่ว่าถ้าไม่บีบอัดเลยก็จะมีขนาด file ใหญ่มาก ดังนั้นแล้วจึงพบว่าการบีบอัดข้อมูลที่ 60% นั้นให้ผลลัพธ์สมดุลครับ คือ ไม่ใหญ่และไม่มัว

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

ตอนนี้เค้ามีระบบ JPEG (อ่าน เจ-เปก) แล้ว นัยว่าสวยดีขึ้นครับ






PNG

---

Portble Network Graphics เป็นระบบบีบอัดข้อมูลที่มาแทนที่ gif เนื่องจากแต่ก่อนมันเป็นลิขสิทธิ์ เก็บตังค์ด้วย (ตอนนี้หมดอายุไปแระ ใช้ได้ฟรีครับ) แต่ถึงตอนนี้ก็ยังมีการพัฒนา PNG (อ่านว่า ปิง) ต่อไปจนดีกว่า gif เกือบทุกด้านครับ

แต่ก่อนนี้ PNG-8 ก็มี 256 สีเท่ากับ GIF รวมทั้งมี 1 bit transparency ด้วย แต่พบว่าขนาด file เล็กกว่าเพราะการบีบอัดข้อมูลมันดีกว่า

ต่อมา PNG-24 ก็เข้ามาตีตลาดโดยมีสี 24 bit ครับ คราวนี้สีสรรบรรเจิดเท่า JPG เลยละครับ เลยอาจจะกลายเป็นตัวแทน JPG ซะแล้ว แต่ว่ามันดันมีมีระบบบีบอัดข้อมูลแบบ loss-less ด้วยทำให้ขนาดภาพใหญ่กว่าการเก็บด้วยระบบ JPG ครับ

PNG เริ่มมีการใช้ alpha-channels ซึ่งตามปกติหากเราจะทำให้สีใดโปร่งใส (transparency) ก็อาจให้ผลเป็นสีโปร่งหรือทึบก็ได้ แต่ว่าระบบนี้ทำให้กำหนดได้ว่า สีใดใน 0-255 สีที่จะกำหนดให้กลาย transparency ได้โดยถ้าหากว่า 0 ก็ใสมาก ถ้า 255 ก็ออกทึบมาก เลยทำให้มีผลแบบเห็นลาง ๆ เหมือนกับเห็นภาพวิญญานได้ครับ [เทียบน่ากลัวไปไหมเนี่ย...(-"- ) ] ปัญหาก็คือ IE 6 หรือ internet explorer 6 ของเราไม่หนับหนุน alpha channels ครับ ถ้า IE รุ่นใหม่ออกมาล่ะก็...

สำหรับการทำภาพเคลื่อนไหวด้วย PNG นั้นสามารถทำได้โดยใช้ระบบ MNG (Multi-image PNG) ซึ่งตอนนี้ส่วนใหญ่ browser ยังไม่ค่อยสนับสนุนระบบนี้น่ะครับ


สำหรับระบบอื่น ๆ นั้นไม่เป็นที่นิยมในการนำมาสร้างในหน้า web และ blog ครับ เช่น .tiff .bmp .pxr เพราะฉะนั้น วันหลังค่อยอ่านมาเล่าอีกทีนะครับ

^{[สมุดเยี่ยม]}

---

Create Date : 05 มิถุนายน 2548 Last Update : 2 ธันวาคม 2549 22:58:00 น. Counter : 1561 Pageviews.		5 comments
Share Tweet

	ขอแนะนำให้รู้จัก ผู้ชายที่ทำให้เราปันใจจากคนข้างกาย กลายมาเป็นติ่งซีรีส์ blue_medsai (12 ม.ค. 2564 10:23:37 น.)		👫♥ ค่อยๆเดิน ♥👫 โอน่าจอมซ่าส์ (9 ม.ค. 2564 11:14:09 น.)
	ท่ายืดเหยียดกล้ามเนื้อหลังวิ่ง The Kop Civil (4 ม.ค. 2564 21:15:48 น.)		✿ ✿ Food For Fun :: Hot Wok Return #55 :: อาหารผู้สูงวัย "แกงจืดผักกาดขาวม้วนไส้หมูสับ" ✿ ✿ เนินน้ำ (12 ม.ค. 2564 08:30:50 น.)