প্রতিক্রিয়াশীল ছবি

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

সৌভাগ্যবশত, এমনটা হওয়া থেকে বিরত রাখার জন্য CSS আপনাকে বিভিন্ন উপায় দেয়।

আপনার ছবিগুলো সীমাবদ্ধ করুন

আপনার স্টাইল শীটে, আপনি max-inline-size ব্যবহার করে ঘোষণা করতে পারেন যে ছবিগুলি কখনই তাদের ধারণকারী উপাদানের চেয়ে চওড়া আকারে রেন্ডার করা যাবে না।

img {
  max-inline-size: 100%;
  block-size: auto;
}

আপনি এই একই নিয়ম অন্যান্য ধরনের এমবেডেড কন্টেন্টের ক্ষেত্রেও প্রয়োগ করতে পারেন, যেমন ভিডিও এবং আইফ্রেম।

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

এই নিয়মটি চালু থাকায়, ব্রাউজারগুলো স্ক্রিনে ঠিকমতো দেখানোর জন্য ছবিগুলোকে স্বয়ংক্রিয়ভাবে ছোট করে নেয়।

block-size ভ্যালু ' auto যোগ করার অর্থ হলো, ব্রাউজার আপনার ছবিগুলোর আকার পরিবর্তন করার সময় সেগুলোর অ্যাস্পেক্ট রেশিও অপরিবর্তিত রাখে।

কখনও কখনও, একটি ছবির ডাইমেনশন কন্টেন্ট ম্যানেজমেন্ট সিস্টেম (CMS) বা অন্য কোনো কন্টেন্ট ডেলিভারি সিস্টেম দ্বারা সেট করা হয়। যদি আপনার ডিজাইনের জন্য CMS-এর ডিফল্ট অ্যাস্পেক্ট রেশিও থেকে ভিন্ন কোনো অ্যাস্পেক্ট রেশিওর প্রয়োজন হয়, তাহলে আপনি আপনার সাইটের ডিজাইন অক্ষুণ্ণ রাখতে aspect-ratio প্রপার্টিটি ব্যবহার করতে পারেন:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

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

সংকুচিত ও প্রসারিত হওয়া রোধ করতে object-fit প্রপার্টি ব্যবহার করুন।

object-fit এর ` contain ভ্যালুটি ব্রাউজারকে ছবির অ্যাস্পেক্ট রেশিও বজায় রাখতে নির্দেশ দেয় এবং প্রয়োজনে ছবির চারপাশে ফাঁকা জায়গা রাখে।

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

` cover এর একটি object-fit মান ব্রাউজারকে ছবির আকৃতির অনুপাত বজায় রাখতে এবং প্রয়োজনে ছবিটি ক্রপ করতে নির্দেশ দেয়।

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

আপনি `object-position` প্রপার্টি ব্যবহার করে ইমেজ ক্রপের অবস্থান পরিবর্তন করতে পারেন। এটি ক্রপের ফোকাস সামঞ্জস্য করে, যার ফলে আপনি নিশ্চিত করতে পারেন যে ছবির সবচেয়ে গুরুত্বপূর্ণ অংশটি যেন দৃশ্যমান থাকে।

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

আপনার ছবিগুলো সরবরাহ করুন

এই CSS নিয়মগুলো ব্রাউজারকে বলে দেয় যে আপনি ছবিগুলো কীভাবে রেন্ডার করতে চান। ব্রাউজার কীভাবে সেই ছবিগুলো পরিচালনা করবে, সে সম্পর্কে আপনি আপনার HTML-এও ইঙ্গিত দিতে পারেন।

আকার নির্ধারণের জন্য পরামর্শ

আপনার ছবির মাপ জানা থাকলে, সবসময় width এবং height অ্যাট্রিবিউট অন্তর্ভুক্ত করুন। আপনার max-inline-size নিয়মের কারণে ছবিটি ভিন্ন আকারে রেন্ডার হলেও, ব্রাউজার তার প্রস্থ ও উচ্চতার অনুপাতটি জানে এবং সঠিক পরিমাণ জায়গা বরাদ্দ করতে পারে। এর ফলে ছবিটি লোড হওয়ার সময় আপনার অন্যান্য কন্টেন্ট এলোমেলো হয়ে যায় না।

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

