1. ভূমিকা
একটি ওয়েব পেজ লোড করার জন্য গড়ে ৬০% এরও বেশি বাইটের জন্য ছবি তৈরি করা হয়। AVIF ব্যবহার করে আপনি আপনার ছবিগুলি ছোট করতে পারেন এবং আপনার ওয়েবসাইট দ্রুত লোড করতে পারেন।
AVIF কি?
AVIF হল AV1 ভিডিও বিট্রিম থেকে প্রাপ্ত একটি চিত্র বিন্যাস। AVIF কম্প্রেশন দক্ষতার জন্য তৈরি করা হয়েছিল।
কেন AVIF?
AVIF ছবিগুলি JPEG, PNG, GIF, অথবা WebP ছবির তুলনায় অনেক ছোট, যাদের একই বা আরও ভালো মানের।
তুমি কি শিখবে
- আপনার ছবি থেকে AVIF ছবি কীভাবে তৈরি করবেন
- একটি ওয়েব পৃষ্ঠায় AVIF ছবি কীভাবে রেন্ডার করবেন
তোমার যা লাগবে
- যেকোনো প্রধান ব্রাউজার।
- একটি টেক্সট এডিটর
- সিএমকে
- গিট
- নিনজা
- একটি ছবি। আমি এখানে একটি দিয়েছি।
- এফএফএমপিইজি
2. Squoosh দিয়ে AVIF ছবি তৈরি করা
Squoosh হল একটি ইমেজ কম্প্রেশন ওয়েব অ্যাপ। squoosh এর সাহায্যে আপনি সহজেই আপনার ছবিগুলিকে AVIF ইমেজে কম্প্রেস করতে পারবেন।
- https://squoosh.app খুলুন
- Squoosh-এ একটি স্থানীয় ছবি দিন।
- কম্প্রেস ড্রপ-ডাউন বক্স থেকে AVIF নির্বাচন করুন।
এরপর Squoosh আপনার ছবিটিকে একটি AVIF ছবিতে সংকুচিত করবে। Squoosh সম্পন্ন হয়ে গেলে এটি নীচের ডান কোণায় AVIF ছবির কিছু পরিসংখ্যান সহ একটি ডাউনলোড বোতাম দেখাবে।
মূল নমুনা চিত্রটি ছিল 3340 kB এবং সংকুচিত চিত্রটি 378 kB। নমুনা চিত্রটি মূল চিত্রের চেয়ে প্রায় 10 গুণ ছোট সংকুচিত হয়েছিল!
- AVIF ছবিটি ডাউনলোড করুন
ডাউনলোড বোতামে ক্লিক করুন এবং AVIF ছবিটি আপনার স্থানীয় ড্রাইভে সংরক্ষণ করা হবে।
এখন তোমার নিজস্ব AVIF ছবি আছে!
৩. কমান্ড লাইন এনকোডার avifenc তৈরি করা
avifenc হল একটি কমান্ড লাইন অ্যাপ্লিকেশন যা PNG এবং JPEG ছবিগুলিকে AVIF ছবিতে রূপান্তর করতে পারে। avifenc libavif ব্যবহার করে, যা একটি লাইব্রেরি যা AVIF ছবিগুলিকে ডিকোড এবং এনকোড করতে পারে। যদি আপনার অনেক ছবি থাকে যা আপনি AVIF তে রূপান্তর করতে চান তবে কমান্ড লাইন এনকোডার, avifenc ব্যবহার করা সম্ভবত একটি ভাল পছন্দ।
- কোডটি নিন।
git clone https://github.com/AOMediaCodec/libavif.git
- ডিরেক্টরিটি libavif এ পরিবর্তন করুন।
cd libavif/
avifenc এবং libavif তৈরি করার জন্য আপনি অনেকগুলি ভিন্ন উপায়ে কনফিগার করতে পারেন। libavif এ আরও তথ্য পেতে পারেন। আমরা avifenc তৈরি করতে যাচ্ছি যাতে এটি libaom এনকোডার, dav1d ডিকোডার এবং libyuv প্রসেসিং লাইব্রেরির সাথে স্ট্যাটিক্যালি লিঙ্ক করা থাকে।
- কমান্ড লাইন এনকোডিং টুল, avifenc তৈরি করুন।
avifenc-এর জন্য একটি বিল্ড ডিরেক্টরি তৈরি করা ভালো ধারণা।
mkdir build
বিল্ড ডিরেক্টরিতে পরিবর্তন করুন।
cd build
avifenc এর জন্য বিল্ড ফাইল তৈরি করুন।
cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../
অ্যাভিফেনক তৈরি করুন।
make
তুমি সফলভাবে avifenc তৈরি করেছো!
৪. avifenc দিয়ে AVIF ছবি তৈরি করা
- ডিফল্ট সেটিংস সহ একটি AVIF ছবি তৈরি করুন।
avifenc চালানোর জন্য সবচেয়ে মৌলিক প্যারামিটার হল ইনপুট এবং আউটপুট ফাইল সেট করা।
./avifenc happy_dog.jpg example.avif
এখন তোমার নিজের দ্বিতীয় AVIF ছবি আছে!
- AVIF এনকোডিংয়ের মান পরিবর্তন করা হচ্ছে।
সাধারণত AVIF এনকোডিং-এ আপনি যে একমাত্র প্যারামিটারটি পরিবর্তন করতে চাইতে পারেন তা হল quality প্যারামিটার। quality হল এমন একটি প্যারামিটার যা একটি সংকুচিত ছবির মান ফাইলের আকারের সাথে বিনিময় করে। যেমন একটি উচ্চ মানের ফাইল ( -q 90 ) একটি নিম্ন মানের ফাইল ( -q 20 ) এর চেয়ে অনেক বড় হবে, তবে উচ্চ মানের ফাইলটি অনেক ভালো দেখাবে।
৫. একটি ওয়েব পৃষ্ঠায় AVIF ছবি রেন্ডার করুন।
এবার তোমার কঠোর পরিশ্রমের কৃতিত্ব বিশ্বকে দেখাও।
- আপনার AVIF ইমেজ পরিবেশন করার জন্য একটি ওয়েব পেজ তৈরি করুন।
avif_example.html নামে একটি ফাইল তৈরি করুন।
আপনার টেক্সট এডিটরে avif_example.html খুলুন এবং এই কোডটি টাইপ করুন:
<html>
<head>
<title>AVIF Example</title>
</head>
<body>
<picture>
<source type="image/avif" srcset="example.avif" />
<img src="happy_dog.jpg" />
</picture>
</body>
</html>
আপনার সোর্স ফাইল (আমার ক্ষেত্রে happy_dog.jpg ) এবং আপনার AVIF ফাইল ( eaxmple.avif ) avif_example.html এর মতো একই ডিরেক্টরিতে কপি করুন।
যদি ব্রাউজার AVIF সাপোর্ট করে তাহলে আমরা AVIF ইমেজ রেন্ডার করার জন্য picture এলিমেন্ট ব্যবহার করছি, যদি ব্রাউজার AVIF সাপোর্ট না করে তাহলে JPEG তে ফিরে আসবো। picture এলিমেন্ট সম্পর্কে আরও তথ্য আপনি এখানে জানতে পারেন।
- Chrome এ ওয়েব পৃষ্ঠা খুলুন।
html ফাইলটি খোলার একটি উপায় হল avif_example.html কে Chrome এ টেনে আনা। html ফাইলটি খোলার আরেকটি বিকল্প হল HTTP সার্ভার থেকে avif_example.html পরিবেশন করা।
এখন আপনার AVIF ছবিটি Chrome-এ রেন্ডার করা উচিত। আপনি ছবিতে ডান ক্লিক করে Save image as... নির্বাচন করে এটি পরীক্ষা করতে পারেন, যা example.avif সহ একটি ডায়ালগ বক্স খুলবে। আরেকটি বিকল্প হল Chrome Developer Tools খুলুন এবং দেখুন যে example.avif ডাউনলোড হয়েছে।
৬. FFmpeg দিয়ে অ্যানিমেটেড AVIF ছবি তৈরি করা
- একটি অ্যানিমেটেড AVIF ছবি তৈরি করুন।
y4m ফাইল থেকে একটি অ্যানিমেটেড AVIF ছবি তৈরি করতে এই কমান্ডটি চালান।
ffmpeg -i ice_qcif_15fps.y4m animated.avif
এখন তোমার নিজস্ব অ্যানিমেটেড AVIF ছবি আছে!
- একটি ওয়েব পৃষ্ঠায় অ্যানিমেটেড AVIF চিত্রটি রেন্ডার করুন।
avif_animated_example.html নামে একটি ফাইল তৈরি করুন।
আপনার টেক্সট এডিটরে avif_animated_example.html খুলুন এবং এই কোডটি টাইপ করুন:
<html>
<head>
<title>Animated AVIF Example</title>
</head>
<body>
<picture>
<source type="image/avif" srcset="animated.avif" />
<img src="ice_qcif_15fps.gif" />
</picture>
</body>
</html>
আপনার সোর্স ফাইল (উপরের ক্ষেত্রে ice_qcif_15fps.gif ) এবং আপনার AVIF ফাইল ( animated.avif ) avif_animated_example.html এর মতো একই ডিরেক্টরিতে কপি করুন।
- Chrome এ ওয়েব পৃষ্ঠা খুলুন।
html ফাইলটি খোলার একটি উপায় হল avif_animated_example.html কে Chrome এ টেনে আনা। html ফাইলটি খোলার আরেকটি বিকল্প হল HTTP সার্ভার থেকে avif_animated_example.html পরিবেশন করা।
এখন আপনার অ্যানিমেটেড AVIF ছবিটি Chrome এ রেন্ডার করা উচিত।
যদি প্রদত্ত নমুনা মাধ্যম ব্যবহার করা হয়, তাহলে এটি মোটামুটি এইরকম দেখাবে:
আপনি ছবিতে ডান ক্লিক করে Save image as... নির্বাচন করে এটি একটি অ্যানিমেটেড AVIF ছবি কিনা তা পরীক্ষা করতে পারেন, যা animated.avif সহ একটি ডায়ালগ বক্স খুলবে। আরেকটি বিকল্প হল Chrome Developer Tools খুলুন এবং দেখুন যে animated.avif ডাউনলোড হয়েছে।
৭. avifenc দিয়ে অ্যানিমেটেড AVIF ছবি তৈরি করা
- আপনার সোর্স মিডিয়াকে y4m ফর্ম্যাটে রূপান্তর করুন।
অ্যানিমেটেড AVIF ছবি তৈরির জন্য avifenc y4m ইনপুট হিসেবে সমর্থন করে। y4m ফাইল তৈরির জন্য একটি দুর্দান্ত বিকল্প হল FFmpeg ব্যবহার করা।
ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
- একটি অ্যানিমেটেড AVIF ছবি তৈরি করুন।
y4m ফাইল থেকে একটি অ্যানিমেটেড AVIF ছবি তৈরি করতে এই কমান্ডটি চালান।
./avifenc ice_qcif_15fps.y4m animated.avif
এখন তোমার নিজের দ্বিতীয় অ্যানিমেটেড AVIF ছবি আছে!
- একটি ওয়েব পৃষ্ঠায় অ্যানিমেটেড AVIF চিত্রটি রেন্ডার করুন।
avif_animated_example.html নামে একটি ফাইল তৈরি করুন।
আপনার টেক্সট এডিটরে avif_animated_example.html খুলুন এবং এই কোডটি টাইপ করুন:
<html>
<head>
<title>Animated AVIF Example</title>
</head>
<body>
<picture>
<source type="image/avif" srcset="animated.avif" />
<img src="ice_qcif_15fps.gif" />
</picture>
</body>
</html>
আপনার সোর্স ফাইল (উপরের ক্ষেত্রে ice_qcif_15fps.gif ) এবং আপনার AVIF ফাইল ( animated.avif ) avif_animated_example.html এর মতো একই ডিরেক্টরিতে কপি করুন।
- Chrome এ ওয়েব পৃষ্ঠা খুলুন।
html ফাইলটি খোলার একটি উপায় হল avif_animated_example.html কে Chrome এ টেনে আনা। html ফাইলটি খোলার আরেকটি বিকল্প হল HTTP সার্ভার থেকে avif_animated_example.html পরিবেশন করা।
এখন আপনার অ্যানিমেটেড AVIF ছবিটি Chrome এ রেন্ডার করা উচিত।
যদি প্রদত্ত নমুনা মাধ্যম ব্যবহার করা হয়, তাহলে এটি দেখতে এরকম হওয়া উচিত:
আপনি ছবিতে ডান ক্লিক করে Save image as... নির্বাচন করে এটি একটি অ্যানিমেটেড AVIF ছবি কিনা তা পরীক্ষা করতে পারেন, যা animated.avif সহ একটি ডায়ালগ বক্স খুলবে। আরেকটি বিকল্প হল Chrome Developer Tools খুলুন এবং দেখুন যে animated.avif ডাউনলোড হয়েছে।
- AVIF এনকোডিংয়ের মান পরিবর্তন করা হচ্ছে।
ice_qcif_15fps.gif ফাইলটি ~7x বড় এবং এর মান অনেক খারাপ। আপনি AVIF এর মান ice_qcif_15fps.gif এর মানের সাথে মোটামুটিভাবে মিলিয়ে ২০ এ পরিবর্তন করতে পারেন।
./avifenc -q 20 ice_qcif_15fps.y4m animated.avif
এখন অ্যানিমেটেড AVIF ফাইল এবং ice_qcif_15fps.gif এর মান প্রায় একই, কিন্তু GIF ফাইলটি প্রায় ২২ গুণ বড়।
৮. অভিনন্দন!
আপনি AVIF ইমেজ কোড ল্যাব পরিবেশন শেষ করেছেন!
আশা করি আপনার কাছে এটা স্পষ্ট হয়ে গেছে যে AVIF কীভাবে আপনার ছবিগুলিকে ছোট করে এবং ওয়েবে প্রেরণের জন্য আরও দক্ষ করে তুলতে পারে। AVIF-এর বৈশিষ্ট্যগুলি সম্পর্কে আপনি জ্যাক আর্চিবল্ডের একটি দুর্দান্ত পোস্টে আরও জানতে পারবেন।