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

Jeremy Wagner

Katie Hempenius

Barry Pollard

কেন একটি ইমেজ CDN ব্যবহার করবেন?

ইমেজ কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) ইমেজ অপ্টিমাইজ করার ক্ষেত্রে চমৎকার। একটি ইমেজ CDN এ স্যুইচ করলে ইমেজ ফাইলের আকারে 40-80% সঞ্চয় পাওয়া যায়। তাত্ত্বিকভাবে, শুধুমাত্র বিল্ড স্ক্রিপ্ট ব্যবহার করে একই ফলাফল অর্জন করা সম্ভব, কিন্তু বাস্তবে এটি বিরল।

একটি ইমেজ CDN কি?

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

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

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

ইমেজ 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 এ বিদ্যমান চিত্রটিকে পুনরুদ্ধার করবে এবং অপ্টিমাইজ করবে।

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

নিরাপত্তা কী

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

রূপান্তর

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

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

• ক্লায়েন্ট ইঙ্গিত (উদাহরণস্বরূপ, ভিউপোর্ট প্রস্থ, DPR, এবং ছবির প্রস্থ)
• Save-Data হেডার
• ব্যবহারকারী-এজেন্ট অনুরোধ শিরোনাম
• নেটওয়ার্ক তথ্য API

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

ইমেজ CDN-এর প্রকারভেদ

ইমেজ সিডিএনগুলিকে দুটি বিভাগে বিভক্ত করা যেতে পারে: স্ব-পরিচালিত এবং তৃতীয়-পক্ষ-পরিচালিত।

স্ব-পরিচালিত ছবি CDNs

স্ব-পরিচালিত CDNগুলি প্রকৌশল কর্মীদের সাথে এমন সাইটগুলির জন্য একটি ভাল পছন্দ হতে পারে যারা তাদের নিজস্ব অবকাঠামো বজায় রাখতে স্বাচ্ছন্দ্যবোধ করে।

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

থার্ড-পার্টি ইমেজ সিডিএন

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

একটি ছবি সিডিএন নির্বাচন করা হচ্ছে

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

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

সবচেয়ে বড় কন্টেন্টফুল পেইন্টের (LCP) উপর প্রভাব

চিত্রগুলি অনেক ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতার একটি গুরুত্বপূর্ণ অংশ, এবং এইভাবে যখন এটি সবচেয়ে বড় বিষয়বস্তুপূর্ণ পেইন্টের ক্ষেত্রে আসে তখন সাইটগুলি কতটা ভাল করে তা নির্ণয় করে৷ আপনি একটি ইমেজ CDN ব্যবহার করার সিদ্ধান্ত নিলে এখানে কয়েকটি বিষয় মনে রাখতে হবে:

1. CDN থেকে পরিবেশিত চিত্রগুলি একটি ক্রস-অরিজিন সার্ভার থেকে আসতে পারে, যার জন্য অতিরিক্ত সংযোগ সেটআপ সময় জড়িত। যখন সম্ভব, একটি ইমেজ CDN ব্যবহার করার চেষ্টা করুন যা প্রাথমিক উত্সের মাধ্যমে প্রক্সি করে যাতে আপনি ব্রাউজারের সাথে সংযোগ করার জন্য অতিরিক্ত উত্স যোগ না করেন৷ এটি প্রাথমিক উত্সে স্ব-হোস্টিং চিত্রগুলির মতো একই প্রভাব ফেলে৷
2. LCP ইমেজ এলিমেন্টে "high" এর একটি fetchpriority অ্যাট্রিবিউট মান ব্যবহার করার কথা বিবেচনা করুন যাতে ব্রাউজার যত তাড়াতাড়ি সম্ভব সেই ছবি লোড করা শুরু করতে পারে।
3. যদি প্রাথমিক HTML-এ কোনো ছবি অবিলম্বে আবিষ্কৃত না হয়, তাহলে আপনার LCP প্রার্থীর ছবির জন্য একটি rel=preload ইঙ্গিত ব্যবহার করার কথা বিবেচনা করুন যাতে ব্রাউজারটি সময়ের আগেই সেই ছবি লোড করতে পারে।
4. যদি আপনার মূলের মাধ্যমে প্রক্সি করা সম্ভব না হয়, এবং পৃষ্ঠা লোড হওয়ার সময় সঠিক চিত্রটি লোড করা হবে তা পরে জানা যাবে না, আপনি যত তাড়াতাড়ি সম্ভব ক্রস-অরিজিন ইমেজ সিডিএন-এর সাথে একটি সংযোগ স্থাপন করুন যাতে রিসোর্স লোডিং পর্বটি সংক্ষিপ্ত করা যায়। আপনার পৃষ্ঠার LCP প্রার্থী ইমেজ কি হতে পারে.

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