Yıl 2019 ve GIF'lere karar vermemizin zamanı geldi ( - burada İngilizce telaffuzdan bahsediyoruz, bu bizim için önemli değil - yakl. tercüme). GIF'ler çok fazla yer kaplar (genellikle birkaç megabayt!), bu da eğer bir web geliştiricisiyseniz, isteklerinize tamamen aykırıdır! Bir web geliştiricisi olarak, sitenin hızlı bir şekilde yüklenmesi için kullanıcıların indirmesi gereken şeyleri en aza indirmek istersiniz. Aynı nedenden ötürü, JavaScript'i küçültür, PNG'yi, JPEG'i optimize eder ve bazen de dönüştürüyorsunuz. . Peki eski GIF ile ne yapmalı?
Gittiğimiz yerde GIF'lere ihtiyacımız olmayacak!
Amacınız site yükleme hızını artırmaksa GIF’lerden kurtulmanız gerekiyor! Peki o zaman nasıl hareketli resimler yaparsınız? Cevap videodur. Çoğu durumda daha iyi kalite elde edecek ve %50-90 oranında yerden tasarruf edeceksiniz! Hayatta çoğu şeyin artıları ve eksileri vardır. GIF'i videoyla değiştirdiğinizde çoğu zaman herhangi bir dezavantaj bulamazsınız.
Kahrolsun tüm GIF'ler!
Neyse ki, GIF'leri videolarla değiştirmek son yıllarda yaygınlaştı, dolayısıyla gerekli tüm araçlar zaten kullanılıyor. Bu yazıda tekerleği yeniden icat etmeyeceğim, sadece mevcut çözümleri biraz geliştireceğim. İşte işin özü:
- Bir GIF alın ve videoya dönüştürün
- Videoyu H.264 veya VP9 kullanarak kodlayın, yani. sıkıştırın ve MP4 veya WebM konteynerine paketleyin
- değiştirmek
<img>animasyonlu GIF açıkken<video>rulo ile - GIF efekti için sessiz ve döngüsüz otomatik oynatmayı açın
Сейчас 2019 yılı
Şimdi 2019. İlerleme ileriye doğru gidiyor ve biz de buna ayak uydurmalıyız. Şu ana kadar tüm tarayıcılarda ve video kodlama araçlarında yaygın olarak desteklenen iki codec seçeneğimiz vardı:
- H.264 - 2003'te tanıtıldı ve bugün en yaygın şekilde kullanılıyor
- VP9 - 2013'te ortaya çıktı ve H.50'e kıyasla neredeyse %264'lik sıkıştırma iyileştirmeleri elde etti, ancak her şey her zaman bu kadar pembe değildir
Not: H.265, H.264'ün bir sonraki sürümü olmasına ve VP9 ile rekabet edebilecek kapasitede olmasına rağmen, sayfada gösterildiği gibi zayıf tarayıcı desteği nedeniyle bunu düşünmüyorum. . Lisans maliyetleri, H.265'in H.264 kadar yaygınlaşmamasının ve Alliance of Open Media konsorsiyumunun telifsiz bir codec bileşeni olan AV1 ile çalışmasının ana nedenidir.
Unutmayın, amacımız yükleme sürelerini hızlandırmak için büyük GIF'leri mümkün olan en küçük boyuta küçültmektir. Cephaneliğimizde video sıkıştırmaya yönelik yeni bir standart olmasaydı garip bir 2019 olurdu. Ancak var ve AV1 olarak adlandırılıyor. AV1 ile şunları yapabilirsiniz . Lepota! 🙂
AV1 2019'dan beri hizmetinizde!
Masaüstü bilgisayarlarda
Yakın zamanda masaüstü sürümlerine AV1 video kod çözme desteği eklendi и . Şu anda Firefox desteği hatalı ve çökmelere neden olabilir, ancak şunun eklenmesiyle işler düzelecektir: zaten Firefox 67'de ( - yaklaşık. çeviri.). Yeni sürümle ilgili ayrıntılar için şunu okuyun:
Akıllı telefonlarda
Uygun kod çözücülerin bulunmamasından dolayı akıllı telefonlar için şu anda donanım desteği bulunmamaktadır. Yazılım kod çözme işlemi yapabilirsiniz, ancak bu, pil tüketiminin artmasına neden olacaktır. AV1 donanım kod çözmeyi destekleyen ilk mobil SOC'ler 2020'de ortaya çıkacak.
Ve sonra makalenin okuyucuları şöyle diyor: "Peki cep telefonları henüz onu gerektiği gibi desteklemiyorsa neden AV1 kullanıyorsunuz?"
AV1 oldukça yeni bir codec bileşeni ve biz onun adaptasyonunun en başındayız. Bu makaleyi “siz yemek pişirirken kalabalık takip edecek” aşaması olarak düşünün. Masaüstü desteği başlı başına bazı izleyiciler için siteleri hızlandıracaktır. AV1 hedef cihazda desteklenmediğinde eski kodlayıcılar bir geri dönüş senaryosu olarak kullanılabilir. Ancak kullanıcılar AV1 desteğine sahip cihazlara geçtiklerinde her şey hazır olacak. Bunu başarmak için, aşağıda gösterildiği gibi, tarayıcının tercih ettiği formatı seçmesine olanak sağlayacak bir video etiketi oluşturmamız gerekiyor – AV1 - >> VP9 - >> H.264. Kullanıcının videoyu hiç desteklemeyen çok eski bir cihazı veya navigatörü varsa (H264 ile bu pek olası değildir), o zaman yalnızca GIF'i görecektir
<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 oluşturulması
AV1'de video oluşturmak kolaydır. ve aşağıdaki komutları kullanın. Hedef bit hızına ulaşmak için 2 geçiş kullanıyoruz. Bunu yapmak için ffmpeg'i iki kez çalıştıracağız. İlk defa sonucu var olmayan bir dosyaya yazıyoruz. Bu, ffmpeg'in ikinci çalıştırması için gerekli olacak bir günlük oluşturacaktır.
# 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İşte parametrelerin bir dökümü:
-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 yapma
GIF'i oluşturmak için aşağıdaki komutu kullandım. Boyutu küçültmek için GIF'i orijinal 720 fps video yerine 12 piksel genişliğe ve 24 fps'ye ölçeklendirdim.
./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 sonuçları
Yüz kere okumaktansa bir kere görmek daha iyidir değil mi? AV1'in amaçlarımız açısından doğru seçim olduğundan emin olalım. Burada bulunan ücretsiz Tears Of Steel videosunu çektim ve AV1, VP9, H.264 kodekleri için yaklaşık olarak aynı bit hızını kullanarak dönüştürdü. Sonuçlar aşağıdadır, böylece bunları kendiniz karşılaştırabilirsiniz.
Not 1: Aşağıdaki dosya sizin için yüklenmediyse tarayıcınızı güncellemenin zamanı gelmiş olabilir. Chrome, Vivaldi, Brave veya Opera gibi Chromium tabanlı bir tarayıcı öneririm. İşte AV1 desteğiyle ilgili en son bilgiler
Not 2: Linux'ta Firefox 66 için bayrağı ayarlamanız gerekecek media.av1.enabled anlam içine true в about:config
Not 3: Boyutlarının büyük olması ve bu sayfayı yüklemek için gereken veri miktarı nedeniyle normal GIF'leri aşağıya eklememeye karar verdim! (Bu sayfa bir sayfadaki veri miktarını azaltmakla ilgili olduğundan bu ironik olurdu :)). Ancak son GIF'leri burada görebilirsiniz
Çevirmenin Notu: Habr, otomatik oynatmayı etkinleştirmenize ve dosyayı döngüye almanıza izin vermez, bu nedenle yalnızca kaliteyi değerlendirebilirsiniz. Canlı olarak “animasyonlu resimlerin” nasıl görüneceğini görebilirsiniz .
Sahne 1 @ 200 Kbps
Burada özellikle düşük bit hızlarında hassas olan çok fazla hareket var. H.264'ün bu bit hızında ne kadar kötü olduğunu hemen görebilirsiniz; kareler hemen görülebilir. VP9 durumu biraz iyileştirse de kareler hâlâ görülebiliyor. AV1 açıkça daha iyi bir görüntü üreterek kazanıyor.
H.264
VP9
AV1
Sahne 2 @ 200 Kbps
Burada çok fazla yarı saydam CGI içeriği var. Sonuçlar geçen seferki kadar farklı değil ama genel olarak AV1 daha iyi görünüyor.
H.264
VP9
AV1
Sahne 3 @ 100 Kbps
Bu sahnede bit hızını 100 Kbps'ye düşürüyoruz ve sonuçlar tutarlı oluyor. AV1 düşük bit hızlarında bile liderliğini koruyor!
H.264
VP9
AV1
Kek kiraz
Bu makaleyi, GIF'e kıyasla kaydedilen bant genişliği miktarını hissederek bitirmek için - tüm videoların toplam boyutu daha yüksektir... 1.62MB!! Sağ. Lanet olası 1,708,032 bayt! Karşılaştırma için her sahnenin GIF ve AV1 video boyutları burada verilmiştir
GIF
AV1
Sahne 1
11.7 MB
0.33 MB
Sahne 2
7.27 MB
0.18 MB
Sahne 3
5.62 MB
0.088 MB
Tek kelimeyle muhteşem! Değil mi?
Not: VP9 ve H264'ün dosya boyutları, aynı bit hızının kullanılması nedeniyle AV1'den neredeyse hiç farklı olmadığından verilmemiştir. Bu codec'lerin çok daha küçük dosya boyutlarında GIF'ten çok daha iyi kalite ürettiğini vurgulamak için aynı boyutlarda iki sütun daha eklemek gereksiz olacaktır.
Kaynak: habr.com