استفاده از ویدئو به جای عکس متحرک برای سرعت بیشتر

حامد مودی

قبل از شروع بحث به دو تصویر متحرک یا Gif زیر توجه کنید:

اجرای روان با حجم ۲۷ کیلوبایت
کند و آهسته با حجم ۱۷۲ کیلوبایت

همانطور که کاملا مشهود است تصویر متحرک سمت راست فقط ۱۷ کیلوبایت حجم دارد و خیلی روان و بدون کندی در حال اجراست. اما تصویر متحرک سمت چپ کمی کند و حجم ۱۷۲ کیلوبایت یعنی ۶ برابر تصویر سمت راست. اما واقعا چرا؟

اول از همه باید به شما گفت که متأسفانه سر کار رفتید چون تصویر سمت راست اصلا عکس Gif نیست و از ویدئو استفاده شده برای همین روان و کم حجم است. در ضمن اگر قرار بود تمام فریم های عکس لحاظ شود و تصویر متحرک به روانی ویدئوی ما باشد حجم به ۴۸۸ کیلوبایت می رسد که تصویر اصلی را از اینجا ببینید.

تفاوت حجم بین Gif و Mp4

در این مقاله قرار است در رابطه با این تکنیک برای تصاویر متحرک خود برا بهینه سازی اینگونه تصاویر استفاده کنیم. اگر الان بخش حرکت گوگل متریال را مشاهده کنید و بررسی دقیق تر انجام دهید خواهید دید که از ویدئو به جای تصاویر gif استفاده می کند.

اول تصاویر متحرک را پیدا کنید

با استفاده از Lighthouse تصاویر متحرک gif سایت شما که می تواند به ویدئو تبدیل شود را بررسی کنید. در ابزار توسعه یا DevTools روی تب Audits کلیک کنید و گزینه Performance را تیک بزنید. سپس با زدن دکمه Run Audits ابزار فانوس دریای را اجرا کنید و گزارش آن را بررسی کنید.

اجرای بخش Performance از تب Audits

نتایج را که بررسی کنیم در بخش Use video formats for animated content این ابزار تصاویر متحرکی که می توان با استفاده از ویدئو به جای سایت را بهینه کرد به ما معرفی می کند.

پیشنهاد برای استفاده ویدئو به جای محتوای متحرک gif

ویدئوهای MPEG ایجاد کنید

ابزارها و نرم افزارهای مختلفی برای تبدیل تصاویر متحرک Gif به ویدئو وجود دارد. FFmpeg ابزاری است که در این مقاله از آن استفاده کردیم. برای تبدیل تصویر متحرک rocket-original.gif به ویدئوی mp4 تبدیل کنید. پس دستور زیر را در خط فرمان وارد کنید.

ffmpeg -i rocket-original.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p rocket.mp4

این دستور به FFmpeg می گوید که فایل rocket-original.gif را به عنوان فایل ورودی بگیرد که این کار با علامت -i تعیین می شود، و به فایل ویدئویی با نام rocket.mp4 تبدیل کن

ویدئوی Webm بسازید

در حالی که فرمت MP4 از سال ۱۹۹۹ به دنیا معرفی شد فرمت WebM به عنوان یک فرمت همتراز در سال ۲۰۱۰ معرفی شد. ویدئوهای WebM خیلی از ویدئوهای MP4 کوچکتر هستند، اما تمام مرورگرها از آن پشتیبانی نمی کنند پس ما باید هر دو فرمت را تولید و استفاده کنیم.
برای تبدیل فایل rocket-original.gif به فرمت WebM با استفاده از FFmpeg دستور زیر را داخل خط فرمان وارد کنید:

ffmpeg -i rocket-original.gif -c vp9 -b:v 0 -crf 41 rocket.webm

مقایسه تفاوت ها

هزینه ذخیره شود توسط فرمت gif و ویدئو در تصویر زیر کاملا مشخص است. به فرمت ها و حجم فایل ها دقت کنید

مقایسه فرمت webm، mp4 و gif

در این مثال، تصویر اولیه Gif را که ۴۸۹ کیلوبایت حجم دارد را با نسخه MP4 آن که حجم ۲۷ کیلوبایت دارد و با نسخه WebM آن که فقط ۲۰ کیلوبایت دارد مقایسه کنید!

تصویر Gif را با ویدئو جایگزین کنید

تصاویر متحرک Gif سه ویژگی دارد که باید روی ویدئو هم پیاده شود:

  • پخس آن خودکار است
  • مدام تکرار می شود(البته اغلب اوقات، اما ممکن است از تکرار جلوگیری شود)
  • ساکت و خاموش اجرا می شود و صدا ندارد

خوشبختانه، می توانید این رفتار تصاویر متحرک را با عنصر video در html بسازید و از ویدئو به عنوان یک تصویر متحرک استفاده کنید.

<video autoplay loop muted playsinline></video>

یک تگ video با این ویژگی ها به طور خودکار اجرا می شود، تا بینهایت تکرار می شود و بدون صدا پخش می شود و به صورت درون خطی هم اجرا می شود(نه تمام صفحه)، این رفتارها دقیقا همان چیزی است که برای تصاویر متحرک Gif نیاز داشتیم.

در انها تگ viedo به یک یا چند تگ source نیاز دارد تا فایل های ویدئویی را به آن معرفی کنیم که البته نحوه پشتیبانی از فرمت ها روی مرورگر های متخلف فرق می کند. ما قرار است هم از فرمت MP4 و هم از فرمت WebM استفاده کنیم، اینطور اگر مرورگر فرمت WebM را پشتیبانی نکرد سراغ پخش فرمت MP4 می رود.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

مرورگر نمی تواند حدس بزند کدام source مد نظر شماست، پس ترتیب source مهم است. به عنوان مثال اگر شما فرمت MP4 را به عنوان source اول وارد کنید حتی مرورگر گوگل کروم که از فرمت WebM پشتیبانی می کند بلافاصله بعد از رسیدن به MP4 چون از آن پشتیبانی می کند آن را پخس می کند و هیچوقت به پخش WebM نمی رسد و عملا کار ما بیهوده بوده است. پس دقت کنید که فرمت WebM را زودتر از MP4 بیاورید.

شاید دوست داشته باشید:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *