ผล งาน ที่ แท้ จริง — ตั้ง แต่ แคน วาส เฟรม ไป จน ถึง การ บีบ คั้น ของ แอล ซี ดับเบิล ยู

เหตุ ผล ที่ ยัง มี อยู่

The Prographics Intergraphy ได้ถูกสร้างโดย Compu Server ในปี 1987[Compu Server, 1987]. มันรองรับแอนิเมชัน, ความโปร่งใส, และการบีบอัดแบบไร้การสูญเสีย. มี การ จํากัด สี เฉพาะ ขนาด 256 สี ต่อ กรอบ. มันไม่มีเสียง. มันผลิตไฟล์ขนาดใหญ่. ด้วยทุกมาตรการทางเทคนิค มันควรจะถูกแทนที่เมื่อหลายทศวรรษก่อน.

และยัง: Discord, Slack, iffic, Twitter, Reddiat, และอีเมลทั้งหมดสนับสนุน GIFs พื้นเมือง. GIFFY ทําหน้าที่มากกว่า 10 พันล้าน GIFS ต่อวัน [กิตติคุณ 2020]. รูปแบบยังคงเนื่องจากมันใช้ได้ทุกที่ ไม่ต้องใช้รหัสรหัส และเล่นโดยอัตโนมัติ. ไม่มีรูปแบบอื่นใด ที่มีการรวมกันของการรองรับสากลและการเล่นเพลงที่เป็นศูนย์.

การ เข้าใจ วิธี ทํา งาน ของ จี เอฟ ไอ มี ประโยชน์ มาก กว่า การ ใช้ ไตร เวีย — มันอธิบายว่าทําไม GIF ของคุณถึงเป็น 4 MB, ทําไมเกรเดียนส์จึงดูเป็นวง, และคุณสามารถทําอะไรกับมันได้.

ขั้นที่ 1: จับภาพเฟรมภาพ

ภาพเคลื่อนไหว GIF เป็นลําดับของรูปภาพ (กรอบ) ที่แสดงตามลําดับด้วยการหน่วงเวลาระหว่างภาพแต่ละภาพ. เพื่อที่จะสร้างแอนิเมชันจากผ้าใบ คุณต้องจับภาพสถานะผ้าใบ ในช่วงปกติ.

ในเว็บเบราว์เซอร์นี้หมายถึงการอ่านข้อมูลพิกเซลจากองค์ประกอบ HTML <canvas> ที่แต่ละเฟรม — โดยปกติจะเป็น canvas.toDataURL() หรือ ctx.getImageData(). แอนิเมชันจะก้าวหน้าไปจนถึงเวลาเป้าหมาย ผ้าใบจะถูกแปล และพิกเซลจะถูกบันทึก. เงื่อนไขกุญแจ: คุณต้องรอวงจรสีของเบราว์เซอร์ (requestAnimationFrame) ก่อนในการอ่านค่าพิกเซล มิฉะนั้นคุณจะจับภาพบัฟเฟอร์แบบท็อด.

GIF ทั่ว ๆ ไปที่ 15 FPS สําหรับ 3 วินาที ต้องการการดักจับเฟรม 45 อัน. 1080×1080 มติ แต่ละเฟรมมีประมาณ 4.7 ล้านพิกเซล.

ขั้นที่ 2: การปรับความเข้มสี

GIF รองรับค่าสูงสุดของ 256 สีต่อเฟรม โดยเก็บไว้ในตารางสี (พาเลต). โครง ผ้า ทั่ว ไป มี สี หลาก หลาย พัน สี. การนํามายัง 256 โดยไม่ปรากฏความเสื่อมโทรมเป็นส่วนที่ยากที่สุดของรหัส GIF.

วิธีการมาตรฐานคือ "อัลกอริทึมการตัดแบบกลาง" (Heckbert, 1982): จัดเรียงพิกเซลทั้งหมดโดยช่องสีแดงที่สุดของพวกเขา แบ่งรายการที่มัธยฐานซ้ํากับสีเขียวและสีน้ําเงิน แบ่งพื้นที่สีซ้ําเป็น 256 พื้นที่. ค่าเฉลี่ยของแต่ละภูมิภาค กลายเป็นค่าจานสี. นี่ คือ สิ่ง ที่ กิฟ ห้อง สมุด PinePaper ใช้ — offics in Web Work Work Works for Languages [Rubaxa, gif.js].

