ถึงเวลาแทนที่ GIF ด้วยวิดีโอ AV1

มันคือปี 2019 และถึงเวลาที่เราตัดสินใจเลือก GIF (ไม่ เราไม่ได้พูดถึงการตัดสินใจครั้งนี้! เราจะไม่มีวันตกลงกันที่นี่! - ที่นี่เรากำลังพูดถึงการออกเสียงเป็นภาษาอังกฤษสำหรับเราไม่เกี่ยวข้อง - ประมาณ การแปล). GIF ใช้พื้นที่จำนวนมาก (ปกติหลายเมกะไบต์!) ซึ่งหากคุณเป็นนักพัฒนาเว็บจะตรงกันข้ามกับความต้องการของคุณโดยสิ้นเชิง! ในฐานะนักพัฒนาเว็บ คุณต้องการลดสิ่งที่ผู้ใช้จำเป็นต้องดาวน์โหลดให้เหลือน้อยที่สุดเพื่อให้ไซต์โหลดได้อย่างรวดเร็ว ด้วยเหตุผลเดียวกัน คุณย่อขนาด JavaScript, ปรับ PNG, JPEG และแปลงเป็นบางครั้ง JPEG เป็น WebP. แต่จะทำอย่างไรกับ GIF เก่า?

เราไม่จำเป็นต้องมี GIF ในที่ที่เรากำลังจะไป!

หากเป้าหมายของคุณคือการปรับปรุงความเร็วในการโหลดไซต์ คุณจะต้องกำจัด GIF! แต่แล้วคุณจะสร้างภาพเคลื่อนไหวได้อย่างไร? คำตอบคือวิดีโอ และในกรณีส่วนใหญ่ คุณจะได้รับคุณภาพที่ดีขึ้นและประหยัดพื้นที่ถึง 50-90%! ในชีวิต สิ่งต่างๆ ส่วนใหญ่มีทั้งข้อดีและข้อเสีย เมื่อคุณแทนที่ GIF ด้วยวิดีโอ บ่อยครั้งคุณจะไม่พบข้อเสียใดๆ

ลง GIF ทั้งหมด!

โชคดีที่การแทนที่ GIF ด้วยวิดีโอเป็นเรื่องปกติในช่วงไม่กี่ปีที่ผ่านมา ดังนั้นเครื่องมือที่จำเป็นทั้งหมดจึงถูกใช้งานอยู่แล้ว ในโพสต์นี้ ฉันจะไม่ประดิษฐ์วงล้อขึ้นมาใหม่ แต่จะปรับปรุงโซลูชันที่มีอยู่เพียงเล็กน้อยเท่านั้น นี่คือส่วนสำคัญ:

1. ถ่าย GIF และแปลงเป็นวิดีโอ
2. เข้ารหัสวิดีโอโดยใช้ H.264 หรือ VP9 เช่น บีบอัดและบรรจุลงในคอนเทนเนอร์ MP4 หรือ WebM
3. แทนที่ <img> โดยเปิด GIF แบบเคลื่อนไหว <video> ด้วยลูกกลิ้ง
4. เปิดการเล่นอัตโนมัติโดยไม่มีเสียงและการวนซ้ำสำหรับเอฟเฟกต์ GIF

Google มีเอกสารที่ดีที่อธิบายกระบวนการนี้

มันคือปี 2019

ตอนนี้ปี 2019 แล้ว ความก้าวหน้าก้าวไปข้างหน้าและเราต้องตามให้ทัน จนถึงตอนนี้ เรามีตัวเลือกตัวแปลงสัญญาณสองตัวเลือกที่ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์และเครื่องมือเข้ารหัสวิดีโอทั้งหมด:

1. H.264 - เปิดตัวในปี 2003 และใช้กันอย่างแพร่หลายที่สุดในปัจจุบัน
2. VP9 - ปรากฏในปี 2013 และได้รับการปรับปรุงการบีบอัดเกือบ 50% เมื่อเทียบกับ H.264 แม้ว่า ขณะที่พวกเขาเขียนที่นี่ ไม่ใช่ทุกอย่างที่ไม่ได้เป็นสีดอกกุหลาบเสมอไป

