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

تفاوت ویدئو و تصویر متحرک Gif

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

همانطور که کاملا مشهود است تصویر متحرک سمت راست(در موبایل، بالایی) فقط 17 کیلوبایت حجم دارد و خیلی روان و بدون کندی در حال اجراست. اما تصویر متحرک سمت چپ(در موبایل، پایینی) کمی کند و حجم 172 کیلوبایت یعنی 6 برابر تصویر سمت راست. اما واقعا چرا؟

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

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

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

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

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

ویدئوهای 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 از سال 1999 به دنیا معرفی شد فرمت WebM به عنوان یک فرمت همتراز در سال 2010 معرفی شد. ویدئوهای WebM خیلی از ویدئوهای MP4 کوچکتر هستند، اما تمام مرورگرها از آن پشتیبانی نمی کنند پس ما باید هر دو فرمت را تولید و استفاده کنیم.
برای تبدیل فایل rocket-original.gif به فرمت WebM با استفاده از FFmpeg دستور زیر را داخل خط فرمان وارد کنید:

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

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

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

در این مثال، تصویر اولیه Gif را که 489 کیلوبایت حجم دارد را با نسخه MP4 آن که حجم 27 کیلوبایت دارد و با نسخه WebM آن که فقط 20 کیلوبایت دارد مقایسه کنید!

تصویر 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 بیاورید.