ইমেজ কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) ওয়েবের জন্য ইমেজ অপ্টিমাইজ করার ক্ষেত্রে চমৎকার। আপনার ওয়েবসাইটকে একটি ইমেজ CDN-এ স্যুইচ করলে ইমেজ ফাইলের আকারে 40-80% সাশ্রয় হতে পারে এবং বেশিরভাগ ক্ষেত্রেই তারা আপনার ছবিগুলিকে বিল্ড-টাইম ইমেজ অপ্টিমাইজেশান স্ক্রিপ্টের চেয়ে ভালোভাবে অপ্টিমাইজ করতে পারে।
একটি ইমেজ CDN কি?
ইমেজ সিডিএনগুলি ইমেজ রূপান্তর, অপ্টিমাইজ করা এবং বিতরণে বিশেষজ্ঞ। আপনি এগুলিকে আপনার সাইটে ব্যবহৃত চিত্রগুলি অ্যাক্সেস এবং ম্যানিপুলেট করার জন্য API হিসাবেও ভাবতে পারেন৷ একটি ইমেজ CDN থেকে লোড করা ছবির জন্য, একটি ইমেজ ইউআরএল শুধুমাত্র কোন ইমেজটি লোড করতে হবে তা নয়, সাইজ, ফরম্যাট এবং কোয়ালিটির মত প্যারামিটারও নির্দেশ করে। এটি আপনাকে বিভিন্ন ব্যবহারের ক্ষেত্রে একটি চিত্রের বৈচিত্র তৈরি করতে দেয়।
ইমেজ সিডিএনগুলি বিল্ড-টাইম ইমেজ অপ্টিমাইজেশান স্ক্রিপ্ট থেকে আলাদা যে তারা প্রয়োজন অনুসারে ইমেজগুলির নতুন সংস্করণ তৈরি করে। ফলস্বরূপ, সিডিএনগুলি সাধারণত বিল্ড স্ক্রিপ্টগুলির চেয়ে পৃথক ক্লায়েন্টদের জন্য কাস্টমাইজ করা ছবিগুলি তৈরি করার জন্য আরও উপযুক্ত।
ইমেজ 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) ইমেজ ফাইল ফরম্যাট (উদাহরণে ওয়েবপি) ফেরত দেওয়া একই রকম নাও হতে পারে। content-type HTTP হেডার ব্রাউজারকে বলে যে ইউআরএলটি কোন ফর্ম্যাটে আছে যাতে এটি যথাযথভাবে ইউআরএল প্রক্রিয়া করতে পারে। এটি বিভ্রান্তির কারণ হতে পারে যদি ফাইলটি ডিস্কে সংরক্ষণ করা হয় এবং অন্য একটি প্রোগ্রাম দ্বারা ব্যবহার করা হয় যা ফাইল এক্সটেনশনের সাথে বিন্যাসটি মিলবে বলে আশা করে।
একটি ইমেজ CDN-এ ছবি আপলোড করার আরেকটি ব্যাপকভাবে সমর্থিত উপায় হল ছবি CDN-এর API-এ একটি HTTP POST অনুরোধে পাঠানো।
নিরাপত্তা কী
একটি নিরাপত্তা কী অন্য লোকেদের আপনার ছবির নতুন সংস্করণ তৈরি করতে বাধা দেয়। এই বৈশিষ্ট্যটি সক্ষম করে, একটি ছবির প্রতিটি নতুন সংস্করণের জন্য একটি অনন্য নিরাপত্তা কী প্রয়োজন৷
কেউ যদি ছবির URL-এর প্যারামিটার পরিবর্তন করার চেষ্টা করে কিন্তু একটি বৈধ নিরাপত্তা কী প্রদান না করে, তাহলে তারা নতুন সংস্করণ তৈরি করতে পারবে না। আপনার ইমেজ CDN আপনার জন্য সিকিউরিটি কী তৈরি এবং ট্র্যাক করার বিবরণের যত্ন নেয়।
রূপান্তর
ইমেজ সিডিএন দশ, এবং কিছু ক্ষেত্রে শত শত, বিভিন্ন ইমেজ রূপান্তর অফার করে। এই রূপান্তরগুলি ইউআরএল স্ট্রিং-এ নির্দিষ্ট করা হয়েছে এবং একই সময়ে একাধিক রূপান্তর ব্যবহার করার ক্ষেত্রে কোনও বিধিনিষেধ নেই৷ ওয়েব পারফরম্যান্সের জন্য, সবচেয়ে গুরুত্বপূর্ণ চিত্র রূপান্তর হল আকার, পিক্সেল ঘনত্ব, বিন্যাস এবং সংকোচন। এই রূপান্তরগুলি হল একটি ইমেজ CDN-এ স্যুইচ করা সাধারণত আপনার সাইটের ইমেজ ফাইলগুলিকে ছোট করে তোলে৷
যেহেতু সাধারণত পারফরম্যান্স ট্রান্সফর্মেশনের জন্য একটি উদ্দেশ্যমূলকভাবে সেরা সেটিং থাকে, কিছু ইমেজ CDN এই রূপান্তরগুলির জন্য একটি "অটো" মোড সমর্থন করে। উদাহরণস্বরূপ, ছবিগুলিকে WebP ফর্ম্যাটে রূপান্তরিত করা হবে তা নির্দিষ্ট করার পরিবর্তে, আপনি CDN কে স্বয়ংক্রিয়ভাবে সর্বোত্তম বিন্যাসটি নির্বাচন করতে এবং পরিবেশন করতে দিতে পারেন৷ একটি চিত্র CDN অন্যদের মধ্যে নিম্নলিখিত সংকেতগুলি ব্যবহার করে একটি চিত্রকে রূপান্তর করার সর্বোত্তম উপায় নির্ধারণ করতে পারে:
- ক্লায়েন্ট ইঙ্গিত (উদাহরণস্বরূপ, ভিউপোর্ট প্রস্থ, DPR, এবং ছবির প্রস্থ)
-
Save-Dataহেডার - ব্যবহারকারী-এজেন্ট অনুরোধ শিরোনাম
- নেটওয়ার্ক তথ্য API
উদাহরণস্বরূপ, ইমেজ CDN একটি Chrome ব্রাউজারে AVIF, একটি এজ ব্রাউজারে WebP এবং একটি খুব পুরানো ব্রাউজারে JPEG পরিবেশন করতে পারে। স্বয়ংক্রিয় সেটিংস জনপ্রিয় কারণ তারা আপনাকে ইমেজ CDN-এর দক্ষতার সুবিধা নিতে দেয় যখন ইমেজ CDN তাদের সমর্থন করতে শুরু করে তখন নতুন প্রযুক্তি গ্রহণ করার জন্য আপনার কোড পরিবর্তন করার প্রয়োজন ছাড়াই ইমেজ অপ্টিমাইজ করার ক্ষেত্রে।
ইমেজ CDN-এর প্রকারভেদ
ইমেজ CDN-এর দুটি প্রধান বিভাগ রয়েছে: স্ব-পরিচালিত এবং তৃতীয়-পক্ষ-পরিচালিত।
স্ব-পরিচালিত ছবি CDNs
স্ব-পরিচালিত CDNগুলি প্রকৌশল কর্মীদের সাথে এমন সাইটগুলির জন্য একটি ভাল পছন্দ হতে পারে যারা তাদের নিজস্ব অবকাঠামো বজায় রাখতে স্বাচ্ছন্দ্যবোধ করে।
- থাম্বর হল সবচেয়ে জনপ্রিয় স্ব-পরিচালিত ছবি CDN। এটি ওপেন সোর্স এবং ব্যবহার করার জন্য বিনামূল্যে, তবে বেশিরভাগ বাণিজ্যিক CDN-এর তুলনায় এতে কম বৈশিষ্ট্য রয়েছে এবং এর ডকুমেন্টেশন কিছুটা সীমিত। যেসব সাইট থাম্বর ব্যবহার করে তার মধ্যে রয়েছে উইকিপিডিয়া , স্কোয়ার এবং 99ডিজাইন । থাম্বর ইমেজ সিডিএন কীভাবে ইনস্টল করবেন তা সেট আপ করার নির্দেশাবলীর জন্য দেখুন।
- কাল্পনিক
- ইমাগোর
থার্ড-পার্টি ইমেজ সিডিএন
থার্ড-পার্টি ইমেজ সিডিএন একটি সেবা হিসেবে ইমেজ সিডিএন প্রদান করে। যেভাবে ক্লাউড প্রদানকারীরা ফি দিয়ে সার্ভার এবং অন্যান্য অবকাঠামো প্রদান করে, ইমেজ সিডিএনগুলি ফি দিয়ে ইমেজ অপ্টিমাইজেশান এবং ডেলিভারি প্রদান করে। যেহেতু থার্ড-পার্টি ইমেজ সিডিএন অন্তর্নিহিত প্রযুক্তি বজায় রাখে, আপনি সাধারণত একটি মোটামুটি দ্রুত ব্যবহার শুরু করতে পারেন, যদিও একটি বড় সাইটের জন্য সম্পূর্ণ স্থানান্তর হতে বেশি সময় লাগতে পারে। থার্ড-পার্টি ইমেজ সিডিএন-এর দাম সাধারণত ব্যবহারের স্তরের উপর ভিত্তি করে করা হয়, বেশিরভাগ ইমেজ সিডিএন হয় একটি বিনামূল্যের স্তর বা বিনামূল্যে ট্রায়াল প্রদান করে যাতে আপনি তাদের পণ্য ব্যবহার করে দেখতে পারেন।
একটি ইমেজ সিডিএন বেছে নিন
ইমেজ CDN-এর জন্য অনেক ভালো বিকল্প আছে। কিছুতে অন্যদের তুলনায় বেশি বৈশিষ্ট্য রয়েছে, তবে তাদের যেকোনও আপনাকে আপনার চিত্রগুলিতে বাইট সংরক্ষণ করতে সাহায্য করতে পারে এবং তাই আপনার পৃষ্ঠাগুলি দ্রুত লোড করতে পারে৷ ফিচার সেট ছাড়াও, একটি ইমেজ CDN বাছাই করার সময় অন্যান্য বিষয়গুলি বিবেচনা করতে হবে তা হল খরচ, সমর্থন, ডকুমেন্টেশন এবং সেটআপ বা মাইগ্রেশনের সহজতা।
সবচেয়ে বড় কন্টেন্টফুল পেইন্টের (LCP) উপর প্রভাব
ছবিগুলি অনেক ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতার একটি গুরুত্বপূর্ণ অংশ, তাই সেগুলি একটি সাইটের সবচেয়ে বড় কন্টেন্টফুল পেইন্টের একটি গুরুত্বপূর্ণ উপাদান৷ আপনি একটি ইমেজ CDN ব্যবহার করার সিদ্ধান্ত নিলে এখানে কয়েকটি বিষয় মনে রাখতে হবে:
- CDN থেকে পরিবেশিত ছবিগুলি একটি ক্রস-অরিজিন সার্ভার থেকে আসতে পারে, যা আপনার সাইটের সংযোগ সেটআপের সময় বাড়িয়ে দিতে পারে। যখন সম্ভব, একটি ইমেজ CDN ব্যবহার করার চেষ্টা করুন যা প্রাথমিক উত্সের মাধ্যমে প্রক্সি করে যাতে আপনি ব্রাউজারের সাথে সংযোগ করার জন্য অতিরিক্ত উত্স যোগ না করেন৷ এটি প্রাথমিক উত্সে স্ব-হোস্টিং চিত্রগুলির মতো একই প্রভাব ফেলে৷
- LCP ইমেজ এলিমেন্টে
"high"এর একটিfetchpriorityঅ্যাট্রিবিউট মান ব্যবহার করার কথা বিবেচনা করুন যাতে ব্রাউজার যত তাড়াতাড়ি সম্ভব সেই ছবি লোড করা শুরু করতে পারে। - প্রাথমিক HTML-এ যদি কোনো ছবি অবিলম্বে আবিষ্কৃত না হয়, তাহলে আপনার LCP প্রার্থীর ছবির জন্য একটি
rel=preloadইঙ্গিত ব্যবহার করার কথা বিবেচনা করুন যাতে ব্রাউজার সেই ছবিটিকে সময়ের আগেই লোড করতে পারে। - আপনি যদি আপনার মূলের মাধ্যমে প্রক্সি করতে না পারেন, এবং ব্রাউজারটি পৃষ্ঠা লোড না হওয়া পর্যন্ত কোন চিত্রটি লোড করতে হবে তা জানতে না পারলে, যত তাড়াতাড়ি সম্ভব ক্রস-অরিজিন ইমেজ সিডিএন-এর সাথে একটি সংযোগ সেট আপ করুন যাতে রিসোর্স লোডিং পর্বটি সংক্ষিপ্ত করা যায়। সম্ভাব্য LCP প্রার্থীর ছবি।