PNG বনাম JPEG বনাম WebP: কোন ইমেজ ফরম্যাট ব্যবহার করবেন?

বেশিরভাগ ইমেজ ফরম্যাটের সিদ্ধান্ত দুটি প্রশ্নে এসে দাঁড়ায়। ছবিতে কি ট্রান্সপারেন্ট অংশ লাগবে? আর সামান্য কোয়ালিটি কমলে কি চোখে পড়বে? এই দুটির উত্তর দিলে ফরম্যাট প্রায় নিজেই ঠিক হয়ে যায়। তৃতীয় প্রশ্ন, ফাইলটি কোথায় যাচ্ছে, ঠিক করে নতুন ফরম্যাটগুলো আদৌ চলবে কি না, কারণ মার্কেটপ্লেস আর অনেক অ্যাপ এখনো শুধু JPEG আর PNG নেয়।

এই গাইডে ওয়েবে ছবি আর গ্রাফিক্সের জন্য সবচেয়ে বেশি দেখা চারটি ফরম্যাটের তুলনা করা হয়েছে: JPEG, PNG, WebP আর AVIF। শেষে মানুষের সাধারণ কাজগুলোর জন্য দ্রুত পছন্দ দেওয়া আছে: লোগো, প্রোডাক্ট ছবি, সাধারণ ছবি আর ট্রান্সপারেন্ট ব্যাকগ্রাউন্ডের কাটআউট।

তুলনার টেবিল

ফরম্যাটের তথ্য MDN-এর ইমেজ ফাইল টাইপ গাইড থেকে নেওয়া। ব্রাউজারের ক্ষেত্রে সাপোর্টের সারি আগের মতো গুরুত্বপূর্ণ নয়: বর্তমান প্রতিটি প্রধান ব্রাউজার WebP দেখায়, আর সবগুলোর সাম্প্রতিক ভার্সনে AVIF সাপোর্ট আছে। এটা এখনো গুরুত্বপূর্ণ বাকি সব জায়গায়, যেমন আপলোড ফর্ম, মার্কেটপ্লেস, ইমেইল ক্লায়েন্ট আর পুরনো ডেস্কটপ সফটওয়্যার।

সহজ ভাষায় lossy বনাম lossless

Lossless কম্প্রেশন একটি পিক্সেলও না বদলে ফাইল ছোট করে। একটি PNG ডিকোড করলে ঠিক যা সেভ হয়েছিল তা-ই ফেরত পাবেন। তাই শক্ত কিনারা আর সমতল রঙের যেকোনো কিছুর জন্য এটি আদর্শ, যেমন লেখা, লোগো, লাইন আর্ট, ইউজার ইন্টারফেস আর স্ক্রিনশট, যেখানে সামান্য ঝাপসা ভাব বা রঙের ফ্রিঞ্জও সহজে চোখে পড়ে।

Lossy কম্প্রেশন এমন ডিটেল ফেলে দেয় যা চোখে পড়ার সম্ভাবনা কম। ফটো এটা ভালোভাবে সয়ে নেয় কারণ তাতে নয়েজ আর ধীরে বদলানো টোন ভরা থাকে। JPEG এভাবেই কাজ করে, আর যুক্তিসঙ্গত কোয়ালিটি সেটিংয়ে একটি ফটো PNG সাইজের ছোট একটি অংশে নেমে আসতে পারে, দেখতে কোনো পার্থক্য ছাড়াই।

এ থেকে দুটি ব্যবহারিক নিয়ম আসে:

• প্রতিটি lossy সেভে আরেকটু কোয়ালিটি হারায়। একটি lossless মাস্টার রাখুন (ক্যামেরার আসল ফাইল, একটি PNG, বা এডিটরের নিজস্ব ফাইল) আর তা থেকে lossy কপি এক্সপোর্ট করুন, একই JPEG বারবার এডিট করে সেভ না করে।
• ধারালো কিনারায় lossy কম্প্রেশন সবচেয়ে খারাপ। JPEG হিসেবে সেভ করা লোগোর অক্ষরের চারপাশে দাগের মতো "mosquito noise" আসে, আর স্ক্রিনশটের লেখা ঝাপসা হয়ে যায়।

ট্রান্সপারেন্সি: কাটআউটের জন্য নির্ধারক ফিচার

JPEG-এ আলফা চ্যানেল নেই। JPEG-এ "এই পিক্সেলটি স্বচ্ছ" লিখে রাখার কোনো উপায় নেই, তাই ব্যাকগ্রাউন্ড রিমুভ করে JPEG হিসেবে সেভ করলে ফাঁকা অংশ একটি সলিড রঙে ভরে যায়, সাধারণত সাদা বা কালো। কাটআউটকে অন্য কনটেন্টের ওপর বসাতে চাইলে PNG, WebP বা AVIF লাগবে।

