ইমেজ কর্মক্ষমতা

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

<img> অথবা <picture> উপাদান , অথবা CSS background-image প্রপার্টি ব্যবহার করে একটি পৃষ্ঠায় ছবি যোগ করা যেতে পারে।

ছবির আকার

ইমেজ রিসোর্স ব্যবহার করার সময় আপনি যে প্রথম অপ্টিমাইজেশনটি সম্পাদন করতে পারেন তা হল সঠিক আকারে ইমেজ প্রদর্শন করা—এই ক্ষেত্রে, সাইজ শব্দটি একটি ছবির মাত্রা বোঝায়। অন্য কোন ভেরিয়েবল বিবেচনা না করে, একটি 500 পিক্সেল বাই 500 পিক্সেল কন্টেইনারে প্রদর্শিত একটি চিত্রটি সর্বোত্তমভাবে 500 পিক্সেল বাই 500 পিক্সেল আকারে হবে৷ উদাহরণস্বরূপ, একটি বর্গাকার 1000 পিক্সেল চিত্র ব্যবহার করার অর্থ হল ছবিটি প্রয়োজনের তুলনায় দ্বিগুণ বড়।

যাইহোক, সঠিক চিত্রের আকার নির্বাচন করার সাথে জড়িত অনেকগুলি ভেরিয়েবল রয়েছে, যার ফলে প্রতিটি ক্ষেত্রে সঠিক চিত্রের আকার বেছে নেওয়ার কাজটি বেশ জটিল হয়ে ওঠে। 2010 সালে, যখন iPhone 4 প্রকাশ করা হয়েছিল, তখন স্ক্রীন রেজোলিউশন (640x960) ছিল iPhone 3 (320x480) এর দ্বিগুণ। যাইহোক, iPhone 4 এর স্ক্রীনের শারীরিক আকার মোটামুটি iPhone 3 এর মতোই ছিল।

উচ্চ রেজোলিউশনে সবকিছু প্রদর্শন করলে পাঠ্য এবং চিত্রগুলি উল্লেখযোগ্যভাবে ছোট হয়ে যেত - তাদের আগের আকারের অর্ধেক সঠিক। পরিবর্তে, 1 পিক্সেল 2 ডিভাইস পিক্সেল হয়ে গেছে। একে ডিভাইস পিক্সেল রেশিও (DPR) বলা হয়। iPhone 4—এবং এর পরে প্রকাশিত অনেক iPhone মডেল-এর DPR ছিল 2।

পূর্বের উদাহরণটি পুনর্বিবেচনা করে, যদি ডিভাইসটির একটি DPR 2 থাকে এবং চিত্রটি 500 পিক্সেল বাই 500 পিক্সেল কন্টেনারে প্রদর্শিত হয়, তাহলে একটি বর্গাকার 1000 পিক্সেল চিত্র (যাকে অন্তর্নিহিত আকার হিসাবে উল্লেখ করা হয়) এখন সর্বোত্তম আকার। একইভাবে, যদি ডিভাইসটির একটি DPR 3 থাকে, তাহলে একটি বর্গাকার 1500 পিক্সেল চিত্রটি সর্বোত্তম আকার হবে৷

srcset

<img> উপাদানটি srcset বৈশিষ্ট্য সমর্থন করে, যা আপনাকে সম্ভাব্য চিত্র উত্সগুলির একটি তালিকা নির্দিষ্ট করতে দেয় যা ব্রাউজার ব্যবহার করতে পারে। নির্দিষ্ট করা প্রতিটি ছবির উৎসে অবশ্যই ছবির URL এবং একটি প্রস্থ বা পিক্সেল ঘনত্বের বর্ণনা অন্তর্ভুক্ত থাকতে হবে।

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

পূর্ববর্তী HTML স্নিপেট পিক্সেল ঘনত্ব বর্ণনাকারী ব্যবহার করে ব্রাউজারকে 1 এর DPR সহ ডিভাইসে image-500.png , 2 এর DPR সহ ডিভাইসে image-1000.jpg এবং ডিভাইসে image-1500.jpg ব্যবহার করার জন্য ইঙ্গিত দেয় 3 এর একটি ডিপিআর।