การปรับสีคือสาเหตุที่ GIFs ใช้กราฟฟิกสีแบนๆ ได้ดี แต่ต้องต่อสู้กับภาพถ่ายและเกรเดียน. เกรเดียนข้าม 1080 พิกเซลอาจจะใช้ 500 + สีที่แตกต่างกัน. การ บีบ จน ถึง 256 ทํา ให้ เกิด วง แหวน ที่ มอง เห็น ได้ — ขั้นที่ต่อเนื่องที่เกรเดียนควรจะเรียบ.

สิ่งที่คุณสามารถทําได้เกี่ยวกับมัน: ใช้ สี น้อย กว่า ใน แบบ ของ คุณ. รูปทรงแบน, เติมเต็มของแข็ง, และอักษรควอนตัมได้ดี. ความโปร่งใสและพื้นผิวภาพไม่. ถ้า GIF ของคุณมีแถบ จัดรูปจานสีไม่ได้.

ขั้นที่ 3: การบีบอัดแบบ LZW

พิกเซลของแต่ละเฟรม (ตรงกับ 256 สีจานสี) กําลังบีบอัดโดยใช้ Lampel-Ziv-Welch (LZW) บีบข้อมูล [Wlch, 1984]. LZW สร้างพจนานุกรมของลําดับที่ซ้ําไปซ้ํามา ในขณะที่มันสแกนข้อมูล. เมื่อมันพบลําดับที่มันเคยเห็นมาก่อน มันจะแสดงดัชนีของพจนานุกรมแทนข้อมูลดิบ.

นี่หมายความว่า การบีบ GIF จะมีประสิทธิภาพมากที่สุดเมื่อมีพื้นที่ขนาดใหญ่ของสีซ้ํากัน — ภูมิหลังแข็ง รูปร่างแบน ข้อความบนพื้นผิวแบบเดียวกัน. พื้นผิวคอมโพเน็กซ์ที่มีความแปรผันของหน่วยพิกเซล ทําให้เกิดอัตราส่วนการบีบข้อมูลยากจน เพราะพจนานุกรมของ LZW พบลําดับที่ซ้ํากันไม่กี่ลําดับ.

ความหมายเชิงประจักษ์: 1080x1080 GIF ของข้อความสีขาวบนพื้นหลังสีดํา อาจบีบอัดเป็น 200KB. มติเดียวกัน GIF ของภาพถ่ายที่ซับซ้อน อาจเป็น 8 MB. ขนาดแฟ้มจะขึ้นอยู่กับความซับซ้อนของภาพ มากกว่าค่าความละเอียดหรือจํานวนเฟรม.

ขั้น ที่ 4: กรอบ ต่าง ๆ และ การ มอง ใน แง่ ดี

เฟรมภาพ GIF สามารถกําหนดวิธีการ ~ diposial type *: จะล้างผ้าใบก่อนจะวาดเฟรมถัดไปหรือไม่, ให้แสดงกรอบก่อนหน้านี้, หรือเรียกคืนกลับไปเป็นพื้นหลัง. โปรแกรมเข้ารหัส GIF สมาร์ท ใช้โปรแกรมต่าง ๆ กัน การเข้ารหัสเฉพาะพิกเซลที่เปลี่ยนไประหว่างเฟรม ไม่ใช่ทั้งเฟรม.

หากภาพเคลื่อนไหวของคุณมีพื้นหลังคงที่ที่มีองค์ประกอบการเคลื่อนย้ายขนาดเล็ก, GIF ที่ปรับแต่งให้เข้ารหัสพื้นหลังครั้งเดียวและเพียง แต่การปรับปรุงพื้นที่ที่ธาตุย้าย. นี่จะช่วยลดขนาดแฟ้มได้อย่างมาก. ตัวเข้ารหัส PinePaper ใช้คําสั่ง gif.js เพื่อปรับใช้ค่าดีที่สุดนี้โดยอัตโนมัติ.

ตัวเลข

สําหรับแอนิเมชัน PinePaper ทั่วไป (1080×1080, 15 FPS, 3 วินาที, พื้นหลังสีดําด้วยข้อความเคลื่อนไหว):

