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

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

সৌভাগ্যবশত, আপনি CSS-এ এই ঘটনা বন্ধ করতে ব্যবস্থা নিতে পারেন।

আপনার ইমেজ সীমাবদ্ধ

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

ব্রাউজার সমর্থন

• 57
• 79
• 41
• 12.1

উৎস

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

দ্রষ্টব্য: আপনি চাইলে max-inline-size পরিবর্তে max-width ব্যবহার করতে পারেন, তবে মনে রাখবেন যৌক্তিক বৈশিষ্ট্যের পরিপ্রেক্ষিতে চিন্তা করার অভ্যাস করা ভাল।

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

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

সেই নিয়মের জায়গায়, ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে স্ক্রীনে ফিট করার জন্য চিত্রগুলিকে স্কেল করবে।

auto একটি block-size মান যোগ করার অর্থ হল চিত্রগুলির আকৃতি-অনুপাত স্থির থাকবে।

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

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

কিন্তু তারপরে ব্রাউজারটি আপনার পছন্দের অনুপাতের সাথে মানানসই করতে ছবিটিকে স্কোয়াশ বা প্রসারিত করতে পারে।

যে ঘটছে প্রতিরোধ করতে, object-fit বৈশিষ্ট্য ব্যবহার করুন.

ব্রাউজার সমর্থন

• 32
• 79
• 36
• 10

উৎস

contain একটি object-fit মান ব্রাউজারকে ইমেজের আকৃতির অনুপাত সংরক্ষণ করতে বলে, এমনকি যদি এর অর্থ উপরে এবং নীচে খালি জায়গা রাখা হয়।

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;
}

`অবজেক্ট-ফিট` প্রয়োগের জন্য দুটি ভিন্ন মান সহ একই চিত্র। প্রথমটির একটি `অবজেক্ট-ফিট` মান আছে `ধারণ`। দ্বিতীয়টিতে `কভার` এর একটি `অবজেক্ট-ফিট` মান আছে।

যদি উপরের এবং নীচে সমানভাবে ক্রপ করা একটি সমস্যা হয়, তাহলে ফসলের ফোকাস সামঞ্জস্য করতে অবজেক্ট-পজিশন CSS প্রপার্টি ব্যবহার করুন।

ব্রাউজার সমর্থন

• 32
• 79
• 36
• 10

উৎস

আপনি নিশ্চিত করতে পারেন যে সবচেয়ে গুরুত্বপূর্ণ ছবির বিষয়বস্তু এখনও দৃশ্যমান।

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: 100% নিয়ম), ব্রাউজার এখনও প্রস্থ থেকে উচ্চতা অনুপাত জানে এবং সঠিক পরিমাণ স্থান আলাদা করতে পারে। ইমেজ লোড হওয়ার সময় এটি আপনার অন্যান্য সামগ্রীর চারপাশে লাফানো বন্ধ করবে।

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

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

ইঙ্গিত লোড হচ্ছে

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

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

ভাঁজের উপরে একটি হিরো ইমেজের জন্য, loading ব্যবহার করা উচিত নয়। যদি আপনার সাইট স্বয়ংক্রিয়ভাবে loading="lazy" অ্যাট্রিবিউট প্রয়োগ করে, তাহলে আপনি প্রায়শই eager অ্যাট্রিবিউট সেট করতে পারেন (যা ডিফল্ট) যাতে এটি প্রয়োগ করা না হয়:

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

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

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

<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 (যা নীচে আলোচনা করা হয়েছে) এর উপর ভিত্তি করে প্রতিক্রিয়াশীল ছবিগুলিকে প্রিলোড করা আরও উন্নত এবং কিছু ব্রাউজারে সমর্থিত , কিন্তু সব নয়:

href ফলব্যাক বাদ দিয়ে আপনি নিশ্চিত করতে পারেন যে ব্রাউজারগুলি এটি সমর্থন করে না তারা ভুল চিত্রটি প্রিলোড করে না৷

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

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

ইমেজ ডিকোডিং

এছাড়াও একটি decoding বৈশিষ্ট্য রয়েছে যা আপনি img উপাদানগুলিতে যোগ করতে পারেন। আপনি ব্রাউজারকে বলতে পারেন যে ছবিটি অ্যাসিঙ্ক্রোনাসভাবে ডিকোড করা যেতে পারে। ব্রাউজার তারপর অন্যান্য বিষয়বস্তু প্রক্রিয়াকরণ অগ্রাধিকার দিতে পারে.

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

আপনি sync মানটি ব্যবহার করতে পারেন যদি চিত্রটি নিজেই অগ্রাধিকার দেওয়ার জন্য সামগ্রীর সবচেয়ে গুরুত্বপূর্ণ অংশ হয়।

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

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

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

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

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

সেই max-inline-size: 100% ঘোষণা, আপনার ছবিগুলি কখনই তাদের পাত্র থেকে বেরিয়ে আসবে না। কিন্তু একটি বড় ইমেজ যা ফিট করার জন্য সঙ্কুচিত হয় তা দেখতে সূক্ষ্ম মনে হলেও, এটি ভাল লাগবে না। যদি কেউ একটি কম ব্যান্ডউইথ নেটওয়ার্কে একটি ছোট পর্দার ডিভাইস ব্যবহার করে, তাহলে তারা অপ্রয়োজনীয়ভাবে বড় ছবি ডাউনলোড করবে।

আপনি যদি বিভিন্ন আকারে একই চিত্রের একাধিক সংস্করণ তৈরি করেন, আপনি 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 অ্যাট্রিবিউটকে প্রতিস্থাপন করে না। পরিবর্তে srcset অ্যাট্রিবিউট src অ্যাট্রিবিউটের পরিপূরক। আপনার এখনও একটি বৈধ src অ্যাট্রিবিউট থাকতে হবে, কিন্তু এখন ব্রাউজারটি srcset অ্যাট্রিবিউটে তালিকাভুক্ত বিকল্পগুলির একটি দিয়ে তার মান প্রতিস্থাপন করতে পারে।

প্রয়োজন না হলে ব্রাউজার বড় ছবি ডাউনলোড করবে না। যে ব্যান্ডউইথ সংরক্ষণ করে.

মাপ

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

sizes বৈশিষ্ট্য মিডিয়া ক্যোয়ারী এবং ছবির প্রস্থের একটি কমা দ্বারা পৃথক করা তালিকা নেয়।

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

<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 আকারে 300 বাই 200 পিক্সেল এবং medium-image.png আকারে 600 বাই 400 পিক্সেল হয়, তাহলে srcset তালিকায় medium-image.png এর পরে 2x থাকতে পারে।

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

দ্রষ্টব্য: আপনি প্রস্থ বর্ণনাকারী বা ঘনত্ব বর্ণনাকারী উভয়ই ব্যবহার করতে পারেন, তবে উভয়ই একসাথে নয়।

উপস্থাপনামূলক ছবি

এইচটিএমএল এর ছবি হল বিষয়বস্তু। এই কারণেই আপনি সর্বদা স্ক্রিন রিডার এবং সার্চ ইঞ্জিনের জন্য চিত্রের বর্ণনা সহ একটি alt বৈশিষ্ট্য প্রদান করেন।

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

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

আপনি এখনও alt বৈশিষ্ট্য অন্তর্ভুক্ত করতে হবে. একটি অনুপস্থিত alt বৈশিষ্ট্য একটি খালি alt বৈশিষ্ট্যের মতো নয়৷ একটি খালি alt অ্যাট্রিবিউট স্ক্রিন রিডারকে বোঝায় যে এই ছবিটি উপস্থাপনামূলক৷

আদর্শভাবে, আপনার উপস্থাপনামূলক বা আলংকারিক চিত্রগুলি আপনার HTML এ থাকা উচিত নয়। 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 উপাদান ৷

আপনার উপলব্ধি পরীক্ষা করুন

ইমেজ আপনার জ্ঞান পরীক্ষা

চিত্রগুলি ভিউপোর্টের মধ্যে ফিট করার জন্য শৈলীগুলি অবশ্যই যুক্ত করতে হবে৷

সত্য

কন্টেনমেন্ট ছাড়া ছবি তাদের স্বাভাবিক আকার হিসাবে বড় হবে.

মিথ্যা

শৈলী প্রয়োজন হয়.

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

object-fit

contain এবং cover মতো কীওয়ার্ডগুলির সাথে চিত্রটি কীভাবে ফিট করে তা নির্দিষ্ট করুন।

image-fit

এই সম্পত্তি বিদ্যমান নেই, আমি এটা তৈরি.

fit-image

এই সম্পত্তি বিদ্যমান নেই, আমি এটা তৈরি.

aspect-ratio

এটি একটি অপ্রাকৃতিক চিত্র অনুপাতের কারণ বা সমাধান করতে পারে।

আপনার চিত্রগুলিতে height এবং width স্থাপন করা CSSকে এটিকে ভিন্নভাবে স্টাইল করতে সক্ষম হতে বাধা দেয়।

সত্য

এগুলিকে নিয়মের চেয়ে ইঙ্গিতের মতো মনে করুন।

মিথ্যা

ট্যাগে উচ্চতা এবং প্রস্থ ইনলাইন থাকলেও CSS-এ চিত্রের আকার দেওয়ার জন্য প্রচুর পরিমাণে গতিশীল বিকল্প রয়েছে।

srcset অ্যাট্রিবিউট src অ্যাট্রিবিউটকে _______ করে না, এটি _______ করে।

পরিপূরক, প্রতিস্থাপন

srcset অবশ্যই src বৈশিষ্ট্য প্রতিস্থাপন করে না।

প্রতিস্থাপন, পরিপূরক

এটি সক্ষম হলে ব্রাউজারটিকে বেছে নেওয়ার জন্য অতিরিক্ত বিকল্প সরবরাহ করে৷

একটি ছবিতে অনুপস্থিত alt একটি খালি alt এর মতই।

সত্য

একটি খালি alt অ্যাট্রিবিউট স্ক্রিন রিডারকে বোঝায় যে এই ছবিটি উপস্থাপনামূলক৷

মিথ্যা

অনুপস্থিত alt সংকেত একটি স্ক্রীন রিডারকে কিছুই দেয় না।