Thumbor দিয়ে ছবি অপ্টিমাইজ করুন

চাহিদা অনুযায়ী চিত্রের আকার পরিবর্তন, সংকুচিত এবং রূপান্তর করতে থামবার বিনামূল্যে ব্যবহার করা যেতে পারে।

Katie Hempenius

Thumbor হল একটি বিনামূল্যের, ওপেন সোর্স ইমেজ CDN যা ছবিকে সংকুচিত করা, আকার পরিবর্তন করা এবং রূপান্তর করা সহজ করে তোলে। এই পোস্টটি আপনাকে কিছু ইনস্টল করার প্রয়োজন ছাড়াই প্রথম হাতে থামবার ব্যবহার করে দেখতে দেয়। আপনার জন্য http://34.67.235.246:8888 এ চেষ্টা করার জন্য আমরা একটি স্যান্ডবক্স থাম্বর সার্ভার সেট আপ করেছি। আপনি যে ছবিটি নিয়ে পরীক্ষা করতে যাচ্ছেন সেটি http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg- এ উপলব্ধ।

পূর্বশর্ত

এই পোস্টটি অনুমান করে যে আপনি বুঝতে পেরেছেন কিভাবে ইমেজ CDN আপনার লোড কর্মক্ষমতা উন্নত করতে পারে। যদি না হয়, ইমেজ অপ্টিমাইজ করতে ইমেজ CDN ব্যবহার করুন দেখুন। এটাও ধরে নেয় যে আপনি আগে মৌলিক ওয়েবসাইট তৈরি করেছেন।

থাম্বর ইউআরএল ফরম্যাট

ইমেজ অপ্টিমাইজ করার জন্য ইমেজ CDN ব্যবহার করুন- এ উল্লিখিত হিসাবে, প্রতিটি ইমেজ CDN ইমেজের জন্য একটু ভিন্ন ইউআরএল ফরম্যাট ব্যবহার করে। চিত্র 1 Thumbor এর বিন্যাস প্রতিনিধিত্ব করে।

উৎপত্তি

সমস্ত অরিজিনের মতো, একটি থাম্বর ইউআরএলের উৎপত্তি তিনটি অংশ নিয়ে গঠিত: একটি স্কিম (যা প্রায় সবসময় http বা https হয়), একটি হোস্ট এবং একটি পোর্ট। এই উদাহরণে, একটি IP ঠিকানা ব্যবহার করে হোস্টকে চিহ্নিত করা হয়, কিন্তু আপনি যদি একটি DNS সার্ভার ব্যবহার করেন তবে এটি thumbor-server.my-site.com এর মতো দেখতে হতে পারে। ডিফল্টরূপে, Thumbor ইমেজ পরিবেশন করতে পোর্ট 8888 ব্যবহার করে।

নিরাপত্তা কী

URL এর unsafe অংশটি নির্দেশ করে যে আপনি নিরাপত্তা কী ছাড়াই Thumbor ব্যবহার করছেন। একটি নিরাপত্তা কী ব্যবহারকারীকে আপনার ছবির URL-এ অননুমোদিত পরিবর্তন করতে বাধা দেয়। ইমেজ ইউআরএল পরিবর্তন করে, একজন ব্যবহারকারী আপনার সার্ভার (এবং আপনার হোস্টিং বিল) ব্যবহার করে তাদের চিত্রের আকার পরিবর্তন করতে পারে, অথবা, আরও দূষিতভাবে, আপনার সার্ভারকে ওভারলোড করতে পারে। এই গাইড Thumbor-এর নিরাপত্তা কী বৈশিষ্ট্য সেট আপ কভার করবে না৷

আকার

URL এর এই অংশটি আউটপুট চিত্রের পছন্দসই আকার নির্দিষ্ট করে। আপনি চিত্রের আকার পরিবর্তন করতে না চাইলে এটি বাদ দেওয়া যেতে পারে। অন্যান্য URL প্যারামিটারের উপর নির্ভর করে কাঙ্খিত আকার অর্জন করতে Thumbor বিভিন্ন পদ্ধতি ব্যবহার করবে যেমন ক্রপিং বা স্কেলিং। এই পোস্টের পরবর্তী বিভাগে আরও বিস্তারিতভাবে কীভাবে চিত্রগুলিকে পুনরায় আকার দিতে হয় তা ব্যাখ্যা করে৷

এখনই চেষ্টা করুন:

1. একটি নতুন ট্যাবে পরিবেশিত চিত্রটি আসল আকারে দেখতে নিম্নলিখিত URLটিতে ক্লিক করুন: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

   

2. চিত্রটিকে 100x100 পিক্সেলে আকার দিন: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

ফিল্টার

ফিল্টারগুলি একটি চিত্রকে রূপান্তরিত করে। ইউআরএল সেগমেন্টের ফিল্টার অংশ filters: ফিল্টারগুলির একটি কোলন-বিচ্ছিন্ন তালিকা অনুসরণ করে; আপনি কোনো ফিল্টার ব্যবহার না করলে এটি বাদ দেওয়া যেতে পারে। পৃথক ফিল্টারগুলির জন্য সিনট্যাক্স একটি ফাংশন কলের অনুরূপ (উদাহরণস্বরূপ grayscale() ) শূন্য বা তার বেশি আর্গুমেন্ট ধারণকারী।

এখনই চেষ্টা করুন:

1. একটি একক ফিল্টার প্রয়োগ করুন: 25 পিক্সেল ব্যাসার্ধ সহ একটি গাউসিয়ান ব্লার প্রভাব: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

   

2. একাধিক ফিল্টার প্রয়োগ করুন। গ্রেস্কেলে রূপান্তর করুন এবং চিত্রটিকে 90 ডিগ্রি ঘোরান : http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

ইমেজ রূপান্তর

এই বিভাগটি পারফরম্যান্সের সাথে সবচেয়ে প্রাসঙ্গিক Thumbor কার্যকারিতাগুলির উপর ফোকাস করে: ফাইল ফর্ম্যাটের মধ্যে কম্প্রেশন, আকার পরিবর্তন এবং রূপান্তর।

কম্প্রেশন

গুণমানের ফিল্টার JPEG ছবিগুলিকে পছন্দসই ছবির গুণমানের স্তরে (1-100) সংকুচিত করে। যদি কোন মানের স্তর প্রদান করা না হয়, Thumbor ইমেজটিকে 80-এর মানের স্তরে সংকুচিত করে। এটি একটি ভাল ডিফল্ট: মানের স্তর 80-85 সাধারণত ছবির গুণমানের উপর খুব কম লক্ষণীয় প্রভাব ফেলে, তবে সাধারণত 30-40% ছবির আকার হ্রাস করে।

এখনই চেষ্টা করুন:

1. ছবিটিকে 1 এর গুণমানে সংকুচিত করুন (খুব খারাপ): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

   

2. Thumbor-এর ডিফল্ট কম্প্রেশন সেটিংস ব্যবহার করে ছবি কম্প্রেস করুন: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

আকার পরিবর্তন করা হচ্ছে

মূল অনুপাত বজায় রেখে একটি চিত্রের আকার পরিবর্তন করতে URL স্ট্রিংয়ের size অংশের মধ্যে $WIDTHx0 বা 0x$HEIGHT ফর্ম্যাটটি ব্যবহার করুন৷

এখনই চেষ্টা করুন:

1. আসল অনুপাত বজায় রেখে 200 পিক্সেলের প্রস্থে চিত্রের আকার পরিবর্তন করুন: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

   

2. আসল অনুপাত বজায় রেখে 500 পিক্সেলের উচ্চতায় চিত্রের আকার পরিবর্তন করুন: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

আপনি অনুপাত ফিল্টার ব্যবহার করে মূলের শতাংশে চিত্রের আকার পরিবর্তন করতে পারেন। যদি অনুপাত ফিল্টারের সাথে আকার নির্দিষ্ট করা হয়, তাহলে চিত্রটির আকার পরিবর্তন করা হবে এবং তারপর অনুপাত ফিল্টার প্রয়োগ করা হবে।

এখনই চেষ্টা করুন:

1. ছবির আকার পরিবর্তন করে আসলটির 50% করুন: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

   

2. 1000 পিক্সেল প্রস্থে চিত্রটির আকার পরিবর্তন করুন, তারপরে চিত্রটির বর্তমান আকারের 10% আকার দিন: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web৷ dev/backdrop-filter/hero.jpg

এই পদ্ধতিগুলি থাম্বরের অনেকগুলি ক্রপিং এবং রিসাইজ করার বিকল্পগুলির মধ্যে কয়েকটি মাত্র। অন্যান্য বিকল্পগুলি সম্পর্কে পড়তে, ব্যবহার দেখুন।

ফাইল ফরম্যাট

ফরম্যাট ফিল্টার ছবিগুলিকে jpeg , webp , gif , বা png তে রূপান্তর করে। মনে রাখবেন যে আপনি যদি পারফরম্যান্সের জন্য অপ্টিমাইজ করছেন তবে আপনাকে JPEG বা WebP ব্যবহার করা উচিত কারণ PNG এবং GIF ফাইলগুলি উল্লেখযোগ্যভাবে বড় হতে থাকে এবং পাশাপাশি সংকুচিত হয় না।

এখনই চেষ্টা করুন:

1. ইমেজটিকে WebP এ কনভার্ট করুন। আপনি যদি DevTools-এর নেটওয়ার্ক প্যানেল খোলেন তাহলে ডকুমেন্টের কন্টেন্ট-টাইপ রেসপন্স হেডার দেখায় যে সার্ভার একটি WebP ইমেজ ফিরিয়ে দিয়েছে: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev /backdrop-filter/hero.jpg

পরবর্তী পদক্ষেপ

hero.jpg ছবিতে অন্যান্য ফিল্টার এবং রূপান্তর ব্যবহার করে দেখুন।

আপনি যদি আপনার নিজের Thumbor ইনস্টলেশন ব্যবহার করে অনুসরণ করছেন, তাহলে নীচের পরিশিষ্টটি দেখুন যেটি ব্যাখ্যা করে কিভাবে এবং কেন thumbor.conf ফাইলটি ব্যবহার করতে হয়।

পরিশিষ্ট: thumbor.conf

thumbor.conf কনফিগারেশন ফাইল সেট আপ করে এবং ব্যবহার করে এই পোস্টে আলোচনা করা অনেক কনফিগারেশন বিকল্প, এবং আরও অনেকগুলি ডিফল্ট হিসাবে প্রতিষ্ঠিত করা যেতে পারে। thumbor.conf ফাইলের সেটিংস সমস্ত ছবিতে প্রয়োগ করা হবে যদি না URL স্ট্রিং প্যারামিটার দ্বারা ওভাররাইড করা হয়৷

1. একটি নতুন thumbor.conf ফাইল তৈরি করতে thumbor-config কমান্ডটি চালান।

   thumbor-config > ./thumbor.conf
   

2. আপনার নতুন thumbor.conf ফাইল খুলুন। thumbor-config কমান্ড একটি ফাইল তৈরি করেছে যা সমস্ত থাম্বর কনফিগারেশন বিকল্পের তালিকা এবং ব্যাখ্যা করে।

3. লাইনে মন্তব্য না করে এবং ডিফল্ট মান পরিবর্তন করে সেটিংস কনফিগার করুন। আপনি নিম্নলিখিত সেটিংস সেট করা দরকারী বলে মনে করতে পারেন:

   • QUALITY
   • AUTO_WEBP
   • MAX_WIDTH এবং MAX_HEIGHT
   • ALLOW_ANIMATED_GIFS

4. আপনার thumbor.conf সেটিংস ব্যবহার করতে --conf পতাকা দিয়ে Thumbor চালান।

   thumbor --conf /path/to/thumbor.conf