ProHoster > Blog > Administrim > Ka ardhur koha të zëvendësojmë GIF me video AV1

Ka ardhur koha të zëvendësojmë GIF me video AV1

Ka ardhur koha të zëvendësojmë GIF me video AV1

Tani tani viti 2019, dhe na ka ardhur koha tĂ« marrim njĂ« vendim nĂ« lidhje me GIF (jo, nuk bĂ«het fjalĂ« pĂ«r kĂ«tĂ« vendim! KĂ«tu kurrĂ« nuk do tĂ« biem dakord! — ky Ă«shtĂ« pĂ«r shqiptimin nĂ« anglisht, nuk Ă«shtĂ« aktual pĂ«r ne — shĂ«n. pĂ«rk.). GIF-at zĂ«nĂ« njĂ« sasi tĂ« madhe hapĂ«sire (zakonisht disa megabajt!) qĂ«, nĂ«se jeni zhvillues web-i, Ă«shtĂ« krejtĂ«sisht nĂ« kundĂ«rshtim me dĂ«shirat tuaja! Si zhvillues web-i, dĂ«shironi tĂ« minimizoni gjĂ«rat qĂ« pĂ«rdoruesit duhet tĂ« shkarkojnĂ«, pĂ«r tĂ« siguruar njĂ« ngarkesĂ« tĂ« shpejtĂ« tĂ« faqes. PĂ«r tĂ« njĂ«jtĂ«n arsye, minimizoni JavaScript-in, optimizoni PNG, JPEG, dhe ndonjĂ«herĂ« konvertoni JPEG nĂ« WebP. Por çfarĂ« duhet bĂ«rĂ« me tĂ« moshuarin GIF?

Atje ku po shkojmë, nuk do na duhen GIF-et!

Nëse qëllimi juaj është të përmirësoni shpejtësinë e ngarkesës së faqes, atëherë duhet të heqim dorë nga GIF! Por si të krijoni pamje të animuara? Përgjigjja është video. Dhe në shumicën e rasteve, do të merrni cilësi më të mirë dhe kursim hapësire prej 50-90%! Në jetë, shumica e gjërave kanë përparësi dhe disavantazhe. Kur zëvendësoni GIF me video, zakonisht nuk do të gjeni disavantazhe.

Poshtë me të gjitha GIF-et!

Fatmirësisht, zëvendësimi i GIF me video ka qenë një praktikë e zakonshme vitet e fundit, kështu që të gjitha mjetet e nevojshme janë tashmë në përdorim. Në këtë postim, nuk do të shpik një biçikletë, por thjesht do ta përmirësoj pak zgjidhjen ekzistuese. Pra, ja ku qëndron:

  1. Merrni GIF dhe konvertojeni në video
  2. Kodoni videon me H.264 ose VP9, dmth. kompresoni dhe paketoni atë në një enë MP4 ose WebM
  3. Zëvendësoni <img> me një GIF të animuar me me një video
  4. Aktivizoni autoplay pa zë dhe ciklonin, për të arritur efektin e GIF

Google ka dokumentacion të mirë që përshkruan procesin.

Tani tani viti 2019

Tani tani viti 2019. Progresi po ecën përpara, dhe ne duhet të mos mbetemi pas. Deri tani kemi pasur dy mundësi kodekë që mbështeten gjerësisht në të gjitha shfletuesit dhe mjetet për kodimin e videos:

  1. H.264 — i paraqitur nĂ« 2003 dhe mĂ« sĂ« shumti pĂ«rdorur sot
  2. VP9 — i paraqitur nĂ« 2013 dhe arrin pĂ«rmirĂ«simin e kompresimit prej gati 50% krahasuar me H.264, edhe pse siç shkruhet kĂ«tu nuk Ă«shtĂ« gjithçka dhe gjithmonĂ« kaq rozĂ«

Vërejtje: edhe pse standardi H.265 është versioni tjetër i H.264 dhe është në gjendje të konkurrojë me VP9, nuk e shqyrtoj atë për shkak të mbështetjes së dobët nga shfletuesit, e cila është treguar në faqen. https://caniuse.com/#feat=hevcShpenzimet për licencim janë arsyeja kryesore që H.265 nuk u bë kaq i zakonshëm si H.264 dhe për të cilën konsorciumi Alliance of Open Media po punon me kodekët pa pagesë - me AV1.

Mos harroni se qĂ«llimi ynĂ« Ă«shtĂ« tĂ« zvogĂ«lojmĂ« GIF-et e mĂ«dha nĂ« madhĂ«sinĂ« mĂ« tĂ« vogĂ«l tĂ« mundshme pĂ«r tĂ« pĂ«rshpejtuar ngarkimin. Do tĂ« ishte njĂ« vit i çuditshĂ«m 2019, nĂ«se nuk do tĂ« kishim njĂ« standard tĂ« ri pĂ«r kompresimin e videos. Por ekziston dhe quhet AV1. Me AV1 mund tĂ« arrini pĂ«rmirĂ«sim rreth 30% nĂ« kompresim krahasuar me VP9. Bukuria! 🙂

