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

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

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

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

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

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

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

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

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

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

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

วิธีการมาตรฐานคือ "อัลกอริทึมการตัดแบบกลาง" (Heckbert, 1982): จัดเรียงพิกเซลทั้งหมดโดยช่องสีแดงที่สุดของพวกเขา แบ่งรายการที่มัธยฐานซ้ํากับสีเขียวและสีน้ําเงิน แบ่งพื้นที่สีซ้ําเป็น 256 พื้นที่ ค่าเฉลี่ยของแต่ละภูมิภาค กลายเป็นค่าจานสี นี่ คือ สิ่ง ที่ กิฟ.js — ห้อง สมุด PinePaper ใช้ — เครื่อง มือ ใน เว็บไซต์ ผู้ ทํา งาน เพื่อ ความ คล้ายคลึง กัน [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 scool *: จะล้างผ้าใบก่อนจะวาดเฟรมถัดไปหรือไม่, ให้เห็นเฟรมภาพก่อนหน้า, หรือเรียกคืนค่าเดิมไปยัง ภูมิหลัง สมาร์ท 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).

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

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

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

ลองสิ

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

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

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

อ้างอิง

• Compu Server (1987). กราฟิกรูปแบบการเปลี่ยนรูปแบบ, รุ่น 87a.
• Graphy (2020). GIFFY รายงานประจําปี: 10 พันล้านบาทเดลี่ให้บริการ.
• Hookbert, P. (1982). การปรับคุณภาพของภาพสีสําหรับการแสดงผลเฟรมบัฟเฟอร์ (Computer Pictures) *, 16(3), 297-307.
• Rubaxa. gif.js — จาวาสคริปต์ GIF ตัวเข้ารหัสโดยใช้ workers Github.com/Jordberg/gif.js.
• Welch, T.A. (1984). เทคนิกสําหรับบีบอัดข้อมูลระดับสูง.

---

PinePaper. การส่งออก GIF ของ PPEG1X นั้นฟรี — ไม่มีเครื่องหมายน้ํา, ไม่มีการเซ็น เปิด เอกสาร Pine. studiod/editor และส่งออกแอนิเมชันแรกของคุณ.