যদিও এই সব কাটা এবং শুষ্ক মনে হতে পারে, একটি প্রদত্ত পৃষ্ঠার জন্য সর্বোত্তম চিত্র নির্বাচন করার ক্ষেত্রে একটি স্ক্রিনের ডিপিআর একমাত্র বিবেচনা নয়। পৃষ্ঠার বিন্যাস এখনও অন্য বিবেচনা.

sizes

পূর্ববর্তী সমাধানটি তখনই কাজ করে যদি আপনি সমস্ত ভিউপোর্টে একই CSS পিক্সেল আকারে চিত্র প্রদর্শন করেন। অনেক ক্ষেত্রে, ব্যবহারকারীর ডিভাইসের উপর নির্ভর করে একটি পৃষ্ঠার বিন্যাস-এবং এর সাথে কন্টেইনারের আকার-পরিবর্তন হয়।

sizes অ্যাট্রিবিউট আপনাকে সোর্স সাইজের একটি সেট নির্দিষ্ট করতে দেয়, যেখানে প্রতিটি সোর্স সাইজ একটি মিডিয়া অবস্থা এবং একটি মান নিয়ে গঠিত। sizes অ্যাট্রিবিউট সিএসএস পিক্সেলে ইমেজের ইচ্ছাকৃত ডিসপ্লে সাইজ বর্ণনা করে। srcset প্রস্থ বর্ণনাকারীর সাথে একত্রিত হলে, ব্রাউজার ব্যবহারকারীর ডিভাইসের জন্য কোন ছবির উৎসটি সেরা তা বেছে নিতে পারে।

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

পূর্ববর্তী এইচটিএমএল স্নিপেটে, srcset বৈশিষ্ট্যটি কমা দ্বারা পৃথক করে ব্রাউজারটি বেছে নিতে পারে এমন চিত্র প্রার্থীদের একটি তালিকা নির্দিষ্ট করে। তালিকার প্রতিটি প্রার্থীর মধ্যে ছবির URL থাকে, তারপরে একটি সিনট্যাক্স থাকে যা চিত্রের অন্তর্নিহিত প্রস্থকে নির্দেশ করে। একটি চিত্রের অন্তর্নিহিত আকার হল এর মাত্রা। উদাহরণস্বরূপ, 1000w এর একটি বর্ণনাকারী নির্দেশ করে যে চিত্রটির অন্তর্নিহিত প্রস্থ 1000 পিক্সেল প্রশস্ত।

এই তথ্য ব্যবহার করে, ব্রাউজার sizes অ্যাট্রিবিউটে মিডিয়া কন্ডিশনের মূল্যায়ন করে এবং — এই ক্ষেত্রে — নির্দেশ দেওয়া হয় যে ডিভাইসের ভিউপোর্টের প্রস্থ 768 পিক্সেলের বেশি হলে, ছবিটি 500 পিক্সেলের প্রস্থে প্রদর্শিত হবে। ছোট ডিভাইসে, চিত্রটি 100vw অথবা সম্পূর্ণ ভিউপোর্ট প্রস্থে প্রদর্শিত হয়।

ব্রাউজার তারপরে সর্বোত্তম চিত্র খুঁজে পেতে srcset চিত্র উত্সগুলির তালিকার সাথে এই তথ্যগুলিকে একত্রিত করতে পারে। উদাহরণস্বরূপ, যদি ব্যবহারকারী একটি মোবাইল ডিভাইসে থাকে যার স্ক্রীন প্রস্থ 320 পিক্সেলের 3 এর DPR সহ, চিত্রটি 320 CSS pixels x 3 DPR = 960 device pixels প্রদর্শিত হয়। এই উদাহরণে, নিকটতম আকারের চিত্রটি হবে image-1000.jpg যার অন্তর্নিহিত প্রস্থ 1000 পিক্সেল ( 1000w )।

ফাইল ফরম্যাট

