ছবি অপ্টিমাইজ করতে ইমেজ CDN ব্যবহার করুন

Jeremy Wagner
Katie Hempenius
Katie Hempenius
X
Barry Pollard

ওয়েবের জন্য ছবি অপ্টিমাইজ করার ক্ষেত্রে ইমেজ কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDNs) খুবই ভাল। আপনার ওয়েবসাইটকে ইমেজ CDN-এ পরিবর্তন করলে, ছবির ফাইলের সাইজ ৪০–৮০% পর্যন্ত কমানো যেতে পারে এবং বেশিরভাগ ক্ষেত্রে, বিল্ড-টাইম ইমেজ অপ্টিমাইজেশন স্ক্রিপ্টের চেয়েও এটি আপনার ছবিকে আরও ভালোভাবে অপ্টিমাইজ করতে পারে।

ইমেজ CDN কী?

ইমেজ CDN-এর কাজ হল ছবি ট্রান্সফর্ম, অপ্টিমাইজ ও ডেলিভার করা। এছাড়াও, আপনি এগুলিকে আপনার সাইটে ব্যবহৃত ছবি অ্যাক্সেস ও ম্যানিপুলেট করার API হিসেবে বিবেচনা করতে পারেন। কোনও ইমেজ CDN থেকে লোড করা ছবির ক্ষেত্রে, ছবির URL শুধু কোন ছবি লোড করতে হবে তা নির্দেশ করে না, বরং সাইজ, ফর্ম্যাট ও কোয়ালিটির মতো প্যারামিটারও নির্দেশ করে। এটি আপনাকে বিভিন্ন ব্যবহারের ক্ষেত্রে একটি ছবির বিভিন্ন ভেরিয়েশন তৈরি করতে দেয়।

ছবি CDN এবং ক্লায়েন্টের মধ্যে অনুরোধ/উত্তরের ফ্লো দেখায়। একই ছবির বিভিন্ন ভার্সনের জন্য অনুরোধ করতে সাইজ ও ফর্ম্যাটের মতো প্যারামিটার ব্যবহার করা হয়।
ইমেজ CDN, ইমেজ URL-এ প্যারামিটারের উপর ভিত্তি করে যে ট্রান্সফর্মেশন করতে পারে তার উদাহরণ।

ইমেজ CDN, বিল্ড-টাইম ইমেজ অপ্টিমাইজেশন স্ক্রিপ্টের থেকে আলাদা কারণ এটি প্রয়োজন অনুযায়ী ইমেজের নতুন ভার্সন তৈরি করে। এর ফলে, বিল্ড স্ক্রিপ্টের তুলনায় CDN সাধারণত এমন ছবি তৈরি করার জন্য বেশি উপযুক্ত যা স্বতন্ত্র ক্লায়েন্টের জন্য ব্যাপকভাবে কাস্টমাইজ করা হয়।

অপ্টিমাইজেশন বিকল্প নির্দেশ করতে কীভাবে ছবির CDN, URL ব্যবহার করে

ইমেজ CDN-এর ব্যবহার করা ইমেজ URL, কোনও ইমেজ এবং সেটিতে প্রয়োগ করা উচিত এমন ট্রান্সফর্মেশন ও অপ্টিমাইজেশন সম্পর্কে গুরুত্বপূর্ণ তথ্য প্রদান করে। আপনি যে ইমেজ CDN ব্যবহার করছেন তার উপর নির্ভর করে URL ফর্ম্যাট আলাদা হয়, তবে উচ্চ স্তরে, সেগুলির সবকটিতেই একই ধরনের ফিচার থাকে। এখানে সবচেয়ে সাধারণ কিছু ফিচার দেওয়া হল।

ছবির URL-এ সাধারণত নিম্নলিখিত কম্পোনেন্ট থাকে: উৎস, ছবি, নিরাপত্তা কী ও ট্রান্সফর্মেশন।
ইমেজ CDN থেকে পাওয়া ইমেজ URL-এর প্রাথমিক অংশ।

অরিজিন

আপনার নিজের ডোমেন বা আপনার ইমেজ CDN-এর ডোমেনে ইমেজ CDN থাকতে পারে। থার্ড-পার্টি ইমেজ CDN সাধারণত ফি-এর বিনিময়ে কাস্টম ডোমেন ব্যবহার করার বিকল্প অফার করে। আপনার নিজস্ব ডোমেন ব্যবহার করলে, পরে ছবির CDN পরিবর্তন করা সহজ হয় কারণ কোনও URL পরিবর্তন করার প্রয়োজন হয় না।

আগের উদাহরণে কাস্টম ডোমেনের পরিবর্তে পছন্দমতো সাবডোমেন সহ ছবির CDN-এর ডোমেন ("example-cdn.com") ব্যবহার করা হয়েছে।

ছবি

ইমেজ CDN সাধারণত এমনভাবে কনফিগার করা যায় যাতে প্রয়োজন হলে সেগুলি অটোমেটিক তাদের বর্তমান লোকেশন থেকে ছবি নিয়ে আসতে পারে। এই ক্ষমতা প্রায়ই অর্জন করা হয় ইমেজ CDN দ্বারা জেনারেট করা ছবির URL-এর মধ্যে আগে থেকে থাকা ছবির সম্পূর্ণ URL অন্তর্ভুক্ত করার মাধ্যমে। যেমন, আপনি এমন URL দেখতে পেতে পারেন যা এইরকম দেখতে: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto। এই URL, https://flowers.com/daisy.jpg-এ থাকা ছবি ফিরিয়ে আনবে ও অপ্টিমাইজ করবে।

অনুরোধ করা ফাইল ফরম্যাট (উদাহরণে, JPG) এবং ফেরত পাঠানো ইমেজ ফাইল ফরম্যাট (উদাহরণে, WebP) একই নাও হতে পারে। content-type HTTP হেডার ব্রাউজারকে জানায় যে URL কোন ফর্ম্যাটে আছে যাতে এটি URL সঠিকভাবে প্রসেস করতে পারে। ফাইলটি ডিস্কে সেভ করা হলে এবং অন্য কোনও প্রোগ্রাম দ্বারা ব্যবহার করা হলে এটি বিভ্রান্তির সৃষ্টি করতে পারে যা ফাইল এক্সটেনশনের সাথে ফর্ম্যাটটি মিলবে বলে আশা করে।

ইমেজ CDN-এ ছবি আপলোড করার আরেকটি বহুল ব্যবহৃত পদ্ধতি হল, ইমেজ CDN-এর API-তে HTTP POST অনুরোধের মাধ্যমে ছবি পাঠানো।

নিরাপত্তা কী

নিরাপত্তা 'কী' অন্য লোকজনকে আপনার ছবির নতুন ভার্সন তৈরি করা থেকে আটকায়। এই ফিচার চালু থাকলে, কোনও ছবির প্রতিটি নতুন ভার্সনের জন্য একটি অনন্য নিরাপত্তা কী প্রয়োজন।

কেউ যদি ছবির URL-এর প্যারামিটার পরিবর্তন করার চেষ্টা করেন কিন্তু সঠিক নিরাপত্তা'কী' প্রদান না করেন, তাহলে তিনি নতুন ভার্সন তৈরি করতে পারবেন না। আপনার ইমেজ CDN, আপনার জন্য নিরাপত্তা কী তৈরি ও ট্র্যাক করার বিবরণ সংক্রান্ত বিষয়গুলি দেখে।

ট্রান্সফর্মেশন

ইমেজ CDN-এ দশটি এবং কিছু ক্ষেত্রে শত শত বিভিন্ন ইমেজ ট্রান্সফর্মেশন অফার করা হয়। এইসব ট্রান্সফর্মেশন URL স্ট্রিংয়ে উল্লেখ করা থাকে এবং একই সময়ে একাধিক ট্রান্সফর্মেশন ব্যবহার করার ক্ষেত্রে কোনও বিধিনিষেধ নেই। ওয়েব পারফর্ম্যান্সের জন্য, ছবির সবচেয়ে গুরুত্বপূর্ণ ট্রান্সফর্মেশন হল সাইজ, পিক্সেল ঘনত্ব, ফর্ম্যাট ও কম্প্রেশন। এইসব ট্রান্সফর্মেশনের কারণেই ইমেজ CDN-এ পরিবর্তন করলে সাধারণত আপনার সাইটের ছবির ফাইল ছোট হয়ে যায়।

কারণ পারফর্ম্যান্স ট্রান্সফর্মেশনের জন্য সাধারণত একটি বস্তুনিষ্ঠ সেরা সেটিং থাকে, কিছু ইমেজ CDN এই ট্রান্সফর্মেশনের জন্য একটি "অটো" মোড সমর্থন করে। যেমন, ছবি WebP ফর্ম্যাটে পরিবর্তন করার কথা উল্লেখ করার পরিবর্তে, আপনি CDN-কে অটোমেটিক সবচেয়ে ভালো ফর্ম্যাট বেছে নিতে এবং পরিবেশন করতে দিতে পারেন। একটি ইমেজ CDN নিম্নলিখিত সিগন্যাল ব্যবহার করে একটি ছবিকে রূপান্তর করার সর্বোত্তম উপায় নির্ধারণ করতে পারে, অন্যদের মধ্যে:

যেমন, ইমেজ CDN, Chrome ব্রাউজারে AVIF, Edge ব্রাউজারে WebP এবং অনেক পুরনো ব্রাউজারে JPEG পরিবেশন করতে পারে। অটোমেটিক সেটিংস জনপ্রিয় কারণ এগুলি আপনাকে ইমেজ CDN-এর দক্ষতা কাজে লাগিয়ে ছবি অপ্টিমাইজ করতে সাহায্য করে। ইমেজ CDN নতুন প্রযুক্তি সাপোর্ট করা শুরু করলে, সেই প্রযুক্তি গ্রহণ করার জন্য আপনাকে কোড পরিবর্তন করতে হয় না।

ছবির CDN-এর ধরন

ছবি CDN-এর দুটি প্রধান বিভাগ রয়েছে: সেল্ফ-ম্যানেজড এবং থার্ড-পার্টি-ম্যানেজড।

সেল্ফ-ম্যানেজড ইমেজ CDN

যেসব সাইটে ইঞ্জিনিয়ারিং স্টাফ আছেন এবং যারা নিজেদের ইনফ্রাস্ট্রাকচার ম্যানেজ করতে স্বচ্ছন্দ, তাদের জন্য সেল্ফ-ম্যানেজড CDN ভালো বিকল্প হতে পারে।

  • Thumbor হল সবচেয়ে জনপ্রিয় সেল্ফ-ম্যানেজড ইমেজ CDN। এটি ওপেন-সোর্স এবং বিনামূল্যে ব্যবহার করা যায়, তবে বেশিরভাগ বাণিজ্যিক CDN-এর তুলনায় এতে কম ফিচার রয়েছে এবং এর ডকুমেন্টেশন কিছুটা সীমিত। thumbor ব্যবহার করে এমন সাইটের মধ্যে রয়েছে Wikipedia, Square, এবং 99designs। এটি সেট-আপ করার নির্দেশাবলীর জন্য Thumbor ইমেজ CDN কীভাবে ইনস্টল করবেন দেখুন।
  • কাল্পনিক
  • Imagor

থার্ড-পার্টি ইমেজ CDN

থার্ড-পার্টি ইমেজ CDN পরিষেবা হিসেবে ইমেজ CDN প্রদান করে। যেভাবে ক্লাউড পরিষেবা প্রদানকারীরা ফি-এর বিনিময়ে সার্ভার ও অন্যান্য পরিকাঠামো প্রদান করে, ঠিক সেভাবেই ইমেজ CDN ফি-এর বিনিময়ে ইমেজ অপ্টিমাইজেশন ও ডেলিভারি প্রদান করে। থার্ড-পার্টি ইমেজ CDN-এর অন্তর্নিহিত প্রযুক্তি রক্ষণাবেক্ষণ করে, তাই আপনি সাধারণত খুব দ্রুত একটি ব্যবহার করা শুরু করতে পারেন, যদিও একটি বড় সাইটের জন্য সম্পূর্ণ মাইগ্রেশন করতে আরও বেশি সময় লাগতে পারে। থার্ড-পার্টি ইমেজ CDN-এর দাম সাধারণত ব্যবহারের টিয়ারের উপর ভিত্তি করে নির্ধারণ করা হয়, বেশিরভাগ ইমেজ CDN আপনাকে তাদের প্রোডাক্ট ব্যবহার করে দেখার জন্য একটি ফ্রি টিয়ার বা ফ্রি ট্রায়াল প্রদান করে।

একটি ছবি CDN বেছে নিন

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

Largest Contentful Paint (LCP)-এর উপর প্রভাব

অনেক ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতার একটি গুরুত্বপূর্ণ অংশ হল ছবি, তাই কোনও সাইটের Largest Contentful Paint-এর ক্ষেত্রে এটি একটি গুরুত্বপূর্ণ বিষয়। আপনি যদি ইমেজ CDN ব্যবহার করার সিদ্ধান্ত নেন, তাহলে কয়েকটি বিষয় মনে রাখতে হবে: