2019-cu ildir və artıq GIF-lərə qərar verməyin vaxtıdır ( - burada ingilis dilində tələffüzdən danışırıq, bizim üçün bu aktual deyil - təqribən. tərcümə). GIF-lər çox böyük bir yer tutur (adətən bir neçə meqabayt!), Əgər veb tərtibatçısınızsa, bu, arzularınıza tamamilə ziddir! Veb tərtibatçısı olaraq, saytın tez yüklənməsi üçün istifadəçilərin yükləməli olduğu şeyləri minimuma endirmək istəyirsiniz. Eyni səbəbdən siz JavaScript-ni kiçildirsiniz, PNG, JPEG-i optimallaşdırırsınız və bəzən çevirə bilərsiniz . Bəs köhnə GIF ilə nə etmək lazımdır?
Getdiyimiz yerdə GIF-lərə ehtiyacımız olmayacaq!
Əgər məqsədiniz saytın yükləmə sürətini artırmaqdırsa, o zaman GIF-lərdən qurtulmalısınız! Bəs cizgi şəkillərini necə etmək olar? Cavab videodur. Və əksər hallarda daha keyfiyyətli və 50-90% yerə qənaət əldə edəcəksiniz! Həyatda çox şeyin müsbət və mənfi tərəfləri var. GIF-i video ilə əvəz edərkən, çox vaxt heç bir mənfi cəhətləri tapa bilməyəcəksiniz.
Bütün GIF-lərə lənət!
Xoşbəxtlikdən, GIF-ləri videolarla əvəz etmək son illərdə adi haldır, buna görə də bütün lazımi alətlər artıq istifadə olunur. Bu yazıda mən təkəri yenidən kəşf etməyəcəyəm, ancaq mövcud həlləri bir az təkmilləşdirəcəyəm. Beləliklə, əsas budur:
- GIF çəkin və onu videoya çevirin
- H.264 və ya VP9 istifadə edərək videonu kodlayın, yəni. sıxın və MP4 və ya WebM konteynerinə yığın
- Dəyişdirin
<img>animasiyalı GIF ilə<video>rulon ilə - GIF effekti üçün səssiz və döngəsiz avtomatik oxutmanı yandırın
2019-cu ildir
Artıq 2019-cu ildir. Tərəqqi irəliləyir və biz də onunla ayaqlaşmalıyıq. İndiyə qədər bütün brauzerlərdə və video kodlaşdırma alətlərində geniş şəkildə dəstəklənən iki kodek seçimimiz var:
- H.264 - 2003-cü ildə təqdim edilmiş və bu gün ən çox istifadə olunur
- VP9 - 2013-cü ildə ortaya çıxdı və H.50 ilə müqayisədə demək olar ki, 264% sıxılma təkmilləşdirilməsinə nail oldu, baxmayaraq ki, hər şey həmişə belə çəhrayı olmur
Qeyd: H.265 H.264-ün növbəti versiyası olsa da və VP9 ilə rəqabət apara bilsə də, səhifədə göstərildiyi kimi zəif brauzer dəstəyi səbəbindən bunu hesab etmirəm . Lisenziyalaşdırma xərcləri H.265-in H.264 qədər geniş yayılmamasının və Açıq Media konsorsiumunun Alliance-nin royaltisiz kodek olan AV1 ilə işləməsinin əsas səbəbidir.
Unutmayın ki, bizim məqsədimiz yükləmə vaxtlarını sürətləndirmək üçün nəhəng GIF-ləri mümkün qədər kiçik ölçülərə qədər kiçiltməkdir. Arsenalımızda video sıxılma üçün yeni standartımız olmasaydı, qəribə 2019 olardı. Lakin o, mövcuddur və AV1 adlanır. AV1 ilə edə bilərsiniz . Lepota! 🙂
AV1 2019-cu ildən xidmətinizdədir!
Masaüstü kompüterlərdə
Bu yaxınlarda AV1 video deşifrəsinə dəstək masaüstü versiyalara əlavə edildi и . Hal-hazırda Firefox dəstəyi səhvdir və qəzalara səbəb ola bilər, lakin əlavə ilə işlər yaxşılaşmalıdır artıq Firefox 67-də ( - təqribən. tərcümə.). Yeni versiya haqqında ətraflı məlumat üçün oxuyun -
Smartfonlarda
Müvafiq dekoderlərin olmaması səbəbindən hazırda smartfonlar üçün texniki dəstək yoxdur. Proqram təminatının dekodlaşdırılmasını edə bilərsiniz, baxmayaraq ki, bu, batareya istehlakının artmasına səbəb olacaq. AV1 hardware deşifrəsini dəstəkləyən ilk mobil SOC-lar 2020-ci ildə peyda olacaq.
Və sonra məqalənin oxucuları "belə görə, əgər cib telefonları hələ də onu düzgün dəstəkləmirsə, niyə AV1 istifadə edirsiniz?"
AV1 kifayət qədər yeni kodekdir və biz onun uyğunlaşmasının ən başlanğıcındayıq. Bu məqaləni “sən bişirəndə izdiham izləyəcək” mərhələsi kimi düşünün. Desktop dəstəyinin özü bəzi auditoriya üçün saytları sürətləndirəcək. AV1 hədəf cihazda dəstəklənməyəndə köhnə kodeklərdən ehtiyat ssenari kimi istifadə edilə bilər. Lakin istifadəçilər AV1 dəstəyi ilə cihazlara keçid etdikcə hər şey hazır olacaq. Buna nail olmaq üçün biz aşağıda göstərildiyi kimi video etiketi yaratmalıyıq ki, bu da brauzerə üstünlük verdiyi formatı seçməyə imkan verəcək - AV1 - >> VP9 - >> H.264. Yaxşı, istifadəçinin videonu ümumiyyətlə dəstəkləməyən çox köhnə bir cihazı və ya naviqatoru varsa (H264 ilə bu, çox mümkün deyil), o, sadəcə GIF-i görəcək
<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-in yaradılması
AV1-də video yaratmaq asandır. və aşağıdakı əmrlərdən istifadə edin. Hədəf bit sürətinə çatmaq üçün 2 keçiddən istifadə edirik. Bunu etmək üçün iki dəfə ffmpeg işlədəcəyik. İlk dəfə nəticəni mövcud olmayan fayla yazırıq. Bu, ffmpeg-in ikinci işə salınması üçün lazım olan bir qeyd yaradacaq.
# 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.mp4Budur parametrlərin bölgüsü:
-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-lərin hazırlanması
GIF yaratmaq üçün aşağıdakı əmrdən istifadə etdim. Ölçüsü azaltmaq üçün GIF-i orijinal 720 kadr/s video yerinə 12 piksel genişliyə və 24 kadr/s-ə qədər böyütdüm.
./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.gifTest nəticələri
Yüz dəfə oxumaqdansa, bir dəfə görmək yaxşıdır, elə deyilmi? AV1-in məqsədlərimiz üçün düzgün seçim olduğuna əmin olaq. Mən burada mövcud olan pulsuz Tears Of Steel videosunu çəkdim , və AV1, VP9, H.264 kodekləri üçün təxminən eyni bit sürətindən istifadə edərək onu çevirdi. Nəticələr aşağıdadır ki, onları özünüz üçün müqayisə edə biləsiniz.
Qeyd 1: Aşağıdakı fayl sizin üçün yüklənmirsə, brauzerinizi yeniləməyin vaxtı gələ bilər. Mən Chrome, Vivaldi, Brave və ya Opera kimi Chromium əsaslı brauzeri tövsiyə edərdim. Budur AV1 dəstəyi ilə bağlı ən son məlumatlar
Qeyd 2: Linux-da Firefox 66 üçün bayraq təyin etməlisiniz media.av1.enabled mənaya keçir true в about:config
Qeyd 3: Böyük ölçüləri və bu səhifəni yükləmək üçün tələb olunan məlumatların miqdarı səbəbindən adi GIF-ləri aşağıya daxil etməməyə qərar verdim! (Bu ironik olardı, çünki bu səhifə bir səhifədəki məlumatların miqdarını azaltmaqdır :)). Ancaq son GIF-ləri burada görə bilərsiniz
Tərcüməçinin qeydi: Habr sizə avtomatik oxutmanı aktivləşdirməyə və faylı döndərməyə imkan vermir, ona görə də siz yalnız keyfiyyəti qiymətləndirə bilərsiniz. Siz "cizgi şəkillərinin" canlı olaraq necə görünəcəyini görə bilərsiniz .
Səhnə 1 @ 200 Kbps
Burada çoxlu hərəkət var ki, bu da aşağı bit sürətlərində xüsusilə həssasdır. H.264-ün bu bit sürətində nə qədər pis olduğunu dərhal görə bilərsiniz, kvadratlar dərhal görünür. VP9 vəziyyəti bir az yaxşılaşdırır, lakin kvadratlar hələ də görünür. AV1 açıq-aydın daha yaxşı şəkil çıxararaq qalib gəlir.
H.264
VP9
AV1
Səhnə 2 @ 200 Kbps
Burada çox sayda şəffaf CGI məzmunu var. Nəticələr keçən dəfəki kimi fərqli deyil, lakin ümumilikdə AV1 daha yaxşı görünür.
H.264
VP9
AV1
Səhnə 3 @ 100 Kbps
Bu səhnədə biz bit sürətini 100 Kbps-ə endiririk və nəticələr ardıcıldır. AV1 hətta aşağı bit sürətlərində də liderliyini qoruyur!
H.264
VP9
AV1
Tortun üzərində albalı
GIF ilə müqayisədə qənaət edilmiş bant genişliyinin miqdarını hiss edərək bu məqaləni bitirmək üçün - bütün videoların ümumi ölçüsü daha yüksəkdir... 1.62 MB!! Sağ. Bir az 1,708,032 bayt! Müqayisə üçün burada hər bir səhnə üçün GIF və AV1 video ölçüləri verilmişdir
GIF
AV1
Səhnə 1
11.7 MB
0.33 MB
Səhnə 2
7.27 MB
0.18 MB
Səhnə 3
5.62 MB
0.088 MB
Sadəcə heyranedici! elə deyilmi?
Qeyd: VP9 və H264-ün fayl ölçüləri verilmir, çünki onlar eyni bit sürətinin istifadəsi səbəbindən AV1-dən praktiki olaraq fərqlənmirlər. Bu kodeklərin daha kiçik fayl ölçülərində GIF-dən daha yaxşı keyfiyyət istehsal etdiyini vurğulamaq üçün eyni ölçülü daha iki sütun əlavə etmək lazımsız olardı.
Mənbə: www.habr.com