2019-yil va biz GIF-lar haqida qaror qabul qilish vaqti keldi ( - bu erda biz ingliz tilida talaffuz haqida gapiramiz, biz uchun bu muhim emas - taxminan. tarjima). GIF-lar katta hajmdagi joyni egallaydi (odatda bir necha megabayt!), Agar siz veb-dasturchi bo'lsangiz, bu sizning xohishingizga mutlaqo ziddir! Veb-ishlab chiquvchi sifatida siz foydalanuvchilar yuklab olishlari kerak bo'lgan narsalarni minimallashtirishni xohlaysiz, shunda sayt tezda yuklanadi. Xuddi shu sababga ko'ra, siz JavaScript-ni kichiklashtirasiz, PNG, JPEG-ni optimallashtirasiz va ba'zan konvertatsiya qilasiz . Ammo eski GIF bilan nima qilish kerak?
Bizga GIF-lar kerak bo'lmaydi!
Agar sizning maqsadingiz saytni yuklash tezligini oshirish bo'lsa, unda siz GIF-lardan xalos bo'lishingiz kerak! Ammo qanday qilib jonlantirilgan rasmlarni yaratasiz? Javob video. Aksariyat hollarda siz yanada sifatli va joyni 50-90% tejaysiz! Hayotda ko'p narsaning ijobiy va salbiy tomonlari bor. GIF-ni video bilan almashtirganingizda, ko'pincha siz hech qanday kamchiliklarni topa olmaysiz.
Barcha GIF rasmlari bilan!
Yaxshiyamki, so'nggi yillarda GIF-larni videolar bilan almashtirish odatiy holga aylandi, shuning uchun barcha kerakli vositalar allaqachon qo'llanilmoqda. Ushbu postda men g'ildirakni qayta ixtiro qilmayman, lekin mavjud echimlarni biroz yaxshilayman. Demak, asosiysi:
- GIF-ni oling va uni videoga aylantiring
- H.264 yoki VP9 yordamida videoni kodlash, ya'ni. siqib oling va uni MP4 yoki WebM konteyneriga joylashtiring
- O'zgartiring
<img>animatsion GIF bilan<video>rolik bilan - GIF effekti uchun ovozsiz va pastadirsiz avtomatik ijroni yoqing
2019 yil
Hozir 2019-yil. Taraqqiyot oldinga siljiydi va biz unga ergashishimiz kerak. Hozirgacha bizda barcha brauzerlar va video kodlash vositalarida keng qo'llab-quvvatlanadigan ikkita kodek varianti mavjud:
- H.264 - 2003 yilda joriy etilgan va bugungi kunda eng keng tarqalgan
- VP9 - 2013 yilda paydo bo'ldi va H.50 bilan solishtirganda deyarli 264% siqish yaxshilanishiga erishdi, garchi har doim ham hamma narsa juda qizg'ish emas
Eslatma: Garchi H.265 H.264 ning keyingi versiyasi bo'lsa va VP9 bilan raqobatlasha oladigan bo'lsa-da, sahifada ko'rsatilganidek, brauzerni qo'llab-quvvatlamaganligi sababli men buni hisoblamayman. . Litsenziyalash xarajatlari H.265 H.264 kabi keng tarqalmagani va Ochiq Media konsortsiumi ittifoqi royaltisiz AV1 kodek bilan ishlayotganining asosiy sababidir.
Esda tutingki, bizning maqsadimiz yuklash vaqtini tezlashtirish uchun ulkan GIF-larni iloji boricha kichikroq hajmga qisqartirishdir. Agar bizning arsenalimizda videoni siqish uchun yangi standart bo'lmasa, 2019 yil g'alati bo'lar edi. Lekin u mavjud va AV1 deb ataladi. AV1 bilan mumkin . Lepota! 🙂
AV1 2019 yildan beri xizmatingizda!
Ish stollarida
Yaqinda ish stoli versiyalariga AV1 video dekodlashni qo'llab-quvvatlash qo'shildi и . Hozirda Firefox qo'llab-quvvatlashi noto'g'ri va buzilishlarga olib kelishi mumkin, ammo qo'shilishi bilan ishlar yaxshilanishi kerak allaqachon Firefox 67 da ( - taxminan. tarjima.). Yangi versiya haqida batafsil ma'lumot uchun o'qing -
Smartfonlarda
Tegishli dekoderlar yo'qligi sababli hozirda smartfonlar uchun apparat ta'minoti mavjud emas. Siz dasturiy ta'minotni dekodlashni amalga oshirishingiz mumkin, garchi bu batareya sarfini oshirishga olib keladi. AV1 apparat dekodlashni qo'llab-quvvatlaydigan birinchi mobil SOCs 2020 yilda paydo bo'ladi.
Va keyin maqolani o'qiydiganlar: "Agar mobil telefonlar hali uni to'g'ri qo'llab-quvvatlamasa, nega AV1-dan foydalanish kerak?"
AV1 - bu juda yangi kodek va biz uni moslashtirishning boshida turibmiz. Ushbu maqolani "siz ovqat pishirayotganda, olomon ergashadi" bosqichi deb o'ylab ko'ring. Ish stolini qo'llab-quvvatlash o'z-o'zidan ba'zi tomoshabinlar uchun saytlarni tezlashtiradi. Maqsadli qurilmada AV1 qo'llab-quvvatlanmasa, eski kodeklardan zaxira stsenariy sifatida foydalanish mumkin. Ammo foydalanuvchilar AV1 qo'llab-quvvatlanadigan qurilmalarga o'tishganda, hamma narsa tayyor bo'ladi. Bunga erishish uchun biz quyida ko'rsatilgandek video yorlig'ini yaratishimiz kerak, bu esa brauzerga o'zi xohlagan formatni tanlash imkonini beradi - AV1 - >> VP9 - >> H.264. Xo'sh, agar foydalanuvchida videoni umuman qo'llab-quvvatlamaydigan juda eski qurilma yoki navigator bo'lsa (H264 bilan bu juda dargumon), keyin u faqat GIF-ni ko'radi
<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 ni yaratish
AV1 da video yaratish oson. va quyidagi buyruqlardan foydalaning. Maqsadli bit tezligiga erishish uchun biz 2 ta o'tishdan foydalanamiz. Buning uchun biz ffmpegni ikki marta ishga tushiramiz. Birinchi marta natijani mavjud bo'lmagan faylga yozamiz. Bu ffmpeg-ning ikkinchi ishga tushirilishi uchun kerak bo'ladigan jurnalni yaratadi.
# 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.mp4Bu erda parametrlarning taqsimoti:
-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 yaratish
GIF yaratish uchun men quyidagi buyruqdan foydalandim. Hajmini kamaytirish uchun men GIF-ni asl 720 kadrli video o‘rniga 12 piksel kengligida va 24 kadr/soniyaga kengaytirdim.
./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.gifSinov natijalari
Yuz marta o'qigandan ko'ra, bir marta ko'rgan afzal, to'g'rimi? Keling, AV1 bizning maqsadlarimiz uchun to'g'ri tanlov ekanligiga ishonch hosil qilaylik. Men bu yerda mavjud bo'lgan bepul Tears Of Steel videosini oldim , va uni AV1, VP9, H.264 kodeklari uchun taxminan bir xil bit tezligidan foydalangan holda aylantirdi. Natijalar quyida keltirilgan, shuning uchun ularni o'zingiz uchun solishtirishingiz mumkin.
Eslatma 1: Agar quyidagi fayl siz uchun yuklanmasa, brauzeringizni yangilash vaqti keldi. Men Chrome, Vivaldi, Brave yoki Opera kabi Chromium asosidagi brauzerni tavsiya qilaman. Mana AV1 qoʻllab-quvvatlashiga oid soʻnggi maʼlumotlar
Eslatma 2: Linuxda Firefox 66 uchun siz bayroqni o'rnatishingiz kerak bo'ladi media.av1.enabled ma'noga kiradi true в about:config
Eslatma 3: Men oddiy GIF-larni quyida kiritmaslikka qaror qildim, chunki ularning kattaligi va bu sahifani yuklash uchun zarur boʻlgan maʼlumotlar miqdori! (Bu istehzoli bo'lardi, chunki bu sahifa sahifadagi ma'lumotlar miqdorini kamaytirish haqida :)). Lekin bu yerda yakuniy GIF-larni ko'rishingiz mumkin
Tarjimonning eslatmasi: Habr sizga faylni avtomatik ijro etish va aylanish imkonini bermaydi, shuning uchun siz faqat sifatni baholashingiz mumkin. Siz "jonlantirilgan rasmlar" qanday ko'rinishini jonli ravishda ko'rishingiz mumkin .
1-sahna @ 200 Kbit/s
Bu erda juda ko'p harakat mavjud, bu ayniqsa past bit tezligida sezgir. Bu bit tezligida H.264 qanchalik yomon ekanligini darhol ko'rishingiz mumkin; kvadratchalar darhol ko'rinadi. VP9 vaziyatni biroz yaxshilaydi, ammo kvadratchalar hali ham ko'rinadi. AV1 aniq g'alaba qozonadi, bu aniq yaxshiroq tasvirni yaratadi.
H.264
VP9
AV1
2-sahna @ 200 Kbit/s
Bu erda juda ko'p shaffof CGI tarkibi mavjud. Natijalar avvalgidek farq qilmaydi, lekin umuman olganda AV1 yaxshiroq ko'rinadi.
H.264
VP9
AV1
3-sahna @ 100 Kbit/s
Ushbu sahnada biz bit tezligini 100 Kbit / s ga tushiramiz va natijalar izchil bo'ladi. AV1 hatto past bit tezligida ham yetakchilikni saqlab qoladi!
H.264
VP9
AV1
Keklardagi Višenka
GIF bilan solishtirganda saqlangan tarmoqli kengligi miqdorini his qilish orqali ushbu maqolani yakunlash uchun - barcha videolarning umumiy hajmi kattaroqdir... 1.62 MB!! To'g'ri. Qandaydir 1,708,032 1 XNUMX bayt! Taqqoslash uchun, bu erda har bir sahna uchun GIF va AVXNUMX video o'lchamlari keltirilgan
GIF
AV1
Sahna 1
11.7 MB
0.33 MB
Sahna 2
7.27 MB
0.18 MB
Sahna 3
5.62 MB
0.088 MB
Shunchaki ajoyib! Shunday emasmi?
Eslatma: VP9 va H264 fayl o'lchamlari berilmagan, chunki ular bir xil bit tezligidan foydalanish tufayli AV1 dan deyarli farq qilmaydi. Bir xil o'lchamdagi yana ikkita ustunni qo'shish ortiqcha bo'lardi, bu kodeklar GIF-ga qaraganda ancha kichikroq fayl o'lchamlariga qaraganda ancha yaxshi sifatni ta'kidlash uchun.
Manba: www.habr.com