Gifs tanpa .gif: pilihan imej dan video yang paling prestasi sekarang

mengucapkan selamat tinggal kepada era gif! Amalan terbaik untuk animasi web yang cekap

Masih menggunakan animasi GIF yang sudah lapuk? Malah, terdapat alternatif prestasi yang lebih cekap dan lebih baik pada masa kini! Artikel ini akan meneroka secara mendalam bagaimana untuk mencapai animasi video gelung yang lancar dengan teknik yang lebih moden, dengan mengambil kira keserasian penyemak imbas dan pengalaman pengguna.

menggunakan html

elemen <video></video>

Gunakan unsur -unsur HTML dengan mudah untuk menghasilkan semula kesan animasi GIF:

<video></video>

Kod ini melaksanakan main balik automatik, main balik gelung, bisu dan main balik sebaris (elakkan main balik skrin penuh). Walau bagaimanapun, isu keserasian format video tidak boleh diabaikan.

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

Fail video terdiri daripada bekas dan codec video (termasuk audio, dan codec audio juga disertakan). Format kontena video biasa adalah MP4 dan Webm. Penyemak imbas perlu menyokong kedua -dua bekas dan codec untuk memainkan video.

Pelayar menyokong format video dalam pelbagai cara yang kompleks dan pelbagai, yang merupakan salah satu sebab mengapa video tertanam YouTube begitu popular. Mari lihat format video apa yang patut dipertimbangkan:

Format kontena:

MP4: Sejak pembebasannya pada tahun 2001, ia telah disokong oleh hampir semua pelayar.

• Webm: Dikeluarkan pada tahun 2010, kecuali iOS Safari, dan pelayar lain menyokongnya.

codecode:

H.264: Semua penyemak imbas menyokongnya.

• HEVC/H.265: Pengganti H.264, disokong oleh Safari, Edge dan Chrome (versi 105 dan ke atas).
• VP9: Pengganti VP8, disokong oleh semua pelayar yang menyokong Webm.
• AV1: Chrome telah disokong sejak 2018, Firefox telah disokong sejak 2019, dan Edge dan Safari belum disokong.
fail MP4 dengan pengekodan H.264 mempunyai keserasian yang terbaik, tetapi saiz kualiti dan fail bukan yang terbaik. Walaupun keserasian AV1 belum sempurna, sebagai codec terkini, kecekapan dan kualitinya sangat tinggi.

Untuk mengambil kira penyemak imbas lama dan baru, anda boleh menggunakan unsur -unsur pelbagai

, mengutamakan penamaan fail sumber yang ideal, dan kemudian tambahkan alternatif pula:

<source></source>

Jika anda perlu menggunakan pelbagai fail MP4 dengan codec yang berbeza, anda perlu menggunakan parameter

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

kompleks.

codecs Kebanyakan perisian penyuntingan video tidak menyokong eksport langsung format AV1 atau Webm, dan memerlukan penukaran menggunakan alat seperti FFMPEG:

Tukar GIF ke MP4:

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

menggunakan video sebagai latar belakang dan superimposing elemen lain memerlukan kedudukan CSS:

ffmpeg -i cats.gif -map_metadata -1 -an opus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cats.mp4

Satu kelemahan unsur -unsur

.video-parent {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.video-parent video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

ialah mereka menghalang skrin dari hibernating.

<video></video> Kelebihan gambar: Webp dan Avif

Menggunakan Format Imej Webp atau AVIF Animasi mempunyai kelebihan berikut:

• Imej animasi yang berbeza boleh digunakan untuk saiz skrin yang berbeza atau mod tema (seperti Mod Dark).
• Sokongan asli untuk memuatkan malas: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">
• lebih mudah digunakan sebagai imej latar belakang: background-image: url("coolbackground.webp");

ia boleh digunakan <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

(borang ditinggalkan, sama dengan bentuk asal)

menggunakan animasi avif

Format AVIF (yang dikeluarkan pada tahun 2019) adalah salah satu format imej terbaik pada masa ini, menukar GIF ke AVIF dapat mengurangkan bilangan bait dengan lebih daripada 90%:

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

AVIF didasarkan pada codec video AV1 dan menyokong imej statik dan animasi.

(borang ditinggalkan, sama dengan bentuk asal)

menggunakan <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now "> Ini dapat mencapai kesan seperti latar belakang video atau imej sempadan dalam safari:

Safari mendakwa ciri ini mempunyai kelebihan prestasi, tetapi Chrome telah menjelaskan bahawa ia tidak akan menyokongnya.

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

Menghormati Keutamaan Pengguna

Elemen video secara automatik menghormati tetapan autoplay pengguna dan "mengurangkan animasi" tetapan.

Semak peningkatan progresif

Sokongan untuk format AVIF dan Webp boleh dimatikan menggunakan tab Chrome Devtools '"Rendering" untuk menguji keserasian kod.

Lottie Animation Library

Lottie adalah perpustakaan animasi sumber terbuka yang mengeksport data animasi (fail JSON) dari selepas kesan dan menjadikannya ke laman web. Ia menyokong pelbagai platform dan menyediakan pilihan kawalan yang fleksibel seperti main balik, jeda, main balik terbalik, dan lain -lain.

Prestasi Lottie bergantung kepada saiz perpustakaan dan saiz fail JSON dan bilangan elemen DOM yang dihasilkan.

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

Kesimpulan: Tidak ada penyelesaian terbaik mutlak, dan pilihan perlu ditimbang berdasarkan keperluan khusus dan keadaan projek.

Atas ialah kandungan terperinci Gifs tanpa .gif: pilihan imej dan video yang paling prestasi sekarang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!