লোড করার জন্য ইঙ্গিত

ছবিটি ভিউপোর্টের মধ্যে বা কাছাকাছি না আসা পর্যন্ত লোড হতে দেরি হবে কিনা, তা ব্রাউজারকে জানানোর জন্য loading অ্যাট্রিবিউটটি ব্যবহার করুন। স্ক্রিনের নিচের অংশের (below the fold) ছবিগুলোর জন্য lazy ভ্যালুটি ব্যবহার করুন। ব্যবহারকারী যথেষ্ট নিচে স্ক্রল করে ছবিটি দৃশ্যমান না করা পর্যন্ত ব্রাউজার lazy ছবিগুলো লোড করবে না। যদি ব্যবহারকারী কখনোই স্ক্রল না করে, তাহলে ছবিটিও কখনো লোড হবে না।

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

'above the fold'-এর হিরো ইমেজের জন্য loading ব্যবহার করবেন না। যদি আপনার সাইট স্বয়ংক্রিয়ভাবে loading="lazy" অ্যাট্রিবিউটটি প্রয়োগ করে, তাহলে ইমেজগুলোকে লেজি লোড হওয়া থেকে বিরত রাখতে আপনি সাধারণত loading ডিফল্ট ভ্যালু ' eager এ সেট করতে পারেন।

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

আনার অগ্রাধিকার

LCP ইমেজের মতো গুরুত্বপূর্ণ ইমেজগুলির জন্য, আপনি fetchpriority অ্যাট্রিবিউটটিকে high এ সেট করে Fetch Priority ব্যবহার করে লোডিংকে আরও অগ্রাধিকার দিতে পারেন।

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

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

তবে, যখন আপনি ব্রাউজারকে কোনো একটি রিসোর্স, যেমন একটি ছবি, ডাউনলোড করার ক্ষেত্রে অগ্রাধিকার দিতে বলেন, তখন ব্রাউজারকে অবশ্যই স্ক্রিপ্ট বা ফন্ট ফাইলের মতো অন্য কোনো রিসোর্সের অগ্রাধিকার কমাতে হয়। কোনো ছবির ক্ষেত্রে কেবল তখনই fetchpriority="high" সেট করুন, যখন তা সত্যিই অত্যাবশ্যক।

প্রিলোড করার জন্য ইঙ্গিত

যথাসম্ভব প্রাথমিক HTML ফাইলে সমস্ত ছবি অন্তর্ভুক্ত করে প্রি-লোডিং এড়িয়ে চলাই ভালো। তবে, কিছু ছবি অনুপলব্ধ হতে পারে, যেমন জাভাস্ক্রিপ্ট দ্বারা যুক্ত করা ছবি বা CSS ব্যাকগ্রাউন্ড ইমেজ ।

আপনি প্রিলোডিং ব্যবহার করে ব্রাউজারকে দিয়ে এই গুরুত্বপূর্ণ ছবিগুলো আগে থেকেই ফেচ করিয়ে নিতে পারেন। অত্যন্ত গুরুত্বপূর্ণ ছবিগুলোর জন্য, আপনি এই প্রিলোডিংয়ের সাথে fetchpriority অ্যাট্রিবিউটটি যুক্ত করতে পারেন:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

আবার, ব্রাউজারের অগ্রাধিকার নির্ধারণের নিয়মগুলোকে ঘন ঘন অগ্রাহ্য করা এড়াতে এই অ্যাট্রিবিউটগুলো পরিমিতভাবে ব্যবহার করুন। এগুলোর অতিরিক্ত ব্যবহার পারফরম্যান্সের অবনতি ঘটাতে পারে।

কিছু ব্রাউজার imagesrcset এবং imagesizes অ্যাট্রিবিউট ব্যবহার করে srcset-এর উপর ভিত্তি করে রেসপন্সিভ ইমেজ প্রি-লোড করা সমর্থন করে। উদাহরণস্বরূপ:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

href ফলব্যাক বাদ দিয়ে, আপনি নিশ্চিত করতে পারেন যে srcset সাপোর্ট নেই এমন ব্রাউজারগুলোতেও সঠিক ছবিটি প্রি-লোড হবে।

ব্রাউজারের নির্দিষ্ট কিছু ফরম্যাট সমর্থনের উপর ভিত্তি করে আপনি বিভিন্ন ফরম্যাটের ছবি আগে থেকে লোড করতে পারবেন না। এটি করার চেষ্টা করলে অতিরিক্ত ডাউনলোড হতে পারে, যা ব্যবহারকারীদের ডেটা নষ্ট করে।

srcset সহ রেসপন্সিভ ইমেজ

max-inline-size: 100% ডিক্লারেশনটির কারণে আপনার ছবিগুলো তাদের কন্টেইনারের বাইরে বেরিয়ে আসতে পারে না। তবে, যদি কোনো ব্যবহারকারীর স্ক্রিন ছোট এবং নেটওয়ার্ক ব্যান্ডউইথ কম থাকে, তাহলে বড় স্ক্রিনের ব্যবহারকারীদের মতো একই আকারের ছবি ডাউনলোড করতে বাধ্য করলে ডেটা অপচয় হয়।

এই সমস্যাটি সমাধান করতে, একই ছবির বিভিন্ন আকারের একাধিক সংস্করণ যোগ করুন এবং ব্রাউজারকে এই আকারগুলোর অস্তিত্ব ও কখন সেগুলো ব্যবহার করতে হবে তা জানানোর জন্য srcset অ্যাট্রিবিউট ব্যবহার করুন।

প্রস্থ বর্ণনাকারী

আপনি কমা দ্বারা পৃথক করা মানগুলির একটি তালিকা ব্যবহার করে একটি srcset নির্ধারণ করতে পারেন। প্রতিটি মান হলো একটি ছবির URL, যার পরে একটি স্পেস থাকে এবং তারপরে ছবিটির মেটাডেটা থাকে, যাকে ডেসক্রিপ্টর বলা হয়।

এই উদাহরণে, মেটাডেটা প্রতিটি ছবির প্রস্থকে w একক ব্যবহার করে বর্ণনা করে। এক w হলো এক পিক্সেলের প্রস্থ।

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

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

আকার

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

sizes অ্যাট্রিবিউটটি মিডিয়া কোয়েরি এবং ছবির প্রস্থের একটি কমা-দ্বারা-বিভক্ত তালিকা গ্রহণ করে।

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

এই উদাহরণে, আপনি ব্রাউজারকে বলছেন যে 66em এর বেশি প্রস্থের কোনো ভিউপোর্টে, ছবিটি যেন স্ক্রিনের এক-তৃতীয়াংশের বেশি চওড়া করে প্রদর্শন না করা হয় (যেমন, একটি তিন-কলামের লেআউটের ভেতরে)।

44em থেকে 66em পর্যন্ত ভিউপোর্ট প্রস্থের ক্ষেত্রে, ছবিটি স্ক্রিনের অর্ধেক প্রস্থে প্রদর্শন করুন (যেমনটি একটি দুই-কলাম লেআউটে করা হয়)।

44em এর চেয়ে সংকীর্ণ যেকোনো কিছুর জন্য, ছবিটি স্ক্রিনের সম্পূর্ণ প্রস্থে প্রদর্শন করুন।

এর মানে এই নয় যে সবচেয়ে বড় ছবিটিই সবচেয়ে চওড়া স্ক্রিনের জন্য ব্যবহৃত হবে। একটি চওড়া ব্রাউজার উইন্ডো, যা একাধিক কলামের বিন্যাস প্রদর্শন করতে পারে, সেখানে এমন একটি ছবি ব্যবহার করা হয় যা একটি কলামে আঁটে, যা হয়তো একটি সরু স্ক্রিনের এক-কলাম বিন্যাসের জন্য ব্যবহৃত ছবির চেয়ে ছোট হতে পারে।

পিক্সেল ঘনত্ব বর্ণনাকারী

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

src অ্যাট্রিবিউটে থাকা ইমেজের সাপেক্ষে পিক্সেল ঘনত্ব বর্ণনা করতে ডেনসিটি ডেসক্রিপ্টর ব্যবহার করুন। ডেনসিটি ডেসক্রিপ্টর হলো একটি সংখ্যা যার পরে x অক্ষরটি থাকে, যেমন 1x বা 2x ।

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

যদি small-image.png ফাইলের আকার ৩০০ বাই ২০০ পিক্সেল এবং medium-image.png আকার ৬০০ বাই ৪০০ পিক্সেল হয়, তাহলে srcset তালিকায় medium-image.png ফাইলের পরে 2x থাকতে পারে।

আপনাকে পূর্ণ সংখ্যা ব্যবহার করতে হবে না। যদি ছবিটির অন্য একটি সংস্করণের আকার ৪৫০ বাই ৩০০ পিক্সেল হয়, তবে আপনি এটিকে 1.5x দিয়ে বর্ণনা করতে পারেন।

উপস্থাপনার ছবি

HTML-এ ছবি হলো কন্টেন্ট। একারণেই স্ক্রিন রিডার এবং সার্চ ইঞ্জিনের জন্য ছবির বিবরণসহ alt অ্যাট্রিবিউটটি অন্তর্ভুক্ত করা হয়।

যদি আপনি কোনো অর্থবহ বিষয়বস্তু ছাড়া শুধু সজ্জার জন্য কোনো ছবি যুক্ত করেন, তাহলে আপনি একটি খালি alt অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

আপনাকে অবশ্যই alt অ্যাট্রিবিউটটি অন্তর্ভুক্ত করতে হবে, এমনকি যদি এটি খালিও থাকে। একটি খালি alt অ্যাট্রিবিউট স্ক্রিন রিডারকে জানায় যে ছবিটি উপস্থাপনামূলক। alt অ্যাট্রিবিউট না থাকলে সেই তথ্যটি পাওয়া যায় না।

আদর্শগতভাবে, উপস্থাপনামূলক বা আলংকারিক ছবি HTML-এর পরিবর্তে CSS দিয়ে অন্তর্ভুক্ত করা হয়। HTML হলো কাঠামোর জন্য, আর CSS হলো উপস্থাপনার জন্য।

পটভূমির ছবি

প্রেজেন্টেশনাল ইমেজ লোড করতে CSS-এ background-image প্রপার্টি ব্যবহার করুন।

element {
  background-image: url(flourish.png);
}

আপনি background-image এর জন্য image-set ফাংশনটি ব্যবহার করে একাধিক সম্ভাব্য ছবি নির্দিষ্ট করতে পারেন।

CSS-এর image-set ফাংশনটি HTML-এর srcset অ্যাট্রিবিউটের মতোই কাজ করে। এখানে প্রতিটি ছবির পিক্সেল ডেনসিটি বর্ণনাকারীসহ ছবিগুলোর একটি তালিকা প্রদান করতে হয়।

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

ব্রাউজারটি ডিভাইসের পিক্সেল ঘনত্বের জন্য সবচেয়ে উপযুক্ত ছবিটি নির্বাচন করে।

আপনার সাইটে ছবি যোগ করার সময় অনেকগুলো বিষয় বিবেচনা করতে হয়, যার মধ্যে রয়েছে:

• প্রতিটি ছবির জন্য সঠিক স্থান সংরক্ষণ করা।
• আপনার কতগুলো সাইজ লাগবে তা বের করা।
• ছবিটি বিষয়বস্তুমূলক নাকি আলংকারিক, তা নির্ধারণ করা।

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

আপনার ছবিগুলোর উপর আরও বেশি নিয়ন্ত্রণ দেওয়ার জন্য আপনার টুলকিটে আরও একটি HTML এলিমেন্ট রয়েছে: picture এলিমেন্ট ।

আপনার বোধগম্যতা যাচাই করুন

ছবি সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।