หมายเหตุ: แม้ว่า H.265 จะเป็นเวอร์ชันถัดไปของ H.264 และสามารถแข่งขันกับ VP9 ได้ แต่ฉันไม่คิดว่าเป็นเพราะการรองรับเบราว์เซอร์ที่ไม่ดีดังที่แสดงในหน้า https://caniuse.com/#feat=hevc. ค่าลิขสิทธิ์เป็นสาเหตุหลักที่ทำให้ H.265 ยังไม่แพร่หลายเท่า H.264 และเหตุใด Alliance of Open Media consortium จึงทำงานร่วมกับตัวแปลงสัญญาณ AV1 ที่ไม่มีค่าลิขสิทธิ์

โปรดจำไว้ว่าเป้าหมายของเราคือการลดขนาด GIF ขนาดใหญ่ให้มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้เพื่อเพิ่มความเร็วในการโหลด คงจะเป็นเรื่องแปลกในปี 2019 ถ้าเราไม่มีมาตรฐานใหม่สำหรับการบีบอัดวิดีโอในคลังแสงของเรา แต่มันมีอยู่จริงและเรียกว่า AV1 ด้วย AV1 คุณสามารถทำได้ ได้รับการปรับปรุงการบีบอัดประมาณ 30% เมื่อเทียบกับ VP9. พูดพล่าม! 🙂

AV1 พร้อมให้บริการคุณตั้งแต่ปี 2019!

บนเดสก์ท็อป

ล่าสุดมีการเพิ่มการสนับสนุนการถอดรหัสวิดีโอ AV1 ในเวอร์ชันเดสก์ท็อป Google Chrome 70 и 65 Mozilla Firefox. ขณะนี้การรองรับ Firefox มีข้อบกพร่องและอาจทำให้เกิดการขัดข้องได้ แต่สิ่งต่างๆ ควรปรับปรุงด้วยการเพิ่ม ตัวถอดรหัส dav1d มีอยู่แล้วใน Firefox 67 (เปิดตัวแล้ว แต่มีการสนับสนุนปรากฏขึ้น - ประมาณ แปล.). สำหรับรายละเอียดเกี่ยวกับเวอร์ชันใหม่อ่าน - dav1d 0.3.0 release: เร็วยิ่งขึ้น!

บนสมาร์ทโฟน

ขณะนี้ไม่มีการรองรับฮาร์ดแวร์สำหรับสมาร์ทโฟนเนื่องจากขาดตัวถอดรหัสที่เหมาะสม คุณสามารถถอดรหัสซอฟต์แวร์ได้ แม้ว่าจะทำให้สิ้นเปลืองแบตเตอรี่มากขึ้นก็ตาม SOC มือถือรุ่นแรกที่รองรับการถอดรหัสฮาร์ดแวร์ AV1 จะปรากฏในปี 2020

แล้วคนอ่านบทความก็แบบว่า “ถ้ามือถือยังไม่รองรับจริง ๆ แล้วทำไมถึงใช้ AV1 ล่ะ?”

AV1 เป็นตัวแปลงสัญญาณที่ค่อนข้างใหม่และเรากำลังอยู่ในช่วงเริ่มต้นของการปรับตัว คิดว่าบทความนี้เป็นเวที "ในขณะที่คุณทำอาหาร คนจะตามมา" การสนับสนุนเดสก์ท็อปจะช่วยเพิ่มความเร็วให้กับไซต์สำหรับผู้ชมบางส่วน และตัวแปลงสัญญาณเก่าสามารถใช้เป็นสถานการณ์สำรองได้เมื่ออุปกรณ์เป้าหมายไม่รองรับ AV1 แต่เมื่อผู้ใช้เปลี่ยนไปใช้อุปกรณ์ที่รองรับ AV1 ทุกอย่างจะพร้อม เพื่อให้บรรลุเป้าหมายนี้ เราจำเป็นต้องสร้างแท็กวิดีโอดังที่แสดงด้านล่าง ซึ่งจะช่วยให้เบราว์เซอร์สามารถเลือกรูปแบบที่ต้องการได้ - AV1 - >> VP9 - >> H.264. ถ้าผู้ใช้มีอุปกรณ์หรือเครื่องนำทางเก่ามากที่ไม่รองรับวิดีโอเลย (ซึ่งไม่น่าเป็นไปได้อย่างยิ่งกับ H264)จากนั้นเขาก็จะเห็น GIF เท่านั้น