ส่วนประกอบ	ขนาด
เฟรม Raw (45 × 4. 7M พิกเซล x 3 ไบต์)	~634 MB
256 สี 1 byte/พิกเซล)	~211 MB
หลังการบีบอัด LZW	~2-4 MB
ใช้เฟรมต่างกัน	~1-2 MB

อัตราการบีบอัดจากดิบถึงปลายมีประมาณ 300:1 ต่อ 600:1. ส่วนมากมาจากควอนตัมสี (3:1) และ LZW (50:1 ถึง 100:1).

คลิกผ่านสี่ขั้นตอน. วาดแท่งกับขนาดดิบบนหนึ่ง มาตรา เชิงเส้น ดัง นั้น จาก สอง ขั้น สุด ท้าย มัน จึง เป็น เส้น ผม — นั่นไม่ใช่ การพิสูจน์ความผิด นั่นคือ 300:1.

เมื่อใช้รูปแบบอื่น ๆ ของ PPGXX

รูปแบบ	ดีที่สุด	จํากัด
GIF	รองรับระบบ, เล่นอัตโนมัติ, แอพพลิเคชันแบบพาเนล	256 สี, แฟ้มขนาดใหญ่, ไม่มีเสียง
WebM (VP9)	คุณภาพสูงสุด, แฟ้มที่น้อยที่สุด, web	การ เกื้อ หนุน ที่ มี จํากัด ใน เมือง ซาฟารี
MP4 (H.264)	สื่อสังคม, เครื่องเล่นวิดีโอ	ต้องการ codec, ไม่มีการโปร่งใส
ภาษาเอแปงNAME	ภาพเคลื่อนไหวด้วยสีเต็มรูปแบบ	การรองรับแบบจํากัดในเบราว์เซอร์รุ่นเก่า

GIF เป็นตัวเลือกที่ถูกต้อง เมื่อคุณต้องการความเข้ากันได้ของสากลและการเล่นอัตโนมัติ. สําหรับคุณภาพหรือขนาดแฟ้ม WebM หรือ MP4 จะดีกว่า.

ลองสิ

เปิด [PinePaper Studio] (Zqqz) สร้างการออกแบบ และส่งออกเป็น GIF. สังเกตว่าขนาดแฟ้มเปลี่ยนไปอย่างไร

• เพิ่มจํานวนเฟรมภาพ (เพิ่มเฟรม =แฟ้มใหญ่, สัดส่วน)
• เพิ่มเกรเดียน (การแทนที่แบบจน=แฟ้มขนาดใหญ่)
• ใช้สีทึบ (ความกว้างดี = แฟ้มที่เล็กกว่า)
• เพิ่มขนาดผ้าใบ (เป็นพิกเซลต่อเฟรม = แฟ้มที่มีขนาดใหญ่)

แต่ละการเปลี่ยนแปลงเป็นการวัด ของท่อบีบอัด. คุณไม่ได้แค่สร้าง GIF — คุณกําลังสังเกตทฤษฎีข้อมูล ที่ใช้กับการออกแบบของคุณ.

อ้างอิง

• Compu Server (1987). กราฟิกรูปแบบการเปลี่ยนรูปแบบ, รุ่น 87a.
• GRAPHY (2020). GIFFY รายงานประจําปี: 10 พันล้านบาทเดลี่ให้บริการ.
• เฮ คเบิร์ต, พี. (1982). การปรับคุณภาพของภาพสีสําหรับการแสดงผลเฟรมบัฟเฟอร์. (SIGRAPH) * 16(3), 297-307.
• รูบาซ่า. กิฟ เจส์ — โปรแกรมเข้ารหัส GIF โดยใช้เว็บ. github.com/jordberg/gif.js.
• เวลช์ ทีเอ. (1984). เทคโนโลยีสําหรับบีบอัดข้อมูลระดับสูง. ♪EEE คอมพิวเตอร์* 17(6), 8-19.

---

PinePaper ส่งออก GIF ฟรี — ไม่มีลายน้ํา ไม่มีการลงชื่อ. เปิด [กระดาษพินินทร์/edio/editor] (/editor) และส่งออกแอนิเมชันแรกของคุณ.