আপনি কি কখনো Imgur বা Gfycat-এর মতো কোনো সার্ভিসে একটি অ্যানিমেটেড GIF দেখে, আপনার ডেভ টুলসে সেটি পরীক্ষা করে দেখেছেন, এবং পরে জানতে পেরেছেন যে GIF-টি আসলে একটি ভিডিও ছিল? এর একটি ভালো কারণ আছে। অ্যানিমেটেড GIF-গুলো বেশ বড় আকারের হতে পারে।
সৌভাগ্যবশত, লোডিং পারফরম্যান্সের এটি এমন একটি ক্ষেত্র যেখানে তুলনামূলকভাবে কম কাজ করেই বিশাল উন্নতি লাভ করা যায়! বড় আকারের GIF ফাইলকে ভিডিওতে রূপান্তর করার মাধ্যমে আপনি ব্যবহারকারীদের ব্যান্ডউইথ ব্যাপকভাবে সাশ্রয় করতে পারেন ।
প্রথমে পরিমাপ করুন
আপনার সাইটে ভিডিওতে রূপান্তরযোগ্য GIF আছে কিনা তা পরীক্ষা করতে Lighthouse ব্যবহার করুন। DevTools-এ, Audits ট্যাবে ক্লিক করুন এবং Performance চেকবক্সটি চেক করুন। তারপর Lighthouse চালান এবং রিপোর্টটি দেখুন। যদি আপনার সাইটে রূপান্তরযোগ্য কোনো GIF থাকে, তাহলে আপনি "Use video formats for animated content" (অ্যানিমেটেড কন্টেন্টের জন্য ভিডিও ফরম্যাট ব্যবহার করুন) এই পরামর্শটি দেখতে পাবেন।
MPEG ভিডিও তৈরি করুন
GIF ফাইলকে ভিডিওতে রূপান্তর করার বিভিন্ন উপায় রয়েছে, এই নির্দেশিকায় FFmpeg টুলটি ব্যবহার করা হয়েছে। my-animation.gif ফাইলটিকে MP4 ভিডিওতে রূপান্তর করতে FFmpeg ব্যবহার করার জন্য, আপনার কনসোলে নিম্নলিখিত কমান্ডটি চালান:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
এটি FFmpeg-কে নির্দেশ দেয় যে, -i ফ্ল্যাগ দ্বারা নির্দেশিত my-animation.gif ফাইলটিকে ইনপুট হিসেবে গ্রহণ করে সেটিকে my-animation.mp4 নামের একটি ভিডিওতে রূপান্তর করতে হবে।
libx264 এনকোডারটি শুধুমাত্র জোড় মাপের ফাইলের সাথেই কাজ করে, যেমন ৩২০ পিক্সেল বাই ২৪০ পিক্সেল। যদি ইনপুট GIF-টির মাপ বিজোড় হয়, তবে FFmpeg-এর 'height/width not divisible by 2' ত্রুটি দেখানো এড়াতে আপনি একটি ক্রপ ফিল্টার অন্তর্ভুক্ত করতে পারেন।
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
WebM ভিডিও তৈরি করুন
যদিও MP4 ১৯৯৯ সাল থেকে প্রচলিত, WebM একটি তুলনামূলকভাবে নতুন ফাইল ফরম্যাট যা ২০১০ সালে প্রথম প্রকাশিত হয়। WebM ভিডিও MP4 ভিডিওর চেয়ে অনেক ছোট হয়, কিন্তু সব ব্রাউজার WebM সমর্থন করে না, তাই উভয় ফরম্যাটই তৈরি করা যুক্তিযুক্ত।
FFmpeg ব্যবহার করে my-animation.gif WebM ভিডিওতে রূপান্তর করতে, আপনার কনসোলে নিম্নলিখিত কমান্ডটি চালান:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
পার্থক্য তুলনা করুন
একটি GIF এবং একটি ভিডিওর মধ্যে খরচের সাশ্রয় বেশ উল্লেখযোগ্য হতে পারে।
এই উদাহরণে, মূল GIF ফাইলটির সাইজ ৩.৭ মেগাবাইট, যেখানে MP4 ভার্সনটির সাইজ ৫৫১ কিলোবাইট এবং WebM ভার্সনটির সাইজ মাত্র ৩৪১ কিলোবাইট!
GIF ছবিটিকে একটি ভিডিও দিয়ে প্রতিস্থাপন করুন।
অ্যানিমেটেড জিআইএফ-এর তিনটি প্রধান বৈশিষ্ট্য রয়েছে যা একটি ভিডিওতে অনুকরণ করা প্রয়োজন:
- সেগুলো স্বয়ংক্রিয়ভাবে চলে।
- এগুলো ক্রমাগত চলতে থাকে (সাধারণত, তবে এই চক্র প্রতিরোধ করা সম্ভব)।
- তারা নীরব।
সৌভাগ্যবশত, আপনি <video> এলিমেন্ট ব্যবহার করে এই আচরণগুলো পুনরায় তৈরি করতে পারেন।
<video autoplay loop muted playsinline></video>
এই অ্যাট্রিবিউটগুলো সহ একটি <video> এলিমেন্ট স্বয়ংক্রিয়ভাবে প্লে হয়, অবিরাম চলতে থাকে, কোনো অডিও বাজায় না এবং ইনলাইনে (অর্থাৎ, ফুল স্ক্রিন নয়) প্লে হয়—অ্যানিমেটেড জিআইএফ-এর প্রত্যাশিত এই সমস্ত বৈশিষ্ট্যই এতে বিদ্যমান! 🎉
অবশেষে, <video> এলিমেন্টের জন্য এক বা একাধিক <source> চাইল্ড এলিমেন্ট প্রয়োজন হয়, যা বিভিন্ন ভিডিও ফাইলকে নির্দেশ করে। ব্রাউজারের ফরম্যাট সাপোর্টের ওপর নির্ভর করে ফাইলগুলো থেকে ব্রাউজার বেছে নিতে পারে। WebM এবং MP4 উভয়ই সরবরাহ করুন, যাতে কোনো ব্রাউজার WebM সাপোর্ট না করলে, এটি MP4 ব্যবহার করতে পারে।
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
বৃহত্তম বিষয়বস্তুপূর্ণ পেইন্ট (LCP)-এর উপর প্রভাব
উল্লেখ্য যে, <img> এলিমেন্টগুলো LCP-এর জন্য উপযুক্ত হলেও, poster ইমেজ ছাড়া <video> এলিমেন্টগুলো LCP-এর জন্য উপযুক্ত নয়। অ্যানিমেটেড GIF অনুকরণ করার ক্ষেত্রে সমাধান হলো আপনার <video> এলিমেন্টগুলোতে poster অ্যাট্রিবিউট যোগ না করা, কারণ সেক্ষেত্রে সেই ইমেজটি অব্যবহৃত থেকে যাবে।
আপনার ওয়েবসাইটের জন্য এর অর্থ কী? পরামর্শটি হলো অ্যানিমেটেড GIF-এর পরিবর্তে একটি <video> ব্যবহার করা, তবে এই শর্তে যে এই ধরনের মিডিয়া LCP-এর জন্য উপযুক্ত হবে না এবং এর পরিবর্তে পরবর্তী বৃহত্তম বিকল্পটি ব্যবহৃত হবে। যেহেতু GIF এবং <video> > সাধারণত আকারে বড় এবং ডাউনলোড হতে বেশি সময় নেয়, তাই একটি ভিন্ন LCP বিকল্পে স্থানান্তরিত হলে সাইটের LCP সম্ভবত আরও উন্নত হবে।