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

1. ভূমিকা

একটি ওয়েব পৃষ্ঠা লোড করার জন্য প্রয়োজনীয় বাইটের 60% এরও বেশি ছবিগুলির জন্য দায়ী৷ AVIF ব্যবহার করে আপনি আপনার ছবি ছোট করতে পারেন এবং আপনার ওয়েবসাইট দ্রুত লোড করতে পারেন।

AVIF কি?

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

কেন AVIF?

AVIF ছবিগুলি একই বা আরও ভাল মানের JPEG, PNG, GIF বা WebP ছবিগুলির থেকে অনেক ছোট।

যা শিখবেন

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

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

• Chrome সংস্করণ 85 বা তার পরে
• একজন টেক্সট এডিটর
• cmake
• গিট
• নিনজা
• একটি ছবি। আমি এখানে একটি প্রদান
• FFmpeg

2. Squosh দিয়ে AVIF ছবি তৈরি করা

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

1. https://squoosh.app খুলুন
2. Squosh সম্মুখের একটি স্থানীয় ছবি ড্রপ.

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

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

আসল নমুনা চিত্রটি ছিল 3340 kB এবং সংকুচিত চিত্রটি 378 kB। নমুনা চিত্রটি মূল চিত্রের চেয়ে প্রায় 10x ছোট সংকুচিত হয়েছিল!

4. AVIF ইমেজ ডাউনলোড করুন

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

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

আপনি এখন আপনার নিজস্ব AVIF ইমেজ আছে!

3. বিল্ডিং কমান্ড লাইন এনকোডার avifenc

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

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

1. কোড পান।

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

2. লিবাভিফে ডিরেক্টরি পরিবর্তন করুন।

cd libavif/

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

3. পেতে এবং libaom নির্মাণ.

libavif এক্সটেনশন ডিরেক্টরিতে পরিবর্তন করুন।

cd ext

পরবর্তী কমান্ড libaom সোর্স কোড টানবে এবং libaom স্থিরভাবে তৈরি করবে।

./aom.cmd

লিবাভিফে ডিরেক্টরি পরিবর্তন করুন।

cd ../

4. কমান্ড লাইন এনকোডিং টুল, avifenc তৈরি করুন।

avifenc এর জন্য একটি বিল্ড ডিরেক্টরি তৈরি করা একটি ভাল ধারণা।

mkdir build

বিল্ড ডিরেক্টরিতে পরিবর্তন করুন।

cd build

avifenc এর জন্য বিল্ড ফাইল তৈরি করুন।

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

avifenc তৈরি করুন।

make

আপনি সফলভাবে avifenc তৈরি করেছেন!

4. avifenc দিয়ে AVIF ছবি তৈরি করা

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

avifenc চালানোর জন্য সবচেয়ে মৌলিক পরামিতি, ইনপুট এবং আউটপুট ফাইল সেট করা হয়।

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–মিন 0 –সর্বোচ্চ 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420" AVIF চিত্রগুলির জন্য প্রস্তাবিত সেটিংস৷

Avifenc এর অনেকগুলি বিকল্প রয়েছে যা গুণমান এবং গতি উভয়কেই প্রভাবিত করবে। আপনি যদি বিকল্পগুলি দেখতে চান এবং সেগুলি সম্পর্কে আরও জানতে চান তবে ./avifenc চালান৷

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

2. এনকোডারের গতি বাড়াচ্ছে।

আপনার মেশিনে কতগুলি কোর আছে তার উপর নির্ভর করে একটি প্যারামিটার পরিবর্তন করা ভাল হতে পারে তা হল --jobs প্যারামিটার। এই প্যারামিটারটি সেট করে যে কতগুলি থ্রেড avifenc AVIF ছবি তৈরি করতে ব্যবহার করবে। এই কমান্ড লাইন চালানোর চেষ্টা করুন.

./avifenc happy_dog.jpg example.avif --jobs 8

এটি AVIF ইমেজ তৈরি করার সময় avifenc-কে 8টি থ্রেড ব্যবহার করতে বলে। আমার মেশিনে এটি 5x দ্বারা AVIF এনকোডিং গতি বাড়ায়।

5. একটি ওয়েব পেজে 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 ইমেজ রেন্ডার করার উপাদান, যদি ব্রাউজারটি না করে তাহলে JPEG-তে একটি ফলব্যাক। আপনি সম্পর্কে আরও তথ্য জানতে পারেন এখানে

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

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

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

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

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

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

Y4m ফাইলগুলি সংকুচিত হয় না তাই সেগুলি খুব বড় হতে পারে৷

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

2. একটি অ্যানিমেটেড AVIF ইমেজ তৈরি করুন।

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

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

avifenc ice_qcif_15fps.y4m animated.avif

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

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

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

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

মনে রাখবেন gif ফাইলটি ~35x বড় এবং অনেক খারাপ মানের।

আপনার পাঠ্য সম্পাদকে 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. ক্রোমে ওয়েব পেজ খুলুন।

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

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

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

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

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

7. অভিনন্দন!

আপনি AVIF ইমেজ কোড ল্যাব পরিবেশন শেষ করেছেন!

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