<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
  <source src="media/RollingCredits.av1.mp4" type="video/mp4">
  <source src="media/RollingCredits.vp9.webm" type="video/webm">
  <source src="media/RollingCredits.x264.mp4" type="video/mp4">
  <img src="media/RollingCredits.gif">
</video>

การสร้าง AV1

การสร้างวิดีโอใน AV1 เป็นเรื่องง่าย ดาวน์โหลด ffmpeg build ล่าสุดสำหรับระบบของคุณจากที่นี่ และใช้คำสั่งด้านล่าง เราใช้ 2 รอบเพื่อให้ได้บิตเรตเป้าหมาย เมื่อต้องการทำเช่นนี้ เราจะรัน ffmpeg สองครั้ง ครั้งแรกที่เราเขียนผลลัพธ์ลงในไฟล์ที่ไม่มีอยู่จริง สิ่งนี้จะสร้างบันทึกที่จำเป็นสำหรับการเรียกใช้ ffmpeg ครั้งที่สอง

# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null && 
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

นี่คือรายละเอียดของพารามิเตอร์:

-i - Входной файл.

-pix_fmt - Используем формат 4:2:0 для выбора информации о цветности в видео. Существует много других возможных форматов, но 4:2:0 наиболее совместимый.

-c:v - Какой кодек использовать, в нашем случае - AV1.<br />
-b:v – Средний битрейт, которого мы хотим добиться.

-filter:v scale - Фильтр масштаба ffmpeg используется для уменьшения разрешения видео. Мы устанавливаем X:-1 что говорит ffmpeg уменьшить ширину до X, сохранив соотношение сторон.

-strict experimental - Надо указать, т.к. AV1 достаточно новый кодек.

-cpu-used - Ужасно названный параметр, который на самом деле используется для выбора уровня качества видео. Возможные значения 0-4. Чем меньше значение, тем лучше качество и, соответственно, больше время, которое займёт кодировка.

-tile-columns - Для использования нескольких тредов. Говорит AV1 разбить видео на отдельные колонки, которые могут быть перекодированы независимо для лучшей утилизации ЦПУ.

-row-mt – Тоже, что и предыдущий параметр, но разбивает так же на строки внутри колонок.

-threads - Количество тредов.

-pass - Какой проход сейчас выполняется.

-f - Используется только при первом проходе. Указывает формат выходного файла, т.е. MP4 в нашем случае.

-movflags faststart - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.

การทำ GIF

ในการสร้าง GIF ฉันใช้คำสั่งด้านล่าง เพื่อลดขนาด ฉันปรับขนาด GIF เป็นกว้าง 720px และ 12 fps แทนที่จะเป็นวิดีโอ 24 fps ดั้งเดิม

./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gif

ผลการทดสอบ

ดูครั้งเดียว ดีกว่าอ่านร้อยรอบใช่ไหม? มาตรวจสอบให้แน่ใจว่า AV1 เป็นตัวเลือกที่เหมาะสมสำหรับวัตถุประสงค์ของเรา ฉันถ่ายวิดีโอ Tears Of Steel ฟรีที่นี่ https://mango.blender.org/และแปลงโดยใช้บิตเรตเดียวกันโดยประมาณสำหรับตัวแปลงสัญญาณ AV1, VP9, ​​​​H.264 ผลลัพธ์อยู่ด้านล่างเพื่อให้คุณสามารถเปรียบเทียบได้ด้วยตัวเอง

หมายเหตุ 1: หากไฟล์ด้านล่างไม่โหลดสำหรับคุณ อาจถึงเวลาที่ต้องอัปเดตเบราว์เซอร์ของคุณ ฉันอยากจะแนะนำเบราว์เซอร์ที่ใช้ Chromium เช่น Chrome, Vivaldi, Brave หรือ Opera นี่คือข้อมูลล่าสุดเกี่ยวกับการรองรับ AV1 https://caniuse.com/#feat=av1

