AVIF ছবি পরিবেশন করা হচ্ছে

১. ভূমিকা

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

AVIF বলতে কী বোঝায়?

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

AVIF কেন?

একই বা উন্নত মানের JPEG, PNG, GIF বা WebP ছবির তুলনায় AVIF ছবি অনেক ছোট হয়।

আপনি যা শিখবেন

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

আপনার যা যা লাগবে

২. Squoosh দিয়ে AVIF ইমেজ তৈরি করা

স্কুশ একটি ইমেজ কম্প্রেশন ওয়েব অ্যাপ। স্কুশের সাহায্যে আপনি সহজেই আপনার ছবিগুলোকে AVIF ফরম্যাটে কম্প্রেস করতে পারেন।

  1. https://squoosh.app খুলুন
  2. Squoosh-এ একটি স্থানীয় ইমেজ ড্রপ করুন।

স্কুশ স্ক্রিনশট

  1. কম্প্রেস ড্রপ-ডাউন বক্স থেকে AVIF নির্বাচন করুন।

স্কুশ ড্রপ-ডাউন বক্স

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

স্কুশ ডাউনলোড বোতাম

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

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

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

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

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

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

  1. কোডটি নিন। 
git clone https://github.com/AOMediaCodec/libavif.git
  1. ডিরেক্টরি পরিবর্তন করে libavif-এ যান। 
cd libavif/

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

  1. কমান্ড লাইন এনকোডিং টুল, 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 ছবিটি তৈরি হয়ে গেল!

  1. AVIF এনকোডিংয়ের গুণমান পরিবর্তন করা।

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

৫. একটি ওয়েব পেজে 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>

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

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

  1. ক্রোমে ওয়েব পেজটি খুলুন।

এইচটিএমএল ফাইলটি খোলার একটি উপায় হলো avif_example.html ফাইলটিকে ক্রোমে ড্র্যাগ করে আনা। এইচটিএমএল ফাইলটি খোলার আরেকটি উপায় হলো কোনো এইচটিটিপি সার্ভার থেকে avif_example.html সার্ভ করা।

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

৬. FFmpeg ব্যবহার করে অ্যানিমেটেড AVIF ইমেজ তৈরি করা

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

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

  1. একটি ওয়েব পেজে অ্যানিমেটেড 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 এর সাথে একই ডিরেক্টরিতে কপি করুন।

  1. ক্রোমে ওয়েব পেজটি খুলুন।

এইচটিএমএল ফাইলটি খোলার একটি উপায় হলো avif_animated_example.html ফাইলটিকে ক্রোমে ড্র্যাগ করে আনা। এইচটিএমএল ফাইলটি খোলার আরেকটি উপায় হলো কোনো এইচটিটিপি সার্ভার থেকে avif_animated_example.html ফাইলটিকে সার্ভ করা।

এখন আপনার অ্যানিমেটেড AVIF ছবিটি ক্রোমে প্রদর্শিত হবে।

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

অ্যানিমেটেড আইস রিঙ্ক

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

৭. avifenc ব্যবহার করে অ্যানিমেটেড AVIF ইমেজ তৈরি করা

  1. আপনার উৎস মিডিয়াকে y4m ফরম্যাটে রূপান্তর করুন।

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
  1. একটি অ্যানিমেটেড AVIF ছবি তৈরি করুন।

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

./avifenc ice_qcif_15fps.y4m animated.avif

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

  1. একটি ওয়েব পেজে অ্যানিমেটেড 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 এর সাথে একই ডিরেক্টরিতে কপি করুন।

  1. ক্রোমে ওয়েব পেজটি খুলুন।

এইচটিএমএল ফাইলটি খোলার একটি উপায় হলো avif_animated_example.html ফাইলটিকে ক্রোমে ড্র্যাগ করে আনা। এইচটিএমএল ফাইলটি খোলার আরেকটি উপায় হলো কোনো এইচটিটিপি সার্ভার থেকে avif_animated_example.html ফাইলটিকে সার্ভ করা।

এখন আপনার অ্যানিমেটেড AVIF ছবিটি ক্রোমে প্রদর্শিত হবে।

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

অ্যানিমেটেড আইস রিঙ্ক

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

  1. 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 আপনার ছবিগুলোকে আরও ছোট করতে এবং ওয়েবের মাধ্যমে প্রেরণে আরও কার্যকর করে তুলতে সাহায্য করতে পারে। আপনি জেক আর্চিবল্ডের একটি চমৎকার পোস্টে AVIF-এর বৈশিষ্ট্যগুলো সম্পর্কে আরও জানতে পারবেন।