Энэ бол 2019 он бөгөөд бид GIF зураг авахаар шийдэх цаг болжээ ( - энд бид англи хэл дээрх дуудлагын талаар ярьж байна, бидний хувьд энэ нь хамаагүй - ойролцоогоор. орчуулга). GIF нь асар их зай эзэлдэг (ихэвчлэн хэд хэдэн мегабайт!), Хэрэв та вэб хөгжүүлэгч бол таны хүсэлд бүрэн харшлах болно! Вэб хөгжүүлэгчийн хувьд та сайтыг хурдан ачаалахын тулд хэрэглэгчдийн татаж авах шаардлагатай зүйлсийг багасгахыг хүсч байна. Үүнтэй ижил шалтгаанаар та JavaScript-ийг багасгаж, PNG, JPEG-г оновчтой болгож, заримдаа хөрвүүлдэг . Гэхдээ хуучин GIF-тэй юу хийх вэ?
Бидний явж байгаа газарт GIF хэрэггүй болно!
Хэрэв таны зорилго бол сайтыг ачаалах хурдыг сайжруулах юм бол та GIF-ээс салах хэрэгтэй! Гэхдээ яаж хүүхэлдэйн кино хийх вэ? Хариулт нь видео юм. Мөн ихэнх тохиолдолд та илүү чанартай, орон зайг 50-90% хэмнэнэ! Амьдралд ихэнх зүйлд сайн муу тал бий. Та GIF-г видеогоор солих үед ихэнхдээ та ямар ч сул талыг олж чадахгүй.
Бүх GIF-г орхи!
Аз болоход сүүлийн жилүүдэд GIF-г видеогоор солих нь энгийн үзэгдэл болсон тул шаардлагатай бүх хэрэгслийг аль хэдийн ашиглаж байна. Энэ нийтлэлд би дугуйг дахин зохион бүтээхгүй, харин одоо байгаа шийдлүүдийг бага зэрэг сайжруулах болно. Тиймээс гол нь:
- GIF аваад видео болгон хөрвүүлээрэй
- H.264 эсвэл VP9 ашиглан видеог кодчил. үүнийг шахаж, MP4 эсвэл WebM саванд хийнэ
- Солих
<img>хөдөлгөөнт GIF асаалттай<video>булны хамт - GIF эффект үүсгэхийн тулд дуу чимээ, гогцоогүйгээр автоматаар тоглуулахыг асаана уу
2019 он боллоо
Одоо 2019 он боллоо. Хөгжил дэвшил урагшилж, бид үүнийг дагаж мөрдөх ёстой. Одоогийн байдлаар бид бүх хөтөч болон видео кодчилолын хэрэглүүрүүдэд өргөнөөр дэмжигдсэн хоёр кодлогч сонголттой байна:
- H.264 - 2003 онд нэвтрүүлсэн бөгөөд өнөөдөр хамгийн өргөн хэрэглэгддэг
- VP9 - 2013 онд гарч ирсэн бөгөөд H.50-тэй харьцуулахад шахалтыг бараг 264% сайжруулсан боловч Бүх зүйл үргэлж тийм ч ягаан байдаггүй
Тайлбар: Хэдийгээр H.265 нь H.264-ийн дараагийн хувилбар бөгөөд VP9-тэй өрсөлдөх чадвартай боловч хуудсан дээр үзүүлсэн шиг хөтөчийн дэмжлэг муу байгаа тул би үүнийг тооцохгүй байна. . Лицензийн зардал нь H.265 нь H.264 шиг өргөн тархаагүй, Alliance of Open Media консорциум роялтигүй кодлогч AV1-тэй хамтран ажиллаж байгаагийн гол шалтгаан юм.
Бидний зорилго бол ачаалах хугацааг хурдасгахын тулд асар том GIF файлуудыг аль болох жижиг хэмжээтэй болгох явдал гэдгийг санаарай. Хэрэв бидний зэвсэглэлд видео шахалтын шинэ стандарт байхгүй бол 2019 он хачирхалтай байх байсан. Гэхдээ энэ нь байдаг бөгөөд AV1 гэж нэрлэгддэг. AV1-ийн тусламжтайгаар та боломжтой . Лепота! 🙂
AV1 2019 оноос хойш таны үйлчилгээнд байна!
Ширээний компьютер дээр
Саяхан AV1 видео код тайлах дэмжлэгийг ширээний хувилбарт нэмсэн и . Яг одоо Firefox-ын дэмжлэг алдаатай байгаа бөгөөд гацах шалтгаан болж магадгүй ч нэмэлтээр бүх зүйл сайжирна Firefox 67 дээр аль хэдийн суулгасан ( - ойролцоогоор. орчуул.). Шинэ хувилбарын талаарх дэлгэрэнгүй мэдээллийг уншина уу -
Ухаалаг утаснууд дээр
Тохиромжтой декодер байхгүйн улмаас ухаалаг гар утсанд одоогоор техник хангамжийн дэмжлэг байхгүй байна. Та програм хангамжийн кодыг тайлж болно, гэхдээ энэ нь батерейны хэрэглээг нэмэгдүүлэхэд хүргэдэг. AV1 техник хангамжийн код тайлахыг дэмждэг анхны гар утасны SOC-ууд 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 дээр видео үүсгэх нь амархан. мөн доорх тушаалуудыг ашиглана уу. Зорилтот хурдад хүрэхийн тулд бид 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-ийг анхны 720 fps видеоны оронд 12px өргөн, 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 видеог үнэгүй авсан , мөн AV1, VP9, H.264 кодлогчийн хувьд ойролцоогоор ижил битийн хурдыг ашиглан хөрвүүлсэн. Үр дүн нь доор байгаа тул та өөртэйгөө харьцуулах боломжтой.
Тайлбар 1: Хэрэв доорх файл танд ачаалагдахгүй бол хөтчөө шинэчлэх цаг болсон байж магадгүй. Би Chrome, Vivaldi, Brave эсвэл Opera зэрэг Chromium-д суурилсан хөтөчийг санал болгож байна. Энд AV1 дэмжлэгийн талаарх хамгийн сүүлийн үеийн мэдээлэл байна
Тайлбар 2: Линукс дээрх Firefox 66-ийн хувьд та тугийг тохируулах хэрэгтэй media.av1.enabled утга руу оруулна true в about:config
Тайлбар 3: Би энэ хуудсыг ачаалахад их хэмжээний өгөгдлийн хэмжээ, өгөгдлийн хэмжээ шаардагддаг тул энгийн GIF-г доор оруулахгүй байхаар шийдсэн! (Энэ хуудас нь хуудасны өгөгдлийн хэмжээг багасгах тухай учраас инээдтэй байх болно :)). Гэхдээ та эцсийн GIF-г эндээс харж болно
Орчуулагчийн тэмдэглэл: Habr нь танд автоматаар тоглуулах, файлыг давтахыг зөвшөөрөхгүй тул та зөвхөн чанарыг үнэлэх боломжтой. Та "хөдөлгөөнт зураг" ямар харагдахыг шууд харж болно .
1-р үзэгдэл 200 Кбит/с
Энд маш их хөдөлгөөн байдаг бөгөөд энэ нь ялангуяа бага битийн хурдтай үед мэдрэмтгий байдаг. Та H.264 энэ битийн хурдаар ямар муу байгааг шууд харж болно; квадратууд шууд харагдана. VP9 нь нөхцөл байдлыг бага зэрэг сайжруулсан боловч квадратууд нь харагдахуйц хэвээр байна. AV1 илт ялж, илүү сайн зураг гаргах нь ойлгомжтой.
H.264
VP9
AV1
2-р үзэгдэл 200 Кбит/с
Энд маш олон тунгалаг CGI контент байна. Үр дүн нь өмнөх шигээ ялгаатай биш ч ерөнхийдөө AV1 илүү сайн харагдаж байна.
H.264
VP9
AV1
3-р үзэгдэл 100 Кбит/с
Энэ үзэгдэлд бид битийн хурдыг 100 Kbps хүртэл бууруулж, үр дүн нь тогтвортой байна. AV1 нь бага битийн хурдтай байсан ч тэргүүлэгч байдлаа хадгалсаар байна!
H.264
VP9
AV1
Бялуу дээр интоор
GIF-тэй харьцуулахад хэмнэгдсэн зурвасын өргөнийг мэдэрч энэ нийтлэлийг дуусгахын тулд бүх видеоны нийт хэмжээ илүү өндөр байна ... 1.62 MB!! Зөв. Новшийн 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-ээс хамаагүй бага хэмжээтэй файлыг илүү чанартай гаргадаг гэдгийг онцлохын тулд ижил хэмжээтэй хоёр багана нэмэх нь илүүц байх болно.
Эх сурвалж: www.habr.com