หมายเหตุ 2: สำหรับ Firefox 66 บน Linux คุณจะต้องตั้งค่าสถานะ media.av1.enabled สู่ความหมาย true в about:config

หมายเหตุ 3: ฉันตัดสินใจที่จะไม่รวม GIF ปกติไว้ด้านล่าง เนื่องจากมีขนาดใหญ่และปริมาณข้อมูลที่ต้องใช้ในการโหลดหน้านี้ (ซึ่งคงจะเป็นเรื่องน่าขัน เนื่องจากหน้านี้เกี่ยวกับการลดปริมาณข้อมูลบนหน้าเว็บ :)) แต่คุณสามารถดู GIF สุดท้ายได้ที่นี่ https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

หมายเหตุของผู้แปล: Habr ไม่อนุญาตให้คุณเปิดใช้งานการเล่นอัตโนมัติและวนซ้ำไฟล์ ดังนั้นคุณจึงสามารถประเมินคุณภาพได้เท่านั้น คุณสามารถดูได้ว่า "ภาพเคลื่อนไหว" จะมีลักษณะเป็นอย่างไร บทความต้นฉบับ.

ฉาก 1 @ 200 Kbps

มีการเคลื่อนไหวมากมายที่นี่ ซึ่งมีความอ่อนไหวเป็นพิเศษที่บิตเรตต่ำ คุณจะเห็นได้ทันทีว่า H.264 แย่แค่ไหนที่บิตเรตนี้ โดยจะมองเห็นสี่เหลี่ยมจัตุรัสได้ทันที VP9 ปรับปรุงสถานการณ์เล็กน้อย แต่ยังคงมองเห็นช่องสี่เหลี่ยมได้ AV1 ชนะอย่างชัดเจน ทำให้ได้ภาพที่ดีขึ้นอย่างเห็นได้ชัด

H.264

VP9

AV1

ฉาก 2 @ 200 Kbps

มีเนื้อหา CGI โปร่งแสงมากมายที่นี่ ผลลัพธ์ไม่ต่างจากครั้งที่แล้ว แต่โดยรวม AV1 ดูดีขึ้น

H.264

VP9

AV1

ฉาก 3 @ 100 Kbps

ในฉากนี้ เราลดบิตเรตลงเหลือ 100 Kbps และผลลัพธ์ก็สม่ำเสมอ AV1 ยังคงความเป็นผู้นำแม้ใช้บิตเรตต่ำ!

H.264

VP9

AV1

เชอร์รี่บนเค้ก

เพื่อจบบทความนี้โดยรู้สึกถึงปริมาณแบนด์วิธที่ประหยัดได้เมื่อเทียบกับ GIF - ขนาดรวมของวิดีโอทั้งหมดจะสูงกว่า... 1.62 เมกะไบต์!! ขวา. 1,708,032 ไบต์ร่วมเพศ! เพื่อการเปรียบเทียบ นี่คือขนาดวิดีโอ GIF และ AV1 สำหรับแต่ละฉาก

GIF
AV1

ฉากที่ 1
11.7 MB
0.33 MB

ฉากที่ 2
7.27 MB
0.18 MB

ฉากที่ 3
5.62 MB
0.088 MB

น่าทึ่งมาก! มันไม่ได้เป็น?

หมายเหตุ: ไม่ได้กำหนดขนาดไฟล์ของ VP9 และ H264 เนื่องจากแทบไม่แตกต่างจาก AV1 เนื่องจากใช้บิตเรตเดียวกัน การเพิ่มคอลัมน์ที่มีขนาดเท่ากันอีกสองคอลัมน์จะซ้ำซ้อน เพียงเพื่อเน้นว่าตัวแปลงสัญญาณเหล่านี้ให้คุณภาพที่ดีกว่า GIF มากในขนาดไฟล์ที่เล็กกว่ามาก

ที่มา: will.com