SVG থেকে WebP কনভার্টার
ভেক্টর ফাইলকে ঠিক আপনার লেআউটের প্রয়োজনীয় পিক্সেল প্রস্থে WebP-তে রেন্ডার করুন। কাজে লাগে যখন CMS SVG আপলোড নেয় না, সোশ্যাল প্রিভিউয়ের জন্য বিটম্যাপ দরকার হয়, বা কোনো ইলাস্ট্রেশনে এত বেশি পাথ থাকে যে ব্রাউজার সেটি আঁকতে ধীর হয়ে যায়।
ছবি কনভার্টার
অথবা JPG, JPEG, JPE … ফাইল এখানে ড্রop করুন ·
প্রতি ফাইল সর্বোচ্চ 95 MB· সর্বোচ্চ 20টি ফাইল· 30 মিনিট পরে মুছে ফেলা হয়
ফাইল আমাদের সার্ভারে প্রসেস করা হয় এবং 30 মিনিট পরে মুছে ফেলা হয়।
৮৫ ছবিকে দেখতে মূলের মতোই রাখে। ছোট ফাইল দরকার হলেই কেবল কমান।
JPG, BMP ও EPS-এ স্বচ্ছতা নেই। স্বচ্ছ পিক্সেল এই রঙে ভরা হয়।
স্বচ্ছ পিক্সেলের পেছনে ব্যবহৃত হেক্স রঙ, যেমন #FFFFFF।
এই ফরম্যাটে একটিই ছবি থাকে। অ্যানিমেশন রাখতে চাইলে GIF বা WebP আউটপুট বেছে নিন।
মাল্টি-সাইজ আইকনে একটি ফাইলে একাধিক রেজোলিউশন থাকে; ব্রাউজার ও অপারেটিং সিস্টেম প্রয়োজনমতো বেছে নেয়।
মূল মাপ রাখুন, অথবা একটি বাহু লিখুন; অনুপাত ঠিক থাকবে।
উপরে বেছে নেওয়া বাহুর পিক্সেল।
মূল মাপের শতাংশ।
স্ক্রিন ও ওয়েবের জন্য sRGB সঠিক। প্রিন্টের কাজে মূলটি রাখুন; গ্রেস্কেল রঙ বাদ দেয়।
শুধু মেটাডেটা, ০ মানে মূল মান থাকবে। প্রিন্টার ও কিছু পোর্টাল এই সংখ্যা পড়ে; এতে পিক্সেল মাপ বদলায় না।
এই টুল কীভাবে ব্যবহার করবেন
- 1
SVG আপলোড করুন
Figma, Illustrator, Inkscape বা কোনো চার্ট লাইব্রেরি থেকে এক্সপোর্ট করা সর্বোচ্চ ২০টি .svg ফাইল যোগ করুন, প্রতিটি সর্বোচ্চ 95 MB।
- 2
আউটপুটের প্রস্থ ঠিক করুন
আউটপুট ছবি রিসাইজ শুরুতে 1200 px প্রস্থে থাকে; পেজে ছবিটি যতটা প্রস্থ নেবে, তার দ্বিগুণ করে দিন। কোয়ালিটি থাকে 90; ফ্ল্যাট লোগো ও আইকনের জন্য উন্নত সেটিংস-এর ভেতরে লসলেস টিক দিন।
- 3
WebP-তে কনভার্ট করুন
WebP-এ কনভার্ট করুন চাপুন, তারপর ফাইলগুলো বা একটি ZIP ডাউনলোড করুন। স্বচ্ছ অংশ স্বচ্ছই থাকে।
নির্দিষ্ট মাপে SVG থেকে WebP কীভাবে কনভার্ট করব?
SVG আপলোড করুন, আউটপুট ছবি রিসাইজ-এ প্রয়োজনীয় প্রস্থ পিক্সেলে দিন (ডিফল্ট 1200 px), তারপর WebP-এ কনভার্ট করুন চাপুন। ভেক্টরটি ওই প্রস্থে নতুন করে আঁকা হয়, তাই কিছু বড় করা বা ঝাপসা হয় না।
কখন SVG-কে WebP করা উচিত
SVG 2001 সালে W3C Recommendation হয় এবং বেশিরভাগ লোগো ও আইকনের জন্য এটিই সঠিক ফরম্যাট: কয়েক কিলোবাইটের টেক্সট, যেকোনো জুমে ধারালো। সমস্যা শুরু হয় ফাইলটি নিজের কোডের বাইরে গেলে। WordPress ও অনেক হোস্টেড শপ বিল্ডার SVG আপলোড নেয় না, Facebook, LinkedIn ও X-এর লিংক প্রিভিউ বিটম্যাপ হিসেবে আনা হয়, আর ডিজাইন টুল এমবেডেড রাস্টার ইফেক্টসহ ইলাস্ট্রেশন এক্সপোর্ট করে ভেক্টর ফাইলকে কয়েক মেগাবাইটের মার্কআপে পরিণত করে।
WebP, যা Google 2010 সালে প্রকাশ করে এবং Safari 2020 সালে সংস্করণ 14-এ শেষ পর্যন্ত সাপোর্ট করে, এই কাজের জন্যই বানানো বিটম্যাপ: একই দেখায় PNG-র চেয়ে ছোট, সঙ্গে প্রকৃত অ্যালফা চ্যানেল। SVG সরাসরি চূড়ান্ত মাপে WebP-তে রেন্ডার করলে বড় PNG এক্সপোর্টের সাধারণ ঘুরপথ এড়ানো যায়। উল্টোটা চাইলে WebP থেকে SVG পেজে দেখুন, কেন ওই দিকে কনভার্সনের বদলে ট্রেসিং লাগে।
সাধারণ ওয়েব স্লটের জন্য SVG থেকে WebP সাইজ
1200 × 630 px
Open Graph লিংক প্রিভিউ
পেজ শেয়ার করলে যে ছবি দেখায়
1920 × 1080 px
পূর্ণ-প্রস্থ হিরো ইলাস্ট্রেশন
1× এ বেশিরভাগ ডেস্কটপ স্ক্রিন ঢাকে
1600 × 900 px
ব্লগ কলামের ছবি 2× এ
800 px কনটেন্ট কলামের জন্য
400 × 100 px
হেডার লোগো 2× এ
200 × 50 px লোগো স্লটের জন্য
SVG
Scalable Vector Graphics
SVG হলো XML-ভিত্তিক একটি ভেক্টর ফরম্যাট, যা W3C ২০০১ সালে স্ট্যান্ডার্ড করে। পিক্সেলের বদলে এটি আকার, পাথ ও টেক্সট বর্ণনা করে, তাই যেকোনো সাইজে স্পষ্ট থাকে এবং লোগো ও আইকনের জন্য সাধারণত খুব ছোট হয়। এটি স্বচ্ছতা, CSS স্টাইলিং, স্ক্রিপ্টিং ও অ্যানিমেশন সমর্থন করে, আর প্রতিটি ব্রাউজার নিজে থেকেই এটি রেন্ডার করে। SVG ফটোগ্রাফের জন্য উপযুক্ত নয়, এবং জটিল ইলাস্ট্রেশন রেন্ডার হতে ধীর হতে পারে। Illustrator, Inkscape, Figma ও ব্রাউজারে এটি খোলা ও এডিট করা যায়।
- কম্প্রেশন
- –
- স্বচ্ছতা (ট্রান্সপারেন্সি)
- হ্যাঁ
- অ্যানিমেশন
- হ্যাঁ
- প্রবর্তনের সাল
- 2001 · W3C
WEBP
WebP ছবি
WebP হলো ওয়েব পেজ দ্রুত লোড করতে ২০১০ সালে Google প্রকাশিত একটি ইমেজ ফরম্যাট। এটি একই ফরম্যাটে লসি ও লসলেস কম্প্রেশন, আলফা স্বচ্ছতা এবং অ্যানিমেশন সমর্থন করে। সমান দৃশ্যমান মানের JPEG-এর তুলনায় লসি WebP ফাইল সাধারণত ২৫–৩৫% ছোট হয়, আর লসলেস WebP সাধারণত PNG-র চেয়ে ছোট। বর্তমানের সব ব্রাউজার এটি সমর্থন করে, কিন্তু কিছু পুরনো ডেস্কটপ সফটওয়্যার, প্রিন্ট সার্ভিস ও আপলোড ফর্ম এখনো এটি নেয় না। Windows, macOS এবং বেশিরভাগ আধুনিক ইমেজ এডিটর WebP খুলতে পারে।
- কম্প্রেশন
- লসি বা লসলেস
- স্বচ্ছতা (ট্রান্সপারেন্সি)
- হ্যাঁ
- অ্যানিমেশন
- হ্যাঁ
- প্রবর্তনের সাল
- 2010 · Google
ভেক্টর ফাইল নেয় না বা ধীরে দেখায় এমন জায়গা, যেমন CMS, সোশ্যাল প্রিভিউ বা ভারী ল্যান্ডিং পেজের জন্য হালকা, নির্দিষ্ট মাপের বিটম্যাপ পেতে মানুষ SVG থেকে WebP করে; WebP থেকে SVG ফরম্যাট বদল নয়, ট্রেসিংয়ের কাজ।
SVG কীভাবে রাস্টারাইজ হয় এবং কী যাচাই করবেন
কনভার্টার SVG-র নিজস্ব width, height ও viewBox পড়ে, তারপর আপনার দেওয়া প্রস্থে প্রতিটি পাথ আঁকে; উচ্চতা অ্যাসপেক্ট রেশিও অনুযায়ী হয়। আঁকা হয় চূড়ান্ত মাপেই, তাই সরু স্ট্রোক ও ছোট লেখা সঠিক স্কেলে একবারই অ্যান্টি-অ্যালিয়াস হয়। পরে ছোট PNG বড় করলে কখনো এত পরিষ্কার হয় না।
ফন্ট নিয়েই সাধারণত অবাক হতে হয়। SVG-তে এমন টাইপফেসের নাম থাকলে যা এমবেড বা আউটলাইনে রূপান্তর করা নেই, তখন ফলব্যাক ফন্ট ব্যবহার হয় এবং লাইনের দৈর্ঘ্য বদলে যায়। এক্সপোর্টের আগে ডিজাইন টুলে লেখা আউটলাইন করে নিন। SVG-র ভেতরে URL দিয়ে লিংক করা বাইরের ছবি আনা হয় না, তাই সেগুলো এমবেড করুন বা আগে আর্টওয়ার্ক ফ্ল্যাটেন করুন।
SVG থেকে WebP কনভার্টার: যা করবেন ও যা করবেন না
| করণীয় | বর্জনীয় |
|---|---|
| দেখানো CSS প্রস্থের 2× এ রেন্ডার করুন | SVG হিসেবে যেসব সাধারণ ইনলাইন আইকন ছোট, সেগুলো কনভার্ট করবেন না |
| কম রঙের ফ্ল্যাট লোগোর জন্য লসলেস ব্যবহার করুন | 600 px স্লটের জন্য 4000 px-এ রেন্ডার করবেন না |
| ভবিষ্যতের মাপের জন্য SVG মাস্টার রেখে দিন | ইমেইল নিউজলেটারে WebP পাঠাবেন না |
| লেআউট শিফট এড়াতে WebP width ও height অ্যাট্রিবিউটসহ দিন | লাইভ টেক্সট আশা করবেন না: WebP হলো পিক্সেল, নির্বাচনযোগ্য লেখা নয় |
SVG থেকে WebP নিয়ে প্রশ্ন
SVG থেকে WebP কনভার্ট করার সময় কত পিক্সেল প্রস্থ দেব?
ছবিটি CSS পিক্সেলে যত প্রস্থে দেখানো হয়, তার দ্বিগুণ নিন, তাহলে হাই-ডেনসিটি ফোন ও ল্যাপটপ স্ক্রিনেও ছবি ধারালো থাকবে। 800 px কলামে দেখানো ইলাস্ট্রেশন 1600 px-এ রেন্ডার করা উচিত। ওয়েবে 3× করলে সাধারণত লাভ হয় না, কারণ ফাইল বড় হয় অথচ দৃশ্যমান উন্নতি সামান্য।
ওয়েবসাইটের জন্য কি SVG-এর চেয়ে WebP ভালো?
সাধারণ লোগো, আইকন ও ডায়াগ্রামের জন্য নয়: পরিষ্কার SVG খুব ছোট এবং যেকোনো সাইজে ধারালো, তাই সেটিই রাখুন। গ্রেডিয়েন্ট, ফিল্টার বা হাজার হাজার পাথ থাকা জটিল ইলাস্ট্রেশনে এবং যেখানে শুধু বিটম্যাপ নেওয়া হয়, যেমন সোশ্যাল প্রিভিউ বা SVG সাপোর্টহীন CMS-এ, WebP ভালো।
WebP কি আমার SVG-এর স্বচ্ছ ব্যাকগ্রাউন্ড রাখে?
হ্যাঁ। লসি ও লসলেস দুই মোডেই WebP-তে পূর্ণ অ্যালফা চ্যানেল আছে, তাই SVG-তে যেসব অংশে ফিল নেই সেগুলো স্বচ্ছ থাকে। আকারের কিনারা স্বচ্ছতার বিপরীতে অ্যান্টি-অ্যালিয়াস করা হয়, ফলে যেকোনো ব্যাকগ্রাউন্ড রঙে ঠিক দেখায়।
ভেক্টর আর্টওয়ার্কের জন্য লসি না লসলেস WebP?
হাতে গোনা কয়েকটি সলিড রঙের ফ্ল্যাট লোগো, আইকন ও চার্টের জন্য লসলেস ভালো; এগুলো খুব ভালো কমপ্রেস হয় এবং কিনারা নিখুঁত থাকে। গ্রেডিয়েন্ট, ছায়া বা টেক্সচারওয়ালা ইলাস্ট্রেশনে কোয়ালিটি 85 থেকে 90 সহ লসি ভালো, কারণ সেখানে লসলেস ফাইল ভারী হয়। একই ফাইলে দুটোই চেষ্টা করুন এবং যেটি ছোট ও পরিষ্কার দেখায় সেটি রাখুন।
WordPress-এ SVG আপলোড করা যায় না কেন?
SVG-তে স্ক্রিপ্ট থাকতে পারে বলে WordPress অনুমোদিত আপলোড টাইপে SVG রাখে না। 2021 সালে প্রকাশিত 5.8 সংস্করণ থেকে এটি WebP নেয়, তাই কনভার্ট করলে এমন ফাইল পাবেন যা সিকিউরিটি প্লাগইন ছাড়াই মিডিয়া লাইব্রেরিতে যায়। আসল ভেক্টর দরকার হলে স্যানিটাইজিং প্লাগইনের মাধ্যমে SVG সাপোর্ট যোগ করা যায়।
ইমেইল নিউজলেটারে কি WebP ব্যবহার করা যায়?
এড়িয়ে চলুন। Windows-এর ডেস্কটপ Outlook সহ বেশ কিছু ইমেইল ক্লায়েন্ট WebP দেখায় না, আর Gmail-ও SVG রেন্ডার করে না। ইমেইলের জন্য বরং SVG থেকে PNG দিয়ে ছবিটি রেন্ডার করুন।