AV1 është në dispozicion që nga viti 2019!

NĂ« desktop

Recently, support for decoding AV1 video was added in the desktop versions Google Chrome 70 dhe Mozilla Firefox 65. Tani pĂ«r tani, mbĂ«shtetje nĂ« Firefox ka probleme dhe mund tĂ« shkaktojĂ« çarjen, por situata duhet tĂ« ndryshojĂ« me shtimin tĂ« dekoderit dav1d nĂ« Firefox 67 (ka dalĂ« tashmĂ« dhe mbĂ«shtetja Ă«shtĂ« — shĂ«n. pĂ«rkth.). PĂ«r detaje mbi versionin e ri lexoni - dav1d 0.3.0 lĂ«shimi: akoma mĂ« i shpejtĂ«!

NĂ« smartphone

Për smartphone, mbështetja harduerike aktualisht mungon për shkak të mungesës së dekoderëve përkatës. Mund të bëhet dekodimi programor, megjithatë kjo do të çojë në një rritje të shpenzimeve të baterisë. SOC-të e para celulare me mbështetje për dekodimin harduerik të AV1 do të dalin në vitin 2020.

Dhe këtu lexuesit e artikullit janë të tillë «pra, nëse mobilët nuk mbështesin mirë tani, pse duhet të përdorim AV1?»

AV1 është një kodek mjaft i ri, dhe ne jemi në fillim të adaptimit të tij. Mendoni për këtë artikull si një fazë «derisa po e përgatisni, njerëzit do të arrijnë». Mbështetja në desktop do të përshpejtojë sitet për një pjesë të audiencës. Dhe kodekët e vjetër mund të përdoren si një skenar rezervë, kur në pajisjen e synuar AV1 nuk mbështetet. Megjithatë, ndërsa përdoruesit kalojnë në pajisje me mbështetje për AV1, gjithçka do të jetë gati. Për ta arritur këtë, duhet të krijojmë një etiketë video, siç tregohet më poshtë, që do t'i lejojë shfletuesit të zgjedhin formatin e preferuar - AV1 ->> VP9 ->> H.264. E nëse përdoruesi ka një pajisje ose shfletues krejtësisht të vjetër, i cili nuk mbështet video fare (çka është shumë e pakët e mundur me H264), atëherë ai thjesht do të shohë 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>

Krijimi i AV1

Të krijosh video në AV1 nuk është e vështirë. Shkarkoni ndërtimin më të fundit të ffmpeg për sistemin tuaj dhe këtu dhe përdorni komandat më poshtë. Ne përdorim 2 kalime për të arritur bitratin e kërkuar. Për këtë, do të ekzekutojmë ffmpeg dy herë. Herën e parë do ta regjistrojmë rezultatin në një skedar që nuk ekziston. Kjo do të krijojë një log që do të nevojitet për ekzekutimin e dytë të 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

Këtu është shpjegimi i parametrave:

-i - Skedha hyrje.

-pix_fmt - Përdorimi i formatit 4:2:0 për të zgjedhur informacionin mbi ngjyrat në video. Ka shumë formate të tjera të mundshme, por 4:2:0 është më e përputhshme.

-c:v - Cili kodek të përdorim, në rastin tonë - AV1.<br />
-b:v – Bitrat mesatar që dëshirojmë të arrijmë.

-filter:v scale - Filtri i shkallës ffmpeg përdoret për të zvogëluar rezolucionin e videos. Ne vendosim X:-1 çka i tregon ffmpeg të zvogëlojë gjerësinë në X, duke ruajtur raportin e aspakthit.

-strict experimental - Duhet të specifikohet, pasi AV1 është një kodek mjaft i ri.

-cpu-used - Një parametr i emëruar keq, i cili në të vërtetë përdoret për të zgjedhur nivelin e cilësisë së videos. Vlerat e mundshme janë 0-4. Sa më e vogël të jetë vlera, aq më mirë është cilësia dhe, për pasojë, më shumë kohë do të kërkojë kodimi.

-tile-columns - Për përdorimin e disa threthave. Tregon AV1 të ndajë videon në kolona të veçanta, të cilat mund të rikodohen në mënyrë të pavarur për një shfrytëzim më të mirë të CPU-së.

-row-mt – Po ashtu si parametrin e mëparshëm, por e ndan gjithashtu në rreshta brenda kolonave.

-threads - Numri i threthave.

-pass - Cili kalim po kryhet tani.

-f - Përdoret vetëm në kalimin e parë. Tregon formatin e skedarit të dalë, pra MP4 në rastin tonë.

-movflags faststart - Aktivizojmë fillimin e shpejtë të videos duke e zhvendosur një pjesë të të dhënave në fillim të skedarit. Kjo do të lejojë që të fillojë përshtatja para se skedari të jetë ngarkuar plotësisht.

Krijimi i GIF-it

Për të krijuar GIF-in, kam përdorur komandën më poshtë. Për të reduktuar madhësinë, kam shkallëzuar GIF-in në 720px në gjerësi dhe 12 fps në vend të 24 fps të videos origjinale.

./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

Rezultatet e testeve

Më mirë ta shohësh një herë, sesa ta lexosh njëqind herë, apo jo? Le të sigurohemi se AV1 është zgjedhja e duhur për qëllimet tona. Kam marrë një video falas Tears Of Steel, e cila është e disponueshme këtu https://mango.blender.org/, dhe e konvertova duke përdorur një bitrat të ngjashëm për kodekët AV1, VP9, H.264. Rezultatet janë më poshtë, kështu që mund të krahasoni vetë.

Shënim 1: Nëse skedari më poshtë nuk ngarkohet, ndoshta është koha të azhurnoni shfletuesin. Do t'ju rekomandoja një shfletues në bazë të Chromium, si Chrome, Vivaldi, Brave ose Opera. Këtu është informacioni më i fundit mbi mbështetje AV1 https://caniuse.com/#feat=av1

Shënim 2: Për Firefox 66 në Linux, do t'ju nevojitet të vendosni flamurin media.av1.enabled në vlerën true në about:config

Shënim 3: Kam vendosur të mos përfshij GIF-et e zakonshme më poshtë për shkak të madhësisë së tyre të madhe dhe sasisë së të dhënave që do të nevojiteshin për të ngarkuar këtë faqe! (çka do të ishte ironike, pasi kjo faqe flet për reduktimin e sasisë së të dhënave në faqe :)). Por mund të shihni GIF-et përfundimtare këtu https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Shënim i përkthyesit: Habr nuk lejon të aktivizohet autoplay dhe të rrethvijohet skedari, ndaj do të mund të vlerësohet vetëm cilësia. Mund ta shihni se si do të duken "imazhet e animuara" në jetë në artikullit origjinal.

Scena 1 @ 200 Kbps

Këtu ka shumë lëvizje, e cila është veçanërisht e ndjeshme në bitratet e ulëta. Menjëherë vërehet se si H.264 duket keq në këtë bitrate, me katrorët të dukshëm. VP9 pak e përmirëson situatën, por katrorët akoma janë të dukshëm. AV1 duket qartë më mirë, duke ofruar një imazh ndjeshëm më të mirë.

H.264

VP9

AV1

Scena 2 @ 200 Kbps

Këtu ka shumë përmbajtje CGI të gjysmë transparente. Rezultatet tashmë nuk ndryshojnë kaq shumë si në herën e kaluar, por në përgjithësi AV1 duket më mirë.

H.264

VP9

AV1

Scena 3 @ 100 Kbps

Në këtë skenë, ne e ulim bitratin në 100 Kbps dhe rezultatet përputhen. AV1 ruan udhëheqjen edhe në bitrat e ulëta!

H.264

VP9

AV1

Çereku nĂ« tortĂ«

PĂ«r tĂ« pĂ«rfunduar artikullin, duke ndjerĂ« sasinĂ« e trafikut tĂ« kursyer nĂ« krahasim me GIF-in — madhĂ«sia totale e tĂ« gjitha videove mĂ« sipĂ«r
 1.62 MB!! SaktĂ«. ÇfarĂ« 1,708,032 byte tĂ« vogla! PĂ«r krahasim, ja madhĂ«sia e videos GIF dhe AV1 pĂ«r secilĂ«n prej skenave

GIF
AV1

Skena 1
11.7 MB
0.33 MB

Skena 2
7.27 MB
0.18 MB

Skena 3
5.62 MB
0.088 MB

Thjesht mahnitëse! A nuk është?

Vërejtje: Madhësitë e skedarëve VP9 dhe H264 nuk janë përmendur, pasi nuk dallojnë praktikisht nga AV1 për shkak të përdorimit të të njëjtit bitrate. Do të ishte e tepërt të shtonim edhe dy kolona me madhësi të njëjta, vetëm për të theksuar se këto kodekë ofrojnë cilësi shumë më të mirë se GIF me madhësi skedarësh shumë më të vogla.

Burimi: habr.com

Blini hosting tĂ« besueshĂ«m pĂ«r faqe interneti me mbrojtje nga DDoS, serverĂ« VPS VDS đŸ”„ Blini hosting tĂ« besueshĂ«m pĂ«r faqe interneti me mbrojtje nga DDoS, serverĂ« VPS VDS | ProHoster