ব্রাউজারগুলি বিভিন্ন ইমেজ ফাইল ফরম্যাট সমর্থন করে। WebP এবং AVIF এর মত আধুনিক ইমেজ ফরম্যাট PNG বা JPEG এর চেয়ে ভালো কম্প্রেশন প্রদান করতে পারে, যা আপনার ইমেজ ফাইলের আকারকে ছোট করে এবং তাই ডাউনলোড করতে কম সময় নেয়। আধুনিক বিন্যাসে ছবি পরিবেশন করার মাধ্যমে, আপনি একটি সম্পদের লোডের সময় কমাতে পারেন, যার ফলে একটি নিম্নতর বৃহৎ কন্টেন্টফুল পেইন্ট (LCP) হতে পারে।

WebP একটি ব্যাপকভাবে সমর্থিত ফর্ম্যাট যা সমস্ত আধুনিক ব্রাউজারে কাজ করে। WebP-এর প্রায়শই JPEG, PNG, বা GIF এর চেয়ে ভাল কম্প্রেশন থাকে, যা ক্ষতিকর এবং ক্ষতিহীন উভয় কম্প্রেশন অফার করে। ক্ষতিকর কম্প্রেশন ব্যবহার করার সময়ও WebP আলফা চ্যানেলের স্বচ্ছতাকেও সমর্থন করে—যেটি JPEG কোডেক অফার করে না এমন একটি বৈশিষ্ট্য।

AVIF হল একটি নতুন ইমেজ ফরম্যাট, এবং যদিও এটি WebP এর মত ব্যাপকভাবে সমর্থিত নয়, এটি ব্রাউজার জুড়ে যুক্তিসঙ্গতভাবে শালীন সমর্থন উপভোগ করে। AVIF ক্ষতিকারক এবং ক্ষতিহীন উভয় কম্প্রেশন সমর্থন করে এবং কিছু ক্ষেত্রে JPEG-এর তুলনায় পরীক্ষাগুলি 50%-এর বেশি সঞ্চয় দেখিয়েছে। AVIF ওয়াইড কালার গামুট (WCG) এবং হাই ডায়নামিক রেঞ্জ (HDR) বৈশিষ্ট্যও অফার করে।

কম্প্রেশন

যেখানে চিত্রগুলি উদ্বিগ্ন, সেখানে দুটি ধরণের সংকোচন রয়েছে:

1. ক্ষতিকর কম্প্রেশন
2. ক্ষতিহীন কম্প্রেশন

ক্ষতিকারক কম্প্রেশন কোয়ান্টাইজেশনের মাধ্যমে চিত্রের যথার্থতা হ্রাস করে কাজ করে এবং ক্রোমা সাবস্যাম্পলিং ব্যবহার করে অতিরিক্ত রঙের তথ্য বাতিল করা যেতে পারে। ক্ষতিকারক সংকোচন উচ্চ-ঘনত্বের চিত্রগুলিতে প্রচুর শব্দ এবং রঙের ক্ষেত্রে সবচেয়ে কার্যকর—সাধারণত একই বিষয়বস্তু সহ ফটো বা চিত্র। এর কারণ হল ক্ষতিকর কম্প্রেশন দ্বারা উত্পাদিত শিল্পকর্মগুলি এই ধরনের বিস্তারিত চিত্রগুলিতে লক্ষ্য করার সম্ভাবনা অনেক কম। যাইহোক, লাইন আর্ট, একইভাবে স্টার্ক ডিটেইলস বা টেক্সটের মতো তীক্ষ্ণ প্রান্তযুক্ত চিত্রাবলীর সাথে ক্ষতিকর কম্প্রেশন কম কার্যকর হতে পারে। ক্ষতিকর কম্প্রেশন JPEG, WebP, এবং AVIF ছবিতে প্রয়োগ করা যেতে পারে।

লসলেস কম্প্রেশন কোনো ডেটা ক্ষতি ছাড়াই একটি ইমেজ কম্প্রেস করে ফাইলের আকার কমিয়ে দেয়। লসলেস কম্প্রেশন তার প্রতিবেশী পিক্সেল থেকে পার্থক্যের উপর ভিত্তি করে একটি পিক্সেল বর্ণনা করে। GIF, PNG, WebP, এবং AVIF ইমেজ ফরম্যাটের জন্য লসলেস কম্প্রেশন ব্যবহার করা হয়।