PNG পূর্ণ আলফা চ্যানেল রাখে: প্রতিটি পিক্সেল পুরো অস্বচ্ছ থেকে পুরো ট্রান্সপারেন্ট পর্যন্ত যেকোনো মানে থাকতে পারে, আর এতেই চুল, লোম আর ছায়ার মতো নরম কিনারা স্বাভাবিক দেখায়। এর একটি সহজ মোডও আছে যেখানে প্যালেটের একটি রংকে ট্রান্সপারেন্ট ধরা হয়, যা সমতল গ্রাফিক্সে ঠিক আছে কিন্তু ফটোতে খাঁজকাটা কিনারা দেয়। বিস্তারিত জানতে পড়ুন আলফা চ্যানেল কী।

WebP তার lossless আর lossy দুই মোডেই ট্রান্সপারেন্সি সাপোর্ট করে। Google-এর WebP ডকুমেন্টেশন বলে lossless WebP প্রায় 22% বেশি বাইটে ট্রান্সপারেন্সি যোগ করে, আর ট্রান্সপারেন্সিসহ lossy WebP সাধারণত সমতুল্য PNG-এর চেয়ে প্রায় 3 গুণ ছোট। তাই নিজের ওয়েবসাইটে ট্রান্সপারেন্ট প্রোডাক্ট ছবি দেওয়ার সবচেয়ে কার্যকর উপায় lossy WebP।

ফাইল সাইজ

একই ছবির জন্য মোটামুটি বড় থেকে ছোট ক্রম হলো PNG, JPEG, WebP, AVIF, তবে একটি বড় শর্তসহ: PNG শুধু ফটোর ক্ষেত্রেই "বড়"। কম রঙের সমতল গ্রাফিক্সে PNG প্রায়ই JPEG-এর চেয়ে ছোট আর সবসময় বেশি শার্প।

WebP নিয়ে Google-এর প্রকাশিত সংখ্যাগুলো একটি কাজের মানদণ্ড:

• Lossless WebP ফাইল PNG-এর চেয়ে 26% ছোট।
• একই SSIM কোয়ালিটি স্কোরে lossy WebP ফাইল তুলনীয় JPEG-এর চেয়ে 25 থেকে 34% ছোট।

ওয়েবে রাস্টার ছবির জন্য MDN-এর পরামর্শ হলো WebP বা AVIF বেছে নেওয়া, যা সাধারণত PNG, JPEG আর GIF-এর চেয়ে ভালো কম্প্রেস করে। AVIF 10 আর 12 বিট কালারও সাপোর্ট করে, যা মসৃণ গ্রেডিয়েন্টে সাহায্য করে। এর দুর্বলতা ব্রাউজারের বাইরের সাপোর্ট: অনেক অ্যাপ আর আপলোড ফর্ম এখনো এটি ফিরিয়ে দেয়।

অনেক দর্শককে অনেক ছবি দেখালে ফাইল সাইজ সবচেয়ে বেশি গুরুত্বপূর্ণ। যে মার্কেটপ্লেস সবকিছু আবার কম্প্রেস করে, সেখানে একটি আপলোডের জন্য বাঁচানো বাইটের চেয়ে মার্কেটপ্লেস কোন ফরম্যাট নেয় সেটাই বেশি জরুরি।

কোন ফরম্যাট কোথায় চলে

ব্রাউজার সহজ অংশ। মার্কেটপ্লেস আর অ্যাপেই ফরম্যাট বাতিল হয়। প্রতিটি প্ল্যাটফর্মের নিজস্ব ডকুমেন্টেশন অনুযায়ী গ্রহণযোগ্য ফরম্যাট, October 2026-এ যাচাই করা:

দুটি বিষয় চোখে পড়ে। প্রথমত, Amazon, Walmart বা Meta ক্যাটালগ WebP আর AVIF নেয় না, তাই মার্কেটপ্লেস আপলোডের জন্য JPEG বা PNG রাখুন। দ্বিতীয়ত, Etsy বলে ট্রান্সপারেন্ট PNG সাপোর্ট হয় না আর ট্রান্সপারেন্ট অংশ কালো দেখাতে পারে, তাই সেখানে আপলোডের আগে কাটআউট একটি রঙের ওপর ফ্ল্যাটেন করুন। প্রতিটি প্ল্যাটফর্মের সঠিক পিক্সেল সাইজের জন্য দেখুন প্রোডাক্ট ছবির সাইজ রেফারেন্স।

সাধারণ কাজে কোন ফরম্যাট

লোগো

ভেক্টর আসল ফাইল থাকলে SVG ব্যবহার করুন; MDN লোগো আর আইকনের জন্য এটিরই পরামর্শ দেয়। রাস্টার ফাইল লাগলে ট্রান্সপারেন্ট ব্যাকগ্রাউন্ডসহ PNG, বা নিজের সাইটে lossless WebP ব্যবহার করুন। কখনো JPEG নয়: এটি কিনারায় ঝাপসা ভাব আনে আর ট্রান্সপারেন্ট হতে পারে না।

প্রোডাক্ট ছবি

মার্কেটপ্লেসের মেইন ইমেজের জন্য খাঁটি সাদা ব্যাকগ্রাউন্ডে JPEG ব্যবহার করুন। Amazon-এর সেলার ব্লগ JPEG-কে পছন্দের ফরম্যাট বলে, আর ওপরের টেবিলের প্রতিটি মার্কেটপ্লেস এটি নেয়। একটি lossless মাস্টার থেকে উচ্চ কোয়ালিটি সেটিংয়ে (বেশিরভাগ টুলে প্রায় 85 থেকে 92) এক্সপোর্ট করুন।

নিজের স্টোরে উচ্চ কোয়ালিটির JPEG বা PNG আপলোড করুন আর প্ল্যাটফর্মকে কনভার্ট করতে দিন। যেমন Shopify বলে তার ইমেজ সার্ভিস প্রতিটি দর্শককে তার ব্রাউজারের সাপোর্ট করা সেরা ফরম্যাট নিজে থেকেই পাঠায়।

সাধারণ ছবি

শেয়ার আর আপলোডের জন্য JPEG নিরাপদ ডিফল্ট। আপনার নিয়ন্ত্রণের ওয়েবসাইটে JPEG ফলব্যাকসহ WebP বা AVIF কম বাইটে একই চেহারা দেয়। ফোন HEIC ফাইল সেভ করলে, যেখানে HEIC তালিকায় নেই সেখানে আপলোডের আগে JPEG-এ কনভার্ট করুন।

কাটআউট আর ট্রান্সপারেন্ট ছবি

ফাইলকে সব জায়গায় কাজ করতে হলে PNG ব্যবহার করুন: স্লাইড, ডকুমেন্ট, ডিজাইন টুল আর বেশিরভাগ আপলোড ফর্মে। নিজের ওয়েব পেজে ছবি বসাচ্ছেন আর ছোট রাখতে চান, তাহলে WebP। JPEG শুধু তখনই, যখন আপনি ইচ্ছে করে ব্যাকগ্রাউন্ড সলিড রঙে ভরেছেন, যেমন মার্কেটপ্লেসের জন্য সাদা।

স্ক্রিনশট আর ডায়াগ্রাম

PNG, বা lossless WebP। Lossy ফরম্যাট লেখা ঝাপসা করে।

ফলব্যাকসহ আধুনিক ফরম্যাট দেখানো

নিজের সাইট চালালে একটি ফরম্যাট বেছে নিতে হবে না। HTML picture এলিমেন্ট ব্রাউজারকে প্রথম যে ফরম্যাট বোঝে সেটি বাছতে দেয়:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

যে ব্রাউজার AVIF সাপোর্ট করে সে প্রথম সোর্স নেয়, অন্যরা WebP-তে ফিরে যায়, আর পুরনো যেকোনো কিছু PNG ব্যবহার করে। অনেক হোস্টিং প্ল্যাটফর্ম আর ইমেজ CDN ব্রাউজারের Accept হেডার দেখে এই কনভার্শন আপনার হয়ে করে দেয়, যা প্রায়ই প্রতিটি ফরম্যাট নিজে বানানোর চেয়ে সহজ।

চমক ছাড়া ফরম্যাট কনভার্ট করা

• PNG বা WebP থেকে JPEG: ট্রান্সপারেন্ট অংশ ফ্ল্যাটেন হয়ে যায়। টুলকে বাছতে না দিয়ে ফিল রং নিজে বাছুন (সাধারণত সাদা), কারণ কিছু টুল ডিফল্টে কালো দেয়।
• JPEG থেকে PNG: ফাইল বড় হয় কিন্তু ভালো হয় না। JPEG-এ হারানো কোয়ালিটি ফেরত আসে না।
• যেকোনো ফরম্যাট থেকে WebP বা AVIF: ট্রান্সপারেন্সি টিকে আছে আর রং ঠিক দেখাচ্ছে কি না দেখুন; ছবি ওয়েবে দেখা হলে আগে sRGB কালার প্রোফাইলে কনভার্ট করুন।
• JPEG আবার সেভ করা: প্রতিবার কম কোয়ালিটিতে সেভ করলে ক্ষতি জমতে থাকে। মাস্টার থেকে একবারই এক্সপোর্ট করুন।

কাটআউটের জন্য দ্রুত একটি উপায়

বাল্কে ব্যাকগ্রাউন্ড রিমুভ করলে removebackground.dev কাটআউট ট্রান্সপারেন্ট PNG বা WebP, অথবা যেকোনো সলিড রঙে JPG হিসেবে এক্সপোর্ট করে, তাই একই আপলোড থেকে মার্কেটপ্লেসের জন্য সাদায় JPEG আর সাইটের জন্য ট্রান্সপারেন্ট PNG বানাতে পারেন।