AVIF ছবি পরিবেশন করা

১. ভূমিকা

কোনও ওয়েব পেজ লোড করার জন্য গড়ে যত বাইট প্রয়োজন হয়, তার মধ্যে ৬০%-এর বেশি হল ছবি। AVIF ব্যবহার করে আপনি ছবি ছোট করতে এবং ওয়েবসাইট দ্রুত লোড করতে পারবেন।

AVIF কী?

AVIF হল AV1 ভিডিও বিটস্ট্রিম থেকে প্রাপ্ত ছবির ফর্ম্যাট। কম্প্রেশন দক্ষতার জন্য AVIF তৈরি করা হয়েছে।

AVIF কেন?

AVIF ছবি JPEG, PNG, GIF বা WebP ছবির চেয়ে অনেক ছোট হয় এবং একই বা আরও ভালো কোয়ালিটি প্রদান করে।

আপনি কী শিখবেন

• আপনার ছবি থেকে কীভাবে AVIF ছবি তৈরি করবেন
• ওয়েবপেজে কীভাবে AVIF ছবি রেন্ডার করতে হয়

আপনার কী প্রয়োজন হবে

• যেকোনও প্রধান ব্রাউজার।
• একটি টেক্সট এডিটর
• cmake
• git
• নিনজা
• একটি ছবি। আমি এই লিঙ্কে একটি দিয়েছি।
• FFmpeg

২. Squoosh-এর মাধ্যমে AVIF ছবি তৈরি করা

Squoosh হল একটি ইমেজ কম্প্রেশন ওয়েব অ্যাপ যা আপনার ছবিকে AVIF ছবিতে কনভার্ট করতে পারে।

1. Squoosh খুলুন।
2. Squoosh-এ একটি লোকাল ছবি ড্রপ করুন।

3. 'কম্প্রেস' ড্রপ-ডাউন বক্স থেকে AVIF বেছে নিন।

Squoosh আপনার ছবিকে AVIF ছবিতে কম্প্রেস করবে। Squoosh হয়ে গেলে, নিচে ডানদিকের কোণে AVIF ছবি সহ কিছু পরিসংখ্যান সহ একটি ডাউনলোড বোতাম দেখাবে।

আসল স্যাম্পেল ছবির সাইজ ছিল ৩৩৪০ কেবি এবং কম্প্রেস করা ছবির সাইজ হল ৩৭৮ কেবি। স্যাম্পেল ছবিটিকে আসল ছবির থেকে প্রায় ১০ গুণ ছোট করে কম্প্রেস করা হয়েছে!

4. AVIF ছবি ডাউনলোড করুন

ডাউনলোড বোতামে ক্লিক করুন এবং AVIF ছবি আপনার লোকাল ড্রাইভে সেভ হয়ে যাবে।

Chrome-এ ছবি টেনে এনে আপনি AVIF ছবি দেখতে পারবেন।

আপনার কাছে এখন নিজের AVIF ছবি আছে!

৩. কমান্ড লাইন এনকোডার avifenc তৈরি করা

avifenc হল একটি কমান্ড লাইন অ্যাপ্লিকেশন যা PNG এবং JPEG ছবিকে AVIF ছবিতে কনভার্ট করতে পারে। avifenc, libavif ব্যবহার করে, যা একটি লাইব্রেরি এবং AVIF ছবি ডিকোড ও এনকোড করতে পারে। আপনি যদি AVIF-এ কনভার্ট করতে চান এমন অনেক ছবি থাকে, তাহলে কমান্ড লাইন এনকোডার, avifenc ব্যবহার করা সম্ভবত একটি ভাল বিকল্প।

Chrome, AVIF ছবি রেন্ডার করার জন্য libavif ব্যবহার করে।

1. কোডটি পান।

git clone https://github.com/AOMediaCodec/libavif.git

2. ডিরেক্টরি পরিবর্তন করে libavif করুন।

cd libavif/

আপনি বিভিন্ন উপায়ে avifenc এবং libavif কনফিগার করতে পারেন। আপনি libavif-এ আরও তথ্য পাবেন। আমরা avifenc তৈরি করতে চলেছি যাতে এটি libaom এনকোডার, dav1d ডিকোডার এবং libyuv প্রসেসিং লাইব্রেরির সাথে স্ট্যাটিক লিঙ্ক করা থাকে।

কালার কনভার্সনের পারফর্ম্যান্স দ্রুত করার জন্য libyuv গুরুত্বপূর্ণ।

3. কমান্ড লাইন এনকোডিং টুল, 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 ../

avifenc বিল্ড করুন।

make

আপনি avifenc তৈরি করেছেন!

৪. avifenc-এর সাহায্যে AVIF ছবি তৈরি করা

1. ডিফল্ট সেটিংস সহ AVIF ছবি তৈরি করুন।

avifenc চালানোর জন্য সবচেয়ে প্রাথমিক প্যারামিটার হল ইনপুট ও আউটপুট ফাইল সেট করা।

./avifenc happy_dog.jpg example.avif

এখন আপনার কাছে নিজের দ্বিতীয় AVIF ছবি আছে!

2. AVIF এনকোডিংয়ের কোয়ালিটি পরিবর্তন করা হচ্ছে।

সাধারণত, AVIF এনকোডিংয়ে আপনি যে প্যারামিটার পরিবর্তন করতে চাইতে পারেন সেটি হল quality প্যারামিটার। quality হল একটি প্যারামিটার যা ফাইলের সাইজের জন্য কম্প্রেস করা ছবির কোয়ালিটি ট্রেড করে। যেমন, খুব ভালো কোয়ালিটির ফাইল (-q 90) খারাপ কোয়ালিটির ফাইলের (-q 20) চেয়ে অনেক বড় হবে, কিন্তু খুব ভালো কোয়ালিটির ফাইলটি দেখতে অনেক ভালো হবে।

avifenc-এ অনেক বিকল্প আছে যা কোয়ালিটি ও স্পিড উভয়কেই প্রভাবিত করবে। আপনি বিকল্পগুলি দেখতে চাইলে এবং সেগুলি সম্পর্কে আরও জানতে চাইলে, শুধু ./avifenc

৫. ওয়েব পেজে AVIF ছবি রেন্ডার করুন।

এখন আপনার কঠোর পরিশ্রমের ফল সারা বিশ্বকে দেখান।

1. আপনার 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>

avif_example.html-এর মতো একই ডিরেক্টরিতে আপনার সোর্স ফাইল (আমার ক্ষেত্রে happy_dog.jpg) এবং আপনার AVIF ফাইল (example.avif) কপি করুন।

ব্রাউজার AVIF সাপোর্ট করলে, AVIF ছবি রেন্ডার করার জন্য আমরা picture এলিমেন্ট ব্যবহার করছি, ব্রাউজার সাপোর্ট না করলে JPEG-তে ফলব্যাক করা হবে। picture এলিমেন্ট সম্পর্কে আরও জানুন।

2. Chrome-এ ওয়েব পেজ খুলুন।

html ফাইল খোলার একটি উপায় হল avif_example.html Chrome-এ টেনে আনা। html ফাইল খোলার আরেকটি বিকল্প হল, HTTP সার্ভার থেকে avif_example.html পরিবেশন করা।

এখন আপনার AVIF ছবি Chrome-এ রেন্ডার করা উচিত। আপনি এটি পরীক্ষা করতে, ছবির উপর মাউস নিয়ে গিয়ে ডানদিকের বোতামে ক্লিক করে Save image as... বেছে নিতে পারেন, যা example.avif সহ একটি ডায়ালগ বক্স খুলবে। অন্য একটি বিকল্প হল, Chrome ডেভেলপার টুল খুলে example.avif ডাউনলোড হয়েছে কিনা তা দেখা।

৬. FFmpeg-এর সাহায্যে অ্যানিমেটেড AVIF ছবি তৈরি করা

আপনার সিস্টেমে FFmpeg ইনস্টল করার বিষয়টি এই কোডল্যাবের আওতার বাইরে। আপনার সিস্টেমে কীভাবে FFmpeg পাবেন সেই সম্পর্কে আরও তথ্য পেতে, FFmpeg ডকুমেন্টেশন দেখুন।

আপনার কাছে সোর্স মিডিয়া ফাইল না থাকলে ব্যবহার করার জন্য আমি একটি y4m ফাইল তৈরি করেছি: ice_qcif_15fps.y4m. এই ফাইলটি Xiph.org Video Test Media থেকে নেওয়া হয়েছে।

Y4m ফাইল কম্প্রেস করা হয় না, তাই সেগুলি খুব বড় হতে পারে।

1. অ্যানিমেটেড AVIF ছবি তৈরি করুন।

y4m ফাইল থেকে অ্যানিমেটেড AVIF ছবি তৈরি করতে এই কমান্ডটি চালান।

ffmpeg -i ice_qcif_15fps.y4m animated.avif

এখন আপনার কাছে নিজস্ব অ্যানিমেটেড AVIF ছবি আছে!

2. ওয়েবপেজে অ্যানিমেটেড AVIF ছবি রেন্ডার করো।

avif_animated_example.html নামের একটি ফাইল তৈরি করো।

আপনার কাছে সোর্স মিডিয়া ফাইল না থাকলে, এখানে একটি gif ফাইল দেওয়া হল যা আপনি ব্যবহার করতে পারেন: ice_qcif_15fps.gif.

আপনার টেক্সট এডিটরে 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-এর মতো একই ডিরেক্টরিতে কপি করুন।

3. Chrome-এ ওয়েব পেজ খুলুন।

html ফাইল খোলার একটি উপায় হল avif_animated_example.html Chrome-এ টেনে আনা। html ফাইল খোলার আরেকটি বিকল্প হল, HTTP সার্ভার থেকে avif_animated_example.html পরিবেশন করা।

এখন আপনার অ্যানিমেটেড AVIF ছবি Chrome-এ রেন্ডার করা উচিত।

প্রদান করা স্যাম্পেল মিডিয়া ব্যবহার করলে, এটি মোটামুটি এইরকম দেখতে হবে:

আপনি এই অ্যানিমেটেড AVIF ছবি পরীক্ষা করতে পারবেন। এর জন্য ছবির উপর মাউস রেখে ডানদিকের বোতামে ক্লিক করে Save image as... বেছে নিন। এটি animated.avif সহ একটি ডায়ালগ বক্স খুলবে। অন্য একটি বিকল্প হল, Chrome ডেভেলপার টুল খুলে animated.avif ডাউনলোড হয়েছে কিনা তা দেখা।

৭. avifenc-এর মাধ্যমে অ্যানিমেটেড AVIF ছবি তৈরি করা

1. আপনার সোর্স মিডিয়াকে y4m ফর্ম্যাটে কনভার্ট করুন।

avifenc অ্যানিমেটেড AVIF ছবি তৈরি করার জন্য ইনপুট হিসেবে y4m ফর্ম্যাট ব্যবহার করা যায়। y4m ফাইল তৈরি করার একটি দুর্দান্ত বিকল্প হল FFmpeg ব্যবহার করা।

Y4m ফাইল কম্প্রেস করা হয় না, তাই সেগুলি খুব বড় হতে পারে।

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

2. অ্যানিমেটেড AVIF ছবি তৈরি করো।

আপনার কাছে সোর্স মিডিয়া ফাইল না থাকলে, ব্যবহার করার জন্য আমি একটি y4m ফাইল তৈরি করেছি: ice_qcif_15fps.y4m. এই ফাইলটি Xiph.org Video Test Media থেকে নেওয়া হয়েছে।

y4m ফাইল থেকে অ্যানিমেটেড AVIF ছবি তৈরি করতে এই কমান্ডটি চালান।

./avifenc ice_qcif_15fps.y4m animated.avif

আপনার কাছে এখন নিজের দ্বিতীয় অ্যানিমেটেড AVIF ছবি আছে!

3. ওয়েব পেজে অ্যানিমেটেড AVIF ছবি রেন্ডার করুন।

avif_animated_example.html নামের একটি ফাইল তৈরি করুন।

আপনার কাছে সোর্স মিডিয়া ফাইল না থাকলে, ব্যবহার করার জন্য আমি একটি gif ফাইল তৈরি করেছি: ice_qcif_15fps.gif।

আপনার টেক্সট এডিটরে 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-এর মতো একই ডিরেক্টরিতে কপি করুন।

4. Chrome-এ ওয়েব পেজ খুলুন।

html ফাইল খোলার একটি উপায় হল avif_animated_example.html Chrome-এ টেনে আনা। html ফাইল খোলার আরেকটি বিকল্প হল, HTTP সার্ভার থেকে avif_animated_example.html পরিবেশন করা।

এখন আপনার অ্যানিমেটেড AVIF ছবি Chrome-এ রেন্ডার করা উচিত।

প্রদান করা নমুনা মিডিয়া ব্যবহার করলে, এটি এমন দেখতে হবে:

অ্যানিমেটেড AVIF ছাড়া, অনেক ভালো কোয়ালিটি।

আপনি এই অ্যানিমেটেড AVIF ছবি পরীক্ষা করতে পারবেন। এর জন্য ছবির উপর মাউস রেখে ডানদিকের বোতামে ক্লিক করে Save image as... বেছে নিন। এটি animated.avif সহ একটি ডায়ালগ বক্স খুলবে। অন্য একটি বিকল্প হল, Chrome ডেভেলপার টুল খুলে animated.avif ডাউনলোড হয়েছে কিনা তা দেখা।

5. AVIF এনকোডিংয়ের কোয়ালিটি পরিবর্তন করা হচ্ছে।

ice_qcif_15fps.gif ফাইলটি ~৭ গুণ বড় এবং এর কোয়ালিটি অনেক খারাপ। কোয়ালিটি প্যারামিটার ২০-এ পরিবর্তন করে, আপনি AVIF-এর কোয়ালিটি ice_qcif_15fps.gif-এর কোয়ালিটির সাথে মোটামুটি ম্যাচ করতে পারবেন।

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

এখন অ্যানিমেটেড AVIF ফাইল এবং ice_qcif_15fps.gif-এর কোয়ালিটি প্রায় একই, কিন্তু GIF ফাইলটি ~২২ গুণ বড়।

৮. অভিনন্দন!

আপনি AVIF ছবি পরিবেশন করার কোড ল্যাব সম্পূর্ণ করেছেন!

আশা করি, AVIF কীভাবে আপনার ছবিকে ছোট এবং ওয়েবে ট্রান্সমিট করার জন্য আরও কার্যকর করে তুলতে পারে তা আপনি বুঝতে পেরেছেন। Jake Archibald-এর লেখা একটি দুর্দান্ত পোস্ট থেকে আপনি AVIF-এর ফিচার সম্পর্কে আরও জানতে পারবেন।