ছবি বিষয়বস্তু বিতরণ নেটওয়ার্ক

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

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

একজন ব্যবহারকারী প্রদানকারীর কাছে একটি ক্যানোনিকাল, উচ্চ-রেজোলিউশনের ছবি আপলোড করবেন, যা এটি অ্যাক্সেস করতে ব্যবহৃত একটি URL তৈরি করবে:

https://res.cloudinary.com/demo/image/upload/sample.jpg

যদিও ব্যবহৃত সঠিক সিনট্যাক্স একটি প্রদানকারী থেকে অন্য প্রদানকারীতে পরিবর্তিত হবে, ন্যূনতম সমস্ত ইমেজ সিডিএন আপনাকে সোর্স ইমেজের মাত্রা, এনকোডিং এবং কম্প্রেশন সেটিংস পরিবর্তন করতে দেয়। ক্লাউডিনারি , উদাহরণস্বরূপ, নিম্নলিখিত সিনট্যাক্সগুলির মাধ্যমে একটি আপলোড করা চিত্রের গতিশীল আকার পরিবর্তন করে: h_ এর পরে পিক্সেলের সংখ্যাসূচক উচ্চতা, w_ এর পরে প্রস্থ, এবং একটি c_ মান যা আপনাকে চিত্রটি কীভাবে স্কেল করা উচিত সে সম্পর্কে বিস্তারিত তথ্য নির্দিষ্ট করতে দেয় অথবা ক্রপ করা হয়েছে ।

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

<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">

প্রথমবার যখন একজন ব্যবহারকারী এই রূপান্তরগুলি সম্বলিত URL পরিদর্শন করে, আনুপাতিকভাবে 400px ( w_400 ) প্রস্থে স্কেল করা ছবির একটি নতুন সংস্করণ তৈরি এবং পাঠানো হয়৷ সেই নতুন-তৈরি করা ফাইলটি তারপরে CDN জুড়ে ক্যাশ করা হয় যাতে এটি অনুরোধে পুনরায় তৈরি না করে একই ইউআরএলের অনুরোধকারী যে কোনও ব্যবহারকারীকে পাঠানো যেতে পারে।

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

<img
  src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
  srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
        https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
        https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
  alt="…">

এখন একটি পরিচিত সিনট্যাক্স যা হওয়া উচিত তা ব্যবহার করে আমরা ম্যানুয়ালি কম্প্রেশনের আমাদের কাঙ্খিত স্তর নির্দিষ্ট করতে সক্ষম হয়েছি: q_ , "গুণমান" এর জন্য সংক্ষিপ্ত এবং কম্প্রেশন স্তরের জন্য সংখ্যাসূচক শর্টহ্যান্ড অনুসরণ করে:

<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg"  alt="…">

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

স্বয়ংক্রিয় সংকোচন

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

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

এই প্রক্রিয়াটি যতটা জটিল মনে হতে পারে, বাস্তবায়ন ততটা সহজ হতে পারে না: ক্লাউডিনারির জন্য, একটি চিত্র URL-এ q_auto যোগ করা এই বৈশিষ্ট্যটিকে সক্ষম করে:

<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->

<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->

স্বয়ংক্রিয় এনকোডিং এবং বিষয়বস্তু আলোচনা

একটি ইমেজের জন্য অনুরোধ পাওয়ার পর, ইমেজ সিডিএনগুলি সবচেয়ে আধুনিক এনকোডিং নির্ধারণ করে যা ব্রাউজার দ্বারা প্রেরিত HTTP হেডারগুলির মাধ্যমে সমর্থন করে যা সম্পদের জন্য অনুরোধের সাথে-বিশেষ করে, Accept হেডার। এই শিরোনামটি এনকোডিংগুলিকে নির্দেশ করে যা ব্রাউজার বুঝতে সক্ষম, একই ধরনের মিডিয়া ব্যবহার করে আমরা একটি <picture> উপাদানের <source> type বৈশিষ্ট্য পূরণ করতে ব্যবহার করব।

উদাহরণ স্বরূপ, একটি অ্যাসেট ইউআরএলে ইমেজ ট্রান্সফর্মের তালিকায় f_auto প্যারামিটার যোগ করা ক্লাউডিনারিকে স্পষ্টভাবে বলে যে ব্রাউজার বুঝতে সক্ষম সবচেয়ে কার্যকর এনকোডিং প্রদান করতে:

<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">

সার্ভার তারপর সেই এনকোডিং সহ ইমেজের একটি সংস্করণ তৈরি করে এবং একই স্তরের ব্রাউজার সমর্থন সহ পরবর্তী সমস্ত ব্যবহারকারীদের জন্য ফলাফল ক্যাশ করে। ফাইল এক্সটেনশন নির্বিশেষে ফাইলের এনকোডিং সম্পর্কে ব্রাউজারকে স্পষ্টভাবে অবহিত করার জন্য সেই প্রতিক্রিয়াটিতে একটি Content-Type শিরোনাম অন্তর্ভুক্ত রয়েছে। যদিও একটি আধুনিক ব্রাউজার সহ একজন ব্যবহারকারী .jpg এ শেষ হওয়া একটি ফাইলের জন্য একটি অনুরোধ করবে, সেই অনুরোধের সাথে সার্ভারকে জানানো হবে যে AVIF সমর্থিত, এবং সার্ভার একটি স্পষ্ট নির্দেশ সহ একটি AVIF এনকোড করা ফাইল পাঠাবে। এটিকে AVIF হিসাবে বিবেচনা করতে।

নেট ফলাফল হল এমন একটি প্রক্রিয়া যা আপনাকে শুধুমাত্র বিকল্পভাবে এনকোড করা ফাইল তৈরি করতে এবং আপনার কম্প্রেশন সেটিংসকে ম্যানুয়ালি সূক্ষ্ম-টিউন করার (বা আপনার জন্য এই কাজগুলি করে এমন একটি সিস্টেম বজায় রাখা) থেকে মুক্তি দেয় না, কিন্তু <picture> এবং ব্যবহার করার প্রয়োজনীয়তা দূর করে। type বৈশিষ্ট্য কার্যকরভাবে ব্যবহারকারীদের কাছে সেই ফাইলগুলি সরবরাহ করার জন্য। সুতরাং, শুধুমাত্র srcset এবং sizes সিনট্যাক্স ব্যবহার করে এখনও আপনার ব্যবহারকারীদের এনকোড করা ছবিগুলি প্রদান করতে পারে—উদাহরণস্বরূপ—AVIF, WebP-এ ফিরে যাওয়া (বা JPEG-2000, একা Safari-এর জন্য), আবার সবচেয়ে বুদ্ধিমান লিগ্যাসি এনকোডিং-এ ফিরে আসা৷

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