تبدیل gif به ویدئوهای HTML5 برای افزایش سرعت صفحه
بنظر شما تبدیل gif به ویدئوهای HTML5 تا چه اندازه ضروری است؟ گیف های متحرک، بیش از هر فرمت فایل دیجیتال دیگری، قلب و ذهن کاربران آنلاین را تسخیر کرده اند. اما متاسفانه بهینه سازی آنها بسیار سخت است!
ممکن است تا به حال برای شما هم پیش آمده است که یک ساعت تلاش کرده اید تا کیفیت، نرخ فریم و طول یک GIF را تغییر دهید، در نهایت آن را رها کرده اید! زیرا نتوانسته اید فایل زیر 2 مگابایت را دریافت کنید مگر آنکه یک GIF به شکل افتضاحی.
چه راهکاری برای رفع این مساله وجود دارد؟ ویدیوی HTML5 روشی ساده برای افزودن انیمیشن های GIF مانند به سایت بدون دردسر فراهم می کند.
آنچه در این مقاله می خوانید :
اهمیت جایگزینی ویدئوهای HTML5 بجای Gif
سوال مهمی که پیش می آید این است که جایگزینی گیف های متحرک با ویدئوی html5 برای افزایش سرعت صفحه چقدر مهم است؟
جای تعجب نیست که سرویس هایی مانند Giphy حتی خود از فرمت فایل GIF استفاده نمی کنند. در عوض، آنها از ویدیوهای HTML5 استفاده می کنند که اغلب تا 90٪ اندازه کوچکتر دارند.
در این مقاله، ما به شما نشان خواهیم داد که چقدر آسان است که GIF ها را به ویدیوی HTML5 تبدیل کنید و به اندازه فایل های فوق العاده کوچکی برای سایت خود برسید. پس برای افزایش سرعت با استفاده از تبدیل gif به ویدئوهای HTML5 تا پایان مقاله همراه ما باشید.
چگونه GIF ها در وهله اول به شبه ویدیوها تبدیل شدند؟
فرمت فایل GIF هرگز برای استفاده در انیمیشن یا ویدیو طراحی نشده بود. در واقع، این موضوع به صراحت در مشخصات GIF89a که در سال 1990 منتشر شده، ذکر شده است:
فرمت تبادل گرافیکی به عنوان یک پلتفرم برای انیمیشن طراحی نشده است، هرچند که می توان به شکل محدود این کار را انجام داد
پس چگونه به اینجا رسیدیم، در این دنیای آنلاین، جایی که GIF ها فرمت اصلی انیمیشن ها هستند؟ و آیا بایستی تبدیل gif به ویدئوهای HTML5 را انجام دهیم؟
GIF ها در واقع برای نگهداری چندین تصویر در یک فایل واحد طراحی شده اند، همانند یک فایل ZIP برای تصاویر. این نحوه استفاده از آن ها تا زمان معرفی نسخه 2.0 Netscape در سال 1995 بود که افزونه تکرار را معرفی کرد و انیمیشن های GIF را رایگان کرد و به آن ها جان داد.
در آن روزها اینترنت در دست ساخت بود و GIF هم همینطور. بچه های رقصنده و همسترهای رقصنده وجود داشت. گیفها سرگرمی بیضرر بودند، زیرا انیمیشنهای سادهای بودند، اغلب با رنگها و فریمهای کوچکی که حجم فایلشان را محدود میکرد.
در حال حاضر که 30 سال از اختراع GIF ها می گذرد، آنها به یک هنر در نوع خود تبدیل شده اند. Reddit، Twitter و Tumblr به محبوبیت gif ها کمک کردند و اشتراک گذاری سریع یک GIF متحرک را برای همه آسان کردند.
همچنین سرویس هایی مانند Giphy و Imgur یافتن سریع یک GIF و به اشتراک گذاری واکنش را آسان تر از همیشه کرده اند.
گیف های واکنشی ها اکنون به یک شکل از ابراز احساسات تبدیل شده اند. اگر شما هم همین گونه فکر می کنید، احتمالاً در پاسخ گویی به برخی کامنت ها با استفاده از GIF به جای کلمات، پاسخ دادهاید، زیرا اغلب یک GIF بیشتر از کلمات میتواند احساسی را منتقل کند، یا برای نوشتن یک شوخی ، بیشتر از کلمات کمک کند.
علاوه بر سرگرم کننده بودن، GIF ها چندین مزیت دارند:
- به طور کامل توسط مرورگرها پشتیبانی می شود.
- جهانی قابل درک است یعنی همه می دانند GIF چیست.
- ابزارهای آسان برای استفاده و در دسترس برای ایجاد آنها.
- هیچ نگرانی مربوط به حق اختراع یا مجوزی که در مورد کدک های ویدیویی رایج اعمال می شود.
- درج آسان در سایت ها با استفاده از img
- به اشتراک گذاری آسان در سیستم عامل های اجتماعی
GIF != Video ( گیف و ویدئو باهم فرق دارند)
GIF های 2018 ، همانند سال 1995 تنها مجموعهای از تصاویر ساده نیستند، بلکه اغلب، به جای استفاده از فرمت های معمولی ویدئو ، ویدئو ها به صورت یک گیف کوچک ذخیره می شوند که معمولا فقط چند ثانیه طول می کشد.
قبل از اینکه به ادامه ی مبحث gif بپردازیم، اگر سایتی دارید که سرعت آن برایتان اهمیت دارد، مقاله تاثیر گواهینامه Ssl بر سرعت لود صفحات سایت را مطالعه نمایید و در صورت تمایل از خدمات خرید اس اس ال (ssl) – گواهینامه اس اس ال + نصب رایگان کامل در سایت ما استفاده نمایید.
برخلاف فرمتهای ویدیویی واقعی، GIFها از هیچ نوع تکنیکهای رمزگذاری یا فشردهسازی ویدیو استفاده نمیکنند. بنابراین یک GIF که تنها چند ثانیه طول میکشد، بسته به نرخ فریم و کیفیت، میتواند به سرعت به چندین مگابایت برسد.
علاوه بر این، گیفها فاقد کیفیت ویدیو هستند و محدودیتهای رنگی و نرخ فریم پایینتری دارند.
دلایل تبدیل gif به ویدئوهای HTML5
در رابطه با ضرورت تبدیل gif به ویدئوهای HTML5 باید گفت که قبل از HTML5، ویدیوها فقط در مرورگرها و با استفاده از افزونهها مانند Flash قابل پخش بودند.
HTML5 با استفاده از تگ <video> ویدئو را روی سر خود قرار داد و راهی استاندارد برای نمایش ویدئو در وب ارائه کرد.
در حالی که رمزگذاری ویدئو زمان بیشتری می برد، HTML5 در مقایسه با GIF مزایای زیادی دارد:
- با استفاده از تگ
<video>به راحتی می توان فیلم ها را در سایت ها قرار داد. - اندازه فایل کوچک
- عملکرد بهتر
- رنگ ها و جزئیات بیشتر
سه فرمت ویدئویی HTML5 پشتیبانی می شود: MP4، WebM و Ogg. از بین این سه فرمت، MP4 گستردهترین فرمت است که 94 درصد مرورگرها از این فرمت فشردهسازی ویدئو استفاده میکنند.
WebM، یک فرمت ویدیویی و صوتی که Google به عنوان یک کدک بدون حق امتیاز توسعه داده است، با 79٪ فاصله زیادی ندارد (به زیر مراجعه کنید). با این حال، اپل از WebM پشتیبانی نمی کند و بعید است به این زودی ها این کار را انجام دهد.
در نهایت، OGG در 78٪ از مرورگرها پشتیبانی می شود. اما در مرورگرهای اپل نیز در دسترس نیست.
HTML5 در مقابل gif
بنابراین کیفیت ویدیوی HTML5 در مقابل gif چگونه است؟ همانطور که تاکنون بررسی کرده ایم، فرمت های ویدئویی در واقع برای ویدئو طراحی شده اند. بنابراین، بدیهی است که آنها تصاویر متحرک را مدیریت خواهند کرد. به عنوان مثال. ویدئو و انیمیشن بسیار بهتر از GIF است.
این نمونه از یک GIF متحرک از Game of Thrones را بررسی کنید:
حجم آن 2 مگابایت است. برای انیمیشنی که به سختی 3 ثانیه طول می کشد بسیار بزرگ است.
اکنون، این یک ویدیو MP4 است که ما از فایل GIF فوق تبدیل کرده ایم:
تبدیل gif به ویدئوهای HTML5 برای افزایش سرعت صفحه
تبدیل GIF های متحرک به ویدیوی HTML5
اما برای تبدیل gif به ویدئوهای HTML5 برای افزایش سرعت صفحه راه های زیادی وجود دارد. از جمله ابزارهای آنلاین رایگان مانند ezgif.com، اما در این آموزش، می خواهم نحوه استفاده از FFmpeg را به شما نشان دهیم.
این ابزار خط فرمان منبع باز رایگان، فایلها و جریانهای چندرسانهای ویدیویی، صوتی و دیگر فایلهای چندرسانهای را مدیریت میکند و همچنین میتواند برای تبدیل GIFهای متحرک به فرمتهای ویدیویی، از جمله MP4، WebM، و OGG استفاده شود.
اگر قبلاً FFmpeg را نصب کرده اید، به سادگی ترمینال را روشن کنید و دستور ffmpeg را اجرا کنید.
اگر نصب شده است، برخی از اطلاعات تشخیصی را خواهید دید. اگر نصب نیست و پیغام خطا می بینید، باید آن را نصب کنید:
- برای MacOS، می توانید آن را از طریق Homebrew نصب کنید.
- برای ویندوز از Chocolatey استفاده کنید.
پس از نصب، یک GIF را که میخواهید به ویدیو تبدیل کنید، پیدا کنید. برای این مثال، ما قصد داریم یک GIF را به MP4 تبدیل کنم، زیرا MP4 به طور گسترده ای پشتیبانی می شود.
یک پنجره ترمینال را باز کنید، به دایرکتوری حاوی GIF خود تغییر دهید و دستور زیر را وارد کنید:
ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4
این ساده ترین روش برای تبدیل GIF به MP4 است. -i ورودی را مشخص می کند (در این مورد input.gif) و فایل خروجی بعد از آن نامگذاری می شود (در این مورد output.mp4).
اگر همراه با این راهنما دنبال میکنید، وقتی این دستور را وارد میکنید باید یک فایل جدید به نام output.mp4 را ببینید که به طور جادویی در فهرست شما ظاهر میشود.
FFmpeg دارای گزینه های زیادی است که می توانید از آنها برای تنظیم دقیق خروجی ویدیو استفاده کنید. یکی از این گزینهها استفاده از حالت رمزگذاری به نام ضریب نرخ ثابت (CRF) است که کیفیت ویدیو در اولویت بالایی قرار دارد:
ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4
این دستور از پرچم -b:v استفاده میکند که معمولاً نرخ بیت خروجی را محدود میکند، اما وقتی با حالت CRF استفاده میشود باید روی 0 تنظیم شود. -crf مقداری بین 0 و 51 را میپذیرد. هرچه مقدار کمتر باشد، کیفیت بالاتر و حجم فایل بزرگتر است.
با استفاده از این دستور، برای سومین بار گیف بازی تاج و تخت را اجرا کردیم و یک فایل MP4 با حجم 111 کیلوبایت بدون افت کیفیت محسوس خروجی داد.
این کاهش 94٪ در اندازه یا 6٪ از اندازه فایل اصلی است.
گزینه دیگری که ارزش آزمایش را دارد movflags است که ساختار فایل MP4 را بهینه می کند. معمولاً فایلهای MP4 تمام ابردادهها را در انتهای فایل ذخیره میکنند و با استفاده از -movflags faststart میتوانید آن را برای بارگذاری سریعتر به شروع انتقال دهید:
ffmpeg -i input.gif -movflags faststart output.mp4
گزینه های بیشتری برای بهینه سازی خروجی ویدیو وجود دارد. برای جزئیات بیشتر، مستندات فرمت های FFmpeg را بررسی کنید.
قبل از آنکه به سراغ ادامه بحث یعنی جایگزینی GIF با ویدیوی HTML5 برویم، پیشنهاد می شود، مقاله 5 سایت کاربردی برای فشرده سازی و کاهش حجم تصاویر را مطالعه نمایید چرا که شامل مطالب مفیدی برای داشتن یک سایت خوب است.
جایگزینی GIF با ویدیوی HTML5
قرار دادن یک GIF در یک صفحه وب بسیار آسان است. تنها کاری که باید انجام دهید این است که آن را مانند هر فایل تصویری آپلود کنید. خوشبختانه استفاده از تگ <video> نیز ساده است. فقط باید سه چیز را در نظر داشته باشید:
- گیف ها به صورت خودکار پخش می شوند.
- GIF ها به طور مداوم حلقه می شوند.
- گیف ها صدا ندارند.
هنگامی که یک GIF به سایت خود اضافه می کنید، لازم نیست نگران این ویژگی ها باشید زیرا GIF ها فقط کار می کنند.
اما وقتی ویدیویی را به سایت خود اضافه می کنید که می خواهید مانند یک GIF رفتار کند، باید این رفتارها را در نظر بگیرید.
برای افزودن یک GIF به سایت خود، از نشانه گذاری HTML مشابه این استفاده کنید:
< img src="cat.gif" alt="" width="400" height="300" />
برای درج یک ویدیو، موارد بالا را با این جایگزین کنید:
< video autoplay loop muted playsinline >
< source src="cat.mp4" type="video/mp4" >
</video>
شما متوجه چند ویژگی خواهید شد: پخش خودکار به ویدیو می گوید که به طور خودکار پخش شود، در حالی که حلقه تضمین می کند که ویدیوها به طور مداوم حلقه می شوند.
مشخصه بیصدا هر صدایی را خاموش میکند، اما باید برای پخش خودکار ویدیوها نیز وجود داشته باشد، حتی اگر صدا نداشته باشند. در دستگاههای iOS، playsinline نیز برای کارکرد پخش خودکار مورد نیاز است.
به طور کلی توجه کردن و اهمیت دادن به سرعت سایت یکی از مهم ترین اقداماتی است که باید برای سایتتان انجام دهید. تبدیل gif به html یکی از این راهکارهاست.
نتیجه گیری
همان طور که در مبحث تبدیل gif به ویدئوهای HTML5 توضیحات زیادی را خدمتتان ارائه دادیم، بیان کردیم که افزودن فایلهای GIF به هر صفحه وب بسیار آسان است. فقط کافی ست آن را آپلود کنید و مانند هر تصویر دیگری با آنها رفتار کنید.
اما مساله ی مهمی که وجود دارد این است که گیف ها یک فرمت وحشتناک برای نمایش انیمیشن و ویدیو هستند و معمولاً اندازه زیادی دارند. هنگامی که سعی می کنید سایت خود را بهینه کنید و عملکرد آن را بهبود بخشید، GIF ها فقط سرعت صفحه شما را کاهش می دهند.
پس راهکار چیست؟ ویدیوی HTML5 روشی ساده برای افزودن انیمیشن های به شکل GIF به سایت شما بدون دردسر فراهم می کند.
با استفاده از اسنیپت های بالا، می توانید فایل های GIF را به MP4 تبدیل کنید و فایل های خروجی را که فقط 6 درصد از نسخه اصلی هستند، دریافت کنید! و بدون افت قابل توجه کیفیت.
اگر آن دسته از افرادی هستید که می خواهید سرعت سایتتان را به طور حرفه ای و اصولی افزایش دهید، می توانید از خدمات افزایش سرعت سایت وردپرسی [تضمینی زیر 3 ثانیه] در سایت ما استفاده کنید و لذت داشتن یک سایت حرفهای را بچشید.
منبع : wp-rocket.me
