চাহিদা অনুযায়ী চিত্রের আকার পরিবর্তন, সংকুচিত এবং রূপান্তর করতে থামবার বিনামূল্যে ব্যবহার করা যেতে পারে।
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 এর বিন্যাস প্রতিনিধিত্ব করে।
![একটি থাম্বর ইউআরএলে নিম্নলিখিত উপাদানগুলি রয়েছে: উত্স, সুরক্ষা কী, আকার, ফিল্টার এবং চিত্র৷](https://web.dev/static/articles/use-thumbor/image/a-thumbor-url-has-follow-485047f95e001.jpg?authuser=8&hl=bn)
উৎপত্তি
সমস্ত অরিজিনের মতো, একটি থাম্বর ইউআরএলের উৎপত্তি তিনটি অংশ নিয়ে গঠিত: একটি স্কিম (যা প্রায় সবসময় http
বা https
হয়), একটি হোস্ট এবং একটি পোর্ট। এই উদাহরণে, একটি IP ঠিকানা ব্যবহার করে হোস্টকে চিহ্নিত করা হয়, কিন্তু আপনি যদি একটি DNS সার্ভার ব্যবহার করেন তবে এটি thumbor-server.my-site.com
এর মতো দেখতে হতে পারে। ডিফল্টরূপে, Thumbor ইমেজ পরিবেশন করতে পোর্ট 8888
ব্যবহার করে।
নিরাপত্তা কী
URL এর unsafe
অংশটি নির্দেশ করে যে আপনি নিরাপত্তা কী ছাড়াই Thumbor ব্যবহার করছেন। একটি নিরাপত্তা কী ব্যবহারকারীকে আপনার ছবির URL-এ অননুমোদিত পরিবর্তন করতে বাধা দেয়। ইমেজ ইউআরএল পরিবর্তন করে, একজন ব্যবহারকারী আপনার সার্ভার (এবং আপনার হোস্টিং বিল) ব্যবহার করে তাদের চিত্রের আকার পরিবর্তন করতে পারে, অথবা, আরও দূষিতভাবে, আপনার সার্ভারকে ওভারলোড করতে পারে। এই গাইড Thumbor-এর নিরাপত্তা কী বৈশিষ্ট্য সেট আপ কভার করবে না৷
আকার
URL এর এই অংশটি আউটপুট চিত্রের পছন্দসই আকার নির্দিষ্ট করে। আপনি চিত্রের আকার পরিবর্তন করতে না চাইলে এটি বাদ দেওয়া যেতে পারে। অন্যান্য URL প্যারামিটারের উপর নির্ভর করে কাঙ্খিত আকার অর্জন করতে Thumbor বিভিন্ন পদ্ধতি ব্যবহার করবে যেমন ক্রপিং বা স্কেলিং। এই পোস্টের পরবর্তী বিভাগে আরও বিস্তারিতভাবে কীভাবে চিত্রগুলিকে পুনরায় আকার দিতে হয় তা ব্যাখ্যা করে৷
এখনই চেষ্টা করুন:
একটি নতুন ট্যাবে পরিবেশিত চিত্রটি আসল আকারে দেখতে নিম্নলিখিত URLটিতে ক্লিক করুন: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
আসল ছবি চিত্রটিকে 100x100 পিক্সেলে আকার দিন: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
![100x100 পিক্সেলের চিত্র](https://web.dev/static/articles/use-thumbor/image/image-100x100-pixels-3848e03e36905.jpg?authuser=8&hl=bn)
ফিল্টার
ফিল্টারগুলি একটি চিত্রকে রূপান্তরিত করে। ইউআরএল সেগমেন্টের ফিল্টার অংশ filters:
ফিল্টারগুলির একটি কোলন-বিচ্ছিন্ন তালিকা অনুসরণ করে; আপনি কোনো ফিল্টার ব্যবহার না করলে এটি বাদ দেওয়া যেতে পারে। পৃথক ফিল্টারগুলির জন্য সিনট্যাক্স একটি ফাংশন কলের অনুরূপ (উদাহরণস্বরূপ grayscale()
) শূন্য বা তার বেশি আর্গুমেন্ট ধারণকারী।
এখনই চেষ্টা করুন:
একটি একক ফিল্টার প্রয়োগ করুন: 25 পিক্সেল ব্যাসার্ধ সহ একটি গাউসিয়ান ব্লার প্রভাব: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
ঝাপসা ছবি একাধিক ফিল্টার প্রয়োগ করুন। গ্রেস্কেলে রূপান্তর করুন এবং চিত্রটিকে 90 ডিগ্রি ঘোরান : http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
![গ্রেস্কেল চিত্র যা 90 ডিগ্রি ঘোরানো হয়েছে](https://web.dev/static/articles/use-thumbor/image/grayscale-image-has-been-787f2eb50dfd7.jpg?authuser=8&hl=bn)
ইমেজ রূপান্তর
এই বিভাগটি পারফরম্যান্সের সাথে সবচেয়ে প্রাসঙ্গিক Thumbor কার্যকারিতাগুলির উপর ফোকাস করে: ফাইল ফর্ম্যাটের মধ্যে কম্প্রেশন, আকার পরিবর্তন এবং রূপান্তর।
কম্প্রেশন
গুণমানের ফিল্টার JPEG ছবিগুলিকে পছন্দসই ছবির গুণমানের স্তরে (1-100) সংকুচিত করে। যদি কোন মানের স্তর প্রদান করা না হয়, Thumbor ইমেজটিকে 80-এর মানের স্তরে সংকুচিত করে। এটি একটি ভাল ডিফল্ট: মানের স্তর 80-85 সাধারণত ছবির গুণমানের উপর খুব কম লক্ষণীয় প্রভাব ফেলে, তবে সাধারণত 30-40% ছবির আকার হ্রাস করে।
এখনই চেষ্টা করুন:
ছবিটিকে 1 এর গুণমানে সংকুচিত করুন (খুব খারাপ): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
নিম্নমানের ছবি Thumbor-এর ডিফল্ট কম্প্রেশন সেটিংস ব্যবহার করে ছবি কম্প্রেস করুন: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg
![কোনো লক্ষণীয় মানের সমস্যা ছাড়াই সংকুচিত ছবি](https://web.dev/static/articles/use-thumbor/image/compressed-image-no-noti-ba38af80f42a4.jpg?authuser=8&hl=bn)
আকার পরিবর্তন করা হচ্ছে
মূল অনুপাত বজায় রেখে একটি চিত্রের আকার পরিবর্তন করতে URL স্ট্রিংয়ের size
অংশের মধ্যে $WIDTHx0
বা 0x$HEIGHT
ফর্ম্যাটটি ব্যবহার করুন৷
এখনই চেষ্টা করুন:
আসল অনুপাত বজায় রেখে 200 পিক্সেলের প্রস্থে চিত্রের আকার পরিবর্তন করুন: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
200 পিক্সেল প্রস্থে চিত্রের আকার পরিবর্তন করা হয়েছে আসল অনুপাত বজায় রেখে 500 পিক্সেলের উচ্চতায় চিত্রের আকার পরিবর্তন করুন: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
![500 পিক্সেল লম্বা ছবি](https://web.dev/static/articles/use-thumbor/image/image-is-500-pixels-tall-992a9e041c75d.jpg?authuser=8&hl=bn)
আপনি অনুপাত ফিল্টার ব্যবহার করে মূলের শতাংশে চিত্রের আকার পরিবর্তন করতে পারেন। যদি অনুপাত ফিল্টারের সাথে আকার নির্দিষ্ট করা হয়, তাহলে চিত্রটির আকার পরিবর্তন করা হবে এবং তারপর অনুপাত ফিল্টার প্রয়োগ করা হবে।
এখনই চেষ্টা করুন:
ছবির আকার পরিবর্তন করে আসলটির 50% করুন: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
ছবির আকার 50% আসল আকারে পরিবর্তন করা হয়েছে৷ 1000 পিক্সেল প্রস্থে চিত্রটির আকার পরিবর্তন করুন, তারপরে চিত্রটির বর্তমান আকারের 10% আকার দিন: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web৷ dev/backdrop-filter/hero.jpg
![100 পিক্সেল চওড়া ছবি](https://web.dev/static/articles/use-thumbor/image/image-is-100-pixels-wide-07aa661c4581b.jpg?authuser=8&hl=bn)
এই পদ্ধতিগুলি থাম্বরের অনেকগুলি ক্রপিং এবং রিসাইজ করার বিকল্পগুলির মধ্যে কয়েকটি মাত্র। অন্যান্য বিকল্পগুলি সম্পর্কে পড়তে, ব্যবহার দেখুন।
ফাইল ফরম্যাট
ফরম্যাট ফিল্টার ছবিগুলিকে jpeg
, webp
, gif
, বা png
তে রূপান্তর করে। মনে রাখবেন যে আপনি যদি পারফরম্যান্সের জন্য অপ্টিমাইজ করছেন তবে আপনাকে JPEG বা WebP ব্যবহার করা উচিত কারণ PNG এবং GIF ফাইলগুলি উল্লেখযোগ্যভাবে বড় হতে থাকে এবং পাশাপাশি সংকুচিত হয় না।
এখনই চেষ্টা করুন:
- ইমেজটিকে WebP এ কনভার্ট করুন। আপনি যদি DevTools-এর নেটওয়ার্ক প্যানেল খোলেন তাহলে ডকুমেন্টের কন্টেন্ট-টাইপ রেসপন্স হেডার দেখায় যে সার্ভার একটি WebP ইমেজ ফিরিয়ে দিয়েছে: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev /backdrop-filter/hero.jpg
![DevTools স্ক্রিনশট একটি ছবির বিষয়বস্তু-টাইপ (WebP) দেখাচ্ছে](https://web.dev/static/articles/use-thumbor/image/devtools-screenshot-showi-0e757c2215957.jpg?authuser=8&hl=bn)
content-type
রেসপন্স হেডারপরবর্তী পদক্ষেপ
hero.jpg
ছবিতে অন্যান্য ফিল্টার এবং রূপান্তর ব্যবহার করে দেখুন।
আপনি যদি আপনার নিজের Thumbor ইনস্টলেশন ব্যবহার করে অনুসরণ করছেন, তাহলে নীচের পরিশিষ্টটি দেখুন যেটি ব্যাখ্যা করে কিভাবে এবং কেন thumbor.conf
ফাইলটি ব্যবহার করতে হয়।
পরিশিষ্ট: thumbor.conf
thumbor.conf
কনফিগারেশন ফাইল সেট আপ করে এবং ব্যবহার করে এই পোস্টে আলোচনা করা অনেক কনফিগারেশন বিকল্প, এবং আরও অনেকগুলি ডিফল্ট হিসাবে প্রতিষ্ঠিত করা যেতে পারে। thumbor.conf
ফাইলের সেটিংস সমস্ত ছবিতে প্রয়োগ করা হবে যদি না URL স্ট্রিং প্যারামিটার দ্বারা ওভাররাইড করা হয়৷
একটি নতুন
thumbor.conf
ফাইল তৈরি করতেthumbor-config
কমান্ডটি চালান।thumbor-config > ./thumbor.conf
আপনার নতুন
thumbor.conf
ফাইল খুলুন।thumbor-config
কমান্ড একটি ফাইল তৈরি করেছে যা সমস্ত থাম্বর কনফিগারেশন বিকল্পের তালিকা এবং ব্যাখ্যা করে।লাইনে মন্তব্য না করে এবং ডিফল্ট মান পরিবর্তন করে সেটিংস কনফিগার করুন। আপনি নিম্নলিখিত সেটিংস সেট করা দরকারী বলে মনে করতে পারেন:
-
QUALITY
-
AUTO_WEBP
-
MAX_WIDTH
এবংMAX_HEIGHT
-
ALLOW_ANIMATED_GIFS
-
আপনার
thumbor.conf
সেটিংস ব্যবহার করতে--conf
পতাকা দিয়ে Thumbor চালান।thumbor --conf /path/to/thumbor.conf