আপনি Squosh , ImageOptim , বা একটি ইমেজ অপ্টিমাইজেশান পরিষেবা ব্যবহার করে আপনার ছবিগুলিকে সংকুচিত করতে পারেন৷ কম্প্রেস করার সময়, সব ক্ষেত্রে উপযুক্ত একটি সার্বজনীন সেটিং নেই। যতক্ষণ না আপনি চিত্রের গুণমান এবং ফাইলের আকারের মধ্যে একটি ভাল আপস খুঁজে না পান ততক্ষণ পর্যন্ত প্রস্তাবিত পদ্ধতিটি বিভিন্ন কম্প্রেশন স্তরের সাথে পরীক্ষা করা হবে। কিছু উন্নত ইমেজ অপ্টিমাইজেশান পরিষেবাগুলি স্বয়ংক্রিয়ভাবে আপনার জন্য এটি করতে পারে, তবে সমস্ত ব্যবহারকারীর জন্য আর্থিকভাবে কার্যকর নাও হতে পারে৷

<picture> উপাদান

<picture> উপাদানটি আপনাকে একাধিক ইমেজ প্রার্থী নির্দিষ্ট করার ক্ষেত্রে আরও নমনীয়তা দেয়:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

আপনি যখন <picture> উপাদানের মধ্যে <source> উপাদান(গুলি) ব্যবহার করেন, আপনি AVIF এবং WebP চিত্রগুলির জন্য সমর্থন যোগ করতে পারেন, কিন্তু ব্রাউজারটি আধুনিক বিন্যাস সমর্থন না করলে আরও সামঞ্জস্যপূর্ণ লিগ্যাসি চিত্র বিন্যাসে ফিরে যেতে পারেন। এই পদ্ধতির সাহায্যে, ব্রাউজার প্রথম <source> উপাদানটি বেছে নেয় যা মেলে। যদি এটি সেই বিন্যাসে চিত্রটিকে রেন্ডার করতে পারে তবে এটি সেই চিত্রটি ব্যবহার করে। অন্যথায়, ব্রাউজার পরবর্তী নির্দিষ্ট <source> উপাদানে চলে যায়। পূর্ববর্তী HTML স্নিপেটে, AVIF ফর্ম্যাট WebP ফর্ম্যাটের উপর অগ্রাধিকার নেয়, যদি AVIF বা WebP সমর্থিত না হয় তাহলে JPEG ফর্ম্যাটে ফিরে আসে৷

একটি <picture> উপাদানটির ভিতরে একটি <img> উপাদান প্রয়োজন। alt , width , এবং height বৈশিষ্ট্যগুলি <img> এ সংজ্ঞায়িত করা হয় এবং যেটি <source> নির্বাচন করা হোক না কেন ব্যবহার করা হয়।

<source> উপাদানটি media , srcset এবং sizes বৈশিষ্ট্যগুলিকেও সমর্থন করে। একইভাবে আগের <img> উদাহরণের মতো, এগুলি ব্রাউজারকে নির্দেশ করে যে বিভিন্ন ভিউপোর্টে কোন ছবি নির্বাচন করতে হবে।

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

media বৈশিষ্ট্য একটি মিডিয়া শর্ত লাগে। পূর্ববর্তী উদাহরণে, ডিভাইসের DPR মিডিয়া শর্ত হিসাবে ব্যবহৃত হয়। 1.5 এর চেয়ে বেশি বা সমান DPR সহ যেকোনো ডিভাইস প্রথম <source> উপাদান ব্যবহার করবে। <source> উপাদানটি ব্রাউজারকে বলে যে, 768 পিক্সেলের চেয়ে চওড়া ভিউপোর্ট সহ ডিভাইসগুলিতে, নির্বাচিত চিত্র প্রার্থী 500 পিক্সেল চওড়ায় প্রদর্শিত হয়। ছোট ডিভাইসে, এটি পুরো ভিউপোর্ট প্রস্থ নেয়। media এবং srcset বৈশিষ্ট্যগুলি একত্রিত করে, আপনি কোন চিত্রটি ব্যবহার করবেন তার উপর সূক্ষ্ম নিয়ন্ত্রণ রাখতে পারেন।

এটি নিম্নলিখিত সারণীতে চিত্রিত করা হয়েছে, যেখানে বেশ কয়েকটি ভিউপোর্ট প্রস্থ এবং ডিভাইস পিক্সেল অনুপাত মূল্যায়ন করা হয়েছে:

1 এর ডিপিআর সহ ডিভাইসগুলি image-500.jpg ইমেজ ডাউনলোড করে, যার মধ্যে বেশিরভাগ ডেস্কটপ ব্যবহারকারী-যারা 500 পিক্সেল চওড়া একটি বহিরাগত আকারে ছবিটি দেখেন। অন্যদিকে, 3-এর DPR সহ মোবাইল ব্যবহারকারীরা একটি সম্ভাব্য বড় image-1500.jpg ডাউনলোড করে — একই ছবি 3-এর DPR সহ ডেস্কটপ ডিভাইসে ব্যবহৃত হয়।

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

এই উদাহরণে, উচ্চ ডিপিআর সহ প্রশস্ত ডিভাইসগুলির জন্য বিভিন্ন চিত্র ব্যবহার করার জন্য একটি অতিরিক্ত <source> উপাদান অন্তর্ভুক্ত করার জন্য <picture> উপাদানটি সামঞ্জস্য করা হয়েছে:

এই অতিরিক্ত ক্যোয়ারীটির মাধ্যমে, আপনি দেখতে পাচ্ছেন যে image-1000-sm.jpg এবং image-1500-sm.jpg ছোট ভিউপোর্টে প্রদর্শিত হচ্ছে। এই অতিরিক্ত তথ্যটি আপনাকে ছবিগুলিকে আরও সংকুচিত করতে দেয়, যেহেতু কম্প্রেশন আর্টিফ্যাক্টগুলি সেই আকার এবং ঘনত্বে খুব বেশি দৃশ্যমান নয়, পাশাপাশি ডেস্কটপ ডিভাইসগুলিতে চিত্রের গুণমানের সাথে আপস করে না।

বিকল্পভাবে, srcset এবং media বৈশিষ্ট্যগুলি সামঞ্জস্য করে, আপনি ছোট ভিউপোর্টে বড় ছবি পরিবেশন করা এড়াতে পারেন:

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

পূর্ববর্তী এইচটিএমএল স্নিপেটে, ডিভাইস পিক্সেল অনুপাত বর্ণনাকারীর পক্ষে প্রস্থ বর্ণনাকারীগুলি সরানো হয়েছে। একটি মোবাইল ডিভাইসে পরিবেশিত ছবিগুলি /image-500.jpg বা /image-1000.jpg এর মধ্যে সীমাবদ্ধ, এমনকি 3 এর DPR সহ ডিভাইসেও৷

কীভাবে জটিলতা পরিচালনা করবেন

প্রতিক্রিয়াশীল চিত্রগুলির সাথে কাজ করার সময়, আপনি প্রতিটি চিত্রের জন্য বিভিন্ন আকারের বৈচিত্র এবং বিন্যাসের সাথে নিজেকে খুঁজে পেতে পারেন। পূর্ববর্তী উদাহরণে, প্রতিটি আকারের বৈচিত্র ব্যবহার করা হয়, তবে AVIF এবং WebP বাদ দিন। আপনার কতগুলি বৈকল্পিক থাকা উচিত? অনেক ইঞ্জিনিয়ারিং সমস্যার মতো, উত্তরটি "এটি নির্ভর করে" হতে থাকে।

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

অন্য দিকে, যদি অনেক বৈচিত্র্য থাকে, প্রতিটি বৈকল্পিক অন্য ক্যাশে এন্ট্রি প্রয়োজন। সার্ভারের খরচ বাড়তে পারে এবং কার্যক্ষমতা হ্রাস করতে পারে যদি ভেরিয়েন্টের ক্যাশে এন্ট্রির মেয়াদ শেষ হয়ে যায়, এবং ছবিটি আবার অরিজিন সার্ভার থেকে আনতে হবে।

এটি ছাড়াও, আপনার HTML নথির আকার প্রতিটি পরিবর্তনের সাথে বৃদ্ধি পায়। আপনি প্রতিটি ছবির জন্য একাধিক কিলোবাইট এইচটিএমএল শিপিং করতে পারেন।

অনুরোধ Accept শিরোনাম উপর ভিত্তি করে ছবি পরিবেশন

Accept HTTP রিকোয়েস্ট হেডার সার্ভারকে জানায় যে ব্যবহারকারীর ব্রাউজার কোন ধরনের বিষয়বস্তু বুঝতে পারে। এই তথ্যটি আপনার সার্ভার দ্বারা আপনার HTML প্রতিক্রিয়াগুলিতে অতিরিক্ত বাইট যোগ না করে সর্বোত্তম চিত্র বিন্যাস পরিবেশন করতে ব্যবহার করা যেতে পারে।

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

পূর্ববর্তী HTML স্নিপেট হল কোডের একটি সরলীকৃত সংস্করণ যা আপনি আপনার সার্ভারের JavaScript ব্যাকএন্ডে যোগ করতে পারেন এবং সর্বোত্তম চিত্র বিন্যাসটি চয়ন করতে এবং পরিবেশন করতে পারেন৷ যদি অনুরোধ Accept শিরোনামে image/avif অন্তর্ভুক্ত থাকে, তাহলে AVIF চিত্রটি পরিবেশিত হয়। অন্যথায়, যদি Accept হেডারে image/webp অন্তর্ভুক্ত থাকে, তাহলে WebP ইমেজ পরিবেশিত হয়। যদি এই শর্তগুলির কোনটিই সত্য না হয়, তাহলে JPEG ইমেজ পরিবেশিত হয়।

আপনি প্রায় প্রতিটি ধরণের ওয়েব সার্ভারে Accept রিকোয়েস্ট হেডারের বিষয়বস্তুর উপর ভিত্তি করে প্রতিক্রিয়াগুলি পরিবর্তন করতে পারেন—উদাহরণস্বরূপ, আপনি mod_rewrite ব্যবহার করে Accept হেডারের উপর ভিত্তি করে Apache সার্ভারে ইমেজ অনুরোধগুলি পুনরায় লিখতে পারেন।

এটি একটি ইমেজ কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) এ আপনি যে আচরণ পাবেন তার বিপরীত নয়। ইমেজ সিডিএন হল ইমেজ অপ্টিমাইজ করার জন্য এবং ব্যবহারকারীর ডিভাইস এবং ব্রাউজারের উপর ভিত্তি করে সর্বোত্তম ফর্ম্যাট পাঠানোর জন্য চমৎকার সমাধান।

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

অলস লোড হচ্ছে

loading অ্যাট্রিবিউট ব্যবহার করে ভিউপোর্টে দেখা গেলে ব্রাউজারকে অলস লোড করা ছবি বলা সম্ভব। lazy একটি বৈশিষ্ট্যের মান ব্রাউজারকে বলে যে ছবিটি ভিউপোর্টে (বা কাছাকাছি) না হওয়া পর্যন্ত ডাউনলোড না করতে। এটি ব্যান্ডউইথ সংরক্ষণ করে, ব্রাউজারকে ইতিমধ্যেই ভিউপোর্টে থাকা গুরুত্বপূর্ণ বিষয়বস্তু রেন্ডার করার জন্য প্রয়োজনীয় সংস্থানগুলিকে অগ্রাধিকার দেওয়ার অনুমতি দেয়৷

decoding

decoding অ্যাট্রিবিউট ব্রাউজারকে বলে যে এটি কীভাবে ছবিটি ডিকোড করা উচিত। async একটি মান ব্রাউজারকে বলে যে ইমেজটি অ্যাসিঙ্ক্রোনাসভাবে ডিকোড করা যেতে পারে, সম্ভবত অন্যান্য সামগ্রী রেন্ডার করার সময়কে উন্নত করে। sync একটি মান ব্রাউজারকে বলে যে চিত্রটি অন্যান্য সামগ্রীর মতো একই সময়ে উপস্থাপন করা উচিত। auto ডিফল্ট মান ব্রাউজারকে সিদ্ধান্ত নিতে দেয় যে ব্যবহারকারীর জন্য কোনটি সেরা।

ইমেজ ডেমো

আপনার জ্ঞান পরীক্ষা করুন

পরবর্তী: ভিডিও পারফরম্যান্স

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