ছবি

আলংকারিক ছবি, যেমন বোতামে পটভূমি গ্রেডিয়েন্ট বা বিষয়বস্তুর বিভাগ বা পুরো পৃষ্ঠার পটভূমির ছবি, উপস্থাপনামূলক এবং CSS-এর সাথে প্রয়োগ করা উচিত। যখন একটি চিত্র একটি নথিতে প্রসঙ্গ যোগ করে, তখন এটি বিষয়বস্তু এবং HTML এর সাথে এম্বেড করা উচিত।

ইমেজ অন্তর্ভুক্ত করার প্রধান পদ্ধতি হল <img> ট্যাগ যার src অ্যাট্রিবিউট একটি ইমেজ রিসোর্স উল্লেখ করে এবং alt অ্যাট্রিবিউট ইমেজ বর্ণনা করে।

<img src="images/eve.png" alt="Eve">

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

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

এটি <picture> এলিমেন্টের সাথেও করা যেতে পারে, সাথে <source> চিলড্রেন, যা একটি ডিফল্ট সোর্স হিসেবে <img> নেয়।

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

এই অন্তর্নির্মিত HTML প্রতিক্রিয়াশীল চিত্র পদ্ধতিগুলি ছাড়াও, HTML বিভিন্ন বৈশিষ্ট্যের মাধ্যমে চিত্র রেন্ডারিং কর্মক্ষমতা উন্নত করতে সক্ষম করে। <img> ট্যাগ, এবং সেইজন্য গ্রাফিকাল সাবমিট বোতামগুলি <input type="image"> , কন্টেন্ট লেআউট শিফট কমাতে ছবির আকৃতির অনুপাত সেট করতে height এবং width বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করতে পারে। lazy বৈশিষ্ট্য অলস লোডিং সক্ষম করে।

এইচটিএমএল সরাসরি <svg> ব্যবহার করে SVG ছবি অন্তর্ভুক্ত করাকে সমর্থন করে, যদিও .svg এক্সটেনশন (বা ডেটা-uri হিসাবে) সহ SVG ছবিগুলি <img> উপাদান ব্যবহার করে এম্বেড করা যেতে পারে।

ন্যূনতম, প্রতিটি ফোরগ্রাউন্ড ছবিতে src এবং alt বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করা উচিত।

src ফাইল হল এমবেডেড ইমেজের পাথ এবং ফাইলের নাম। src বৈশিষ্ট্যটি চিত্রটির URL প্রদান করতে ব্যবহৃত হয়। ব্রাউজার তারপর সম্পদ আনয়ন করে এবং পৃষ্ঠায় রেন্ডার করে। এই বৈশিষ্ট্যটি <img> দ্বারা প্রয়োজন। এটি ছাড়া, রেন্ডার করার কিছু নেই।

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

<img src="path/filename" alt="descriptive text" />

যদি ছবিটি SVG ফাইলের হয়, তাহলে role="img" অন্তর্ভুক্ত করুন, যা ভয়েসওভার বাগগুলির কারণে প্রয়োজনীয়।

<img src="switch.svg" alt="light switch" role="img" />

কার্যকর alt ইমেজ বর্ণনা লিখুন

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

কার্যকর বিকল্প পাঠ্য লিখতে, কল্পনা করুন যে আপনি পুরো পৃষ্ঠাটি এমন একজন ব্যক্তির কাছে পড়ছেন যিনি এটি দেখতে পাচ্ছেন না। শব্দার্থিক <img> উপাদান ব্যবহার করে, স্ক্রিন রিডার ব্যবহারকারী এবং বটদের জানানো হয় যে উপাদানটি একটি চিত্র। alt এ "এটি একটি ছবি/স্ক্রিনশট/ফটো" অন্তর্ভুক্ত করা অপ্রয়োজনীয়। ব্যবহারকারীর জানার দরকার নেই যে সেখানে একটি চিত্র রয়েছে, তবে তাদের জানা দরকার যে চিত্রটি কী তথ্য প্রকাশ করে।

সাধারণত, আপনি বলবেন না, "এটি একটি লাল টুপি পরা কুকুরের একটি দানাদার ছবি।" বরং, বাকি ডকুমেন্টের প্রেক্ষাপটের সাথে ইমেজটি কী বোঝাচ্ছে তা আপনি রিলে করবেন। আশেপাশের পাঠ্যের প্রসঙ্গ এবং বিষয়বস্তুর উপর নির্ভর করে আপনি কী পরিবর্তন করেন।

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

যদি ফটোটি পশুর আশ্রয়ের ওয়েবসাইটে ফ্লফির দত্তক পৃষ্ঠার অংশ হয়, তাহলে লক্ষ্য দর্শকরা কুকুরের সম্ভাব্য অভিভাবক। পাঠ্যটি চিত্রটিতে দেওয়া তথ্যের বর্ণনা করা উচিত যা একজন গ্রহণকারীর সাথে প্রাসঙ্গিক এবং যা পার্শ্ববর্তী পাঠ্যে অনুলিপি করা হয় না। একটি দীর্ঘ বর্ণনা, যেমন alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" উপযুক্ত। একটি দত্তক পৃষ্ঠার পাঠ্য সাধারণত দত্তকযোগ্য পোষা প্রাণীর প্রজাতি, শাবক, বয়স এবং লিঙ্গ অন্তর্ভুক্ত করে, তাই এটিকে Alt টেক্সটে পুনরাবৃত্তি করার প্রয়োজন নেই৷ কিন্তু কুকুরের লিখিত জীবনীতে সম্ভবত চুলের দৈর্ঘ্য, রঙ বা খেলনা পছন্দ অন্তর্ভুক্ত করা হয় না।

গুরুত্বপূর্ণভাবে, আমরা ছবিটি সম্পূর্ণরূপে বর্ণনা করিনি। সম্ভাব্য কুকুরের মালিকের জানার দরকার নেই যে কুকুরটি বাড়ির ভিতরে বা বাইরে, বা এটির একটি লাল কলার এবং একটি নীল পাঁজর রয়েছে।

আইকনোগ্রাফির জন্য ছবি ব্যবহার করার সময়, যেমন alt অ্যাট্রিবিউট অ্যাক্সেসযোগ্য নাম প্রদান করে, আইকনের অর্থ প্রকাশ করুন, ছবির বর্ণনা নয়। উদাহরণস্বরূপ, ম্যাগনিফাইং গ্লাস আইকনের Alt অ্যাট্রিবিউট হল search । যে আইকনটিকে বাড়ির মতো দেখায় সেটিকে অল্ট টেক্সট হিসেবে home আছে৷ 5 ইঞ্চি ফ্লপি ডিস্ক আইকনের বর্ণনা save হয়। যদি ফ্লফির দুটি আইকন সর্বোত্তম অনুশীলন এবং অ্যান্টি-প্যাটার্ন নির্দেশ করতে ব্যবহৃত হয়, তাহলে সবুজ বেরেটের স্মাইলিং কুকুরের alt="good" সেট থাকতে পারে, যখন লাল বেরেটের snarling কুকুরটি alt="bad" পড়তে পারে। এটি বলেছে, শুধুমাত্র স্ট্যান্ডার্ড আইকনোগ্রাফি ব্যবহার করুন, এবং আপনি যদি ভাল এবং খারাপ ফ্লফির মতো অ-মানক আইকন ব্যবহার করেন তবে একটি কিংবদন্তি অন্তর্ভুক্ত করুন নিশ্চিত করুন যে আইকনগুলি আপনার UI উপাদানগুলির অর্থ বোঝার একমাত্র উপায় নয়৷

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

প্রসঙ্গ থেকে ব্যবহারকারী ইতিমধ্যেই জানেন এমন তথ্য বাদ দিন এবং অন্যথায় বিষয়বস্তুতে সে সম্পর্কে অবহিত হন। উদাহরণস্বরূপ, আপনি যদি ব্রাউজার সেটিংস পরিবর্তন করার বিষয়ে একটি টিউটোরিয়াল পৃষ্ঠায় থাকেন এবং পৃষ্ঠাটি ব্রাউজার ক্রোমে আইকনগুলিতে ক্লিক করার বিষয়ে হয়, তাহলে স্ক্রীন ক্যাপচারে পৃষ্ঠাটির URL গুরুত্বপূর্ণ নয়৷ হাতে থাকা বিষয়ের মধ্যে alt সীমাবদ্ধ করুন: সেটিংস কীভাবে পরিবর্তন করবেন।

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

যদি স্ক্রিন ক্যাপচার দেখায় যে কিভাবে chrome://version/ গিয়ে ব্রাউজার সংস্করণ নম্বর খুঁজে বের করতে হয়, তাহলে নির্দেশাবলী হিসাবে পৃষ্ঠার বিষয়বস্তুতে URLটি অন্তর্ভুক্ত করুন এবং alt অ্যাট্রিবিউট হিসাবে একটি খালি স্ট্রিং প্রদান করুন কারণ চিত্রটি আশেপাশের পাঠ্যে নেই এমন কোনও তথ্য প্রদান করে না৷

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

<img src="svg/magazine.svg" alt="" role="none" />

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

ম্যাগাজিনটি, সম্পূর্ণরূপে আলংকারিক হওয়ায়, একটি খালি alt বৈশিষ্ট্য রয়েছে এবং চিত্রটি একটি বিশুদ্ধভাবে উপস্থাপনামূলক SVG হিসাবে none role নেই ৷ অর্থপূর্ণ হলে, SVG ছবিতে role="img" অন্তর্ভুক্ত করা উচিত।

<img src="svg/magazine.svg" alt="" role="none" />

পৃষ্ঠার নীচে তিনটি পর্যালোচনা রয়েছে, প্রতিটি পোস্টারের একটি চিত্র সহ। সাধারণত, alt টেক্সট হল ছবি তোলা ব্যক্তির নাম।

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

পরিবর্তে, যেহেতু এটি একটি কৌতুক পৃষ্ঠা, তাই কম দৃষ্টিভঙ্গি ব্যবহারকারীদের কাছে যা স্পষ্ট নয় তা আপনার জানানো উচিত যাতে তারা হাস্যরস মিস না করে। আমরা অক্ষরের নাম ব্যবহার না করে আসল মেশিন ফাংশনটিকে alt হিসাবে ব্যবহার করি:

<img src="images/blender.svg" alt="blender" role="img" />

প্রশিক্ষকদের ফটোগুলি কেবল অবতার নয়: এগুলি জীবনীমূলক ছবি এবং তাই আরও বিশদ বিবরণ পান।

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

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

কারণ এটি একটি কৌতুক সাইট, এর পরিবর্তে কৌতুকের প্রসঙ্গে প্রাসঙ্গিক তথ্য প্রদান করুন:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

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

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

src এবং alt বৈশিষ্ট্যগুলি এমবেড করা চিত্রগুলির জন্য সর্বনিম্ন প্রয়োজনীয়তা। আমাদের আলোচনা করা দরকার আরও কয়েকটি বৈশিষ্ট্য রয়েছে।

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

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

<img> srcset বৈশিষ্ট্য

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

প্রতি <img> উপাদানের জন্য একটি একক srcset বৈশিষ্ট্য থাকতে পারে, কিন্তু সেই srcset একাধিক ছবির সাথে লিঙ্ক করতে পারে। srcset অ্যাট্রিবিউট কমা-বিভক্ত মানগুলির একটি তালিকা গ্রহণ করে, প্রতিটিতে সম্পদের URL থাকে এবং তারপরে সেই চিত্র বিকল্পের জন্য বর্ণনাকারী দ্বারা অনুসরণ করে একটি স্থান থাকে। যদি একটি প্রস্থ বর্ণনাকারী ব্যবহার করা হয়, তাহলে আপনাকে অবশ্যই একটি মিডিয়া ক্যোয়ারী বা সোর্স সাইজের সাথে sizes অ্যাট্রিবিউট অন্তর্ভুক্ত করতে হবে srcset srcset এবং বর্ণনামূলক সিনট্যাক্স srcset প্রতিক্রিয়াশীল চিত্রগুলি কভার করে শিখুন বিভাগগুলি পড়ার যোগ্য।

একটি মিল থাকলে srcset চিত্রটি src চিত্রের চেয়ে অগ্রাধিকার নেয়।

<picture> এবং <source>

একাধিক সম্পদ প্রদান এবং ব্রাউজারকে সবচেয়ে উপযুক্ত সম্পদ রেন্ডার করার অনুমতি দেওয়ার আরেকটি পদ্ধতি হল <picture> উপাদান। <picture> এলিমেন্ট হল একাধিক ইমেজ অপশনের জন্য একটি ধারক উপাদান যা সীমাহীন সংখ্যক <source> উপাদান এবং একটি প্রয়োজনীয় <img> উপাদানে তালিকাভুক্ত।

<source> বৈশিষ্ট্যগুলির মধ্যে srcset , sizes , media , width এবং height অন্তর্ভুক্ত রয়েছে। srcset অ্যাট্রিবিউটটি img , source এবং link জন্য সাধারণ, কিন্তু সাধারণত সোর্সে কিছুটা ভিন্নভাবে প্রয়োগ করা হয় কারণ মিডিয়া কোয়েরিগুলি পরিবর্তে <srcset> -এর মিডিয়া অ্যাট্রিবিউটে তালিকাভুক্ত করা যেতে পারে। <source> type অ্যাট্রিবিউটে সংজ্ঞায়িত ইমেজ ফরম্যাটগুলিকেও সমর্থন করে।

ব্রাউজার প্রতিটি শিশুর <source> উপাদান বিবেচনা করে এবং তাদের মধ্যে সেরা মিল বেছে নেয়। যদি কোনো মিল না পাওয়া যায়, <img> উপাদানের src বৈশিষ্ট্যের URL নির্বাচন করা হয়। অ্যাক্সেসযোগ্য নামটি নেস্টেড <img> এর alt বৈশিষ্ট্য থেকে এসেছে। <picture> উপাদান এবং প্রেসক্রিপটিভ সিনট্যাক্সগুলিকে কভার করে শিখুন বিভাগগুলিও পড়ার যোগ্য।

অতিরিক্ত কর্মক্ষমতা বৈশিষ্ট্য

আপনার সাইটের কর্মক্ষমতা উন্নত করতে পারে এমন অনেকগুলি অতিরিক্ত চিত্র বৈশিষ্ট্য রয়েছে৷

অলস লোড হচ্ছে

loading অ্যাট্রিবিউট JS-সক্ষম ব্রাউজারকে ইমেজ লোড করতে বলে। ডিফল্ট eager মান মানে হল চিত্রটি দৃশ্যমান ভিউপোর্টের বাইরে থাকলেও HTML পার্স করার সাথে সাথেই ছবিটি লোড হয়ে যায়। loading="lazy" সেট করে ছবি লোডিং পিছিয়ে দেওয়া হয় যতক্ষণ না এটি ভিউপোর্টে আসার সম্ভাবনা থাকে। "সম্ভবত" ব্রাউজার দ্বারা সংজ্ঞায়িত করা হয় ভিউপোর্ট থেকে ছবিটির দূরত্বের উপর ভিত্তি করে। ব্যবহারকারী স্ক্রোল করার সাথে সাথে এটি আপডেট করা হয়। অলস লোডিং ব্যান্ডউইথ এবং CPU সংরক্ষণ করতে সাহায্য করে, বেশিরভাগ ব্যবহারকারীর কর্মক্ষমতা উন্নত করে। জাভাস্ক্রিপ্ট অক্ষম করা থাকলে, নিরাপত্তার কারণে, সমস্ত ছবি ডিফল্ট হতে eager ।

<img src="switch.svg" alt="light switch" loading="lazy" />

আকৃতির অনুপাত

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

<img> উপাদান সর্বদা এককবিহীন height এবং width বৈশিষ্ট্য সমর্থন করে। এই বৈশিষ্ট্যগুলি CSS-এর পক্ষে ব্যবহারের বাইরে পড়ে গেছে। CSS চিত্রের মাত্রা নির্ধারণ করতে পারে, প্রায়শই একটি একক মাত্রা নির্ধারণ করে যেমন max-width: 100%; আকৃতির অনুপাত সংরক্ষিত আছে তা নিশ্চিত করতে।

যেহেতু CSS সাধারণত <head> এ অন্তর্ভুক্ত থাকে, তাই কোনো <img> সম্মুখীন হওয়ার আগে এটি পার্স করা হয়। কিন্তু স্পষ্টভাবে height বা আকৃতির অনুপাত তালিকাভুক্ত না করে, সংরক্ষিত স্থান হল alt টেক্সটের উচ্চতা (বা প্রস্থ)।

যখন বিকাশকারীরা শুধুমাত্র একটি প্রস্থ ঘোষণা করে, তখন চিত্রগুলির প্রাপ্তি এবং রেন্ডারিং ক্রমবর্ধমান বিন্যাস পরিবর্তনের দিকে নিয়ে যায় যা ওয়েব অত্যাবশ্যকগুলির ক্ষতি করে৷ এই সমস্যাটি সমাধান করতে, ব্রাউজারগুলি ইমেজ অ্যাসপেক্ট রেশিও সমর্থন করে। <img> এ height এবং width বৈশিষ্ট্যগুলি সহ সাইজিং ইঙ্গিত হিসাবে কাজ করে, ব্রাউজারকে দৃষ্টিভঙ্গি অনুপাত সম্পর্কে অবহিত করে, চূড়ান্ত চিত্র রেন্ডারিংয়ের জন্য সংরক্ষিত স্থানের সঠিক পরিমাণ সক্ষম করে। যখন ব্রাউজারটি একটি একক মাত্রার সম্মুখীন হয়, যেমন আমাদের 50% উদাহরণ, এটি CSS মাত্রার সাথে এবং অন্য মাত্রার সাথে প্রস্থ-থেকে-উচ্চতার অনুপাত বজায় রাখার জন্য চিত্রের জন্য স্থান সংরক্ষণ করে।

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

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

অন্যান্য ইমেজ বৈশিষ্ট্য

<img> উপাদানটি crossorigin , decoding , referrerpolicy , এবং, ব্লিঙ্ক-ভিত্তিক ব্রাউজারে, fetchpriority বৈশিষ্ট্যগুলিকে সমর্থন করে৷ খুব কমই ব্যবহার করা হয়, যদি ছবিটি সার্ভার-সাইড মানচিত্রের অংশ হয়, তাহলে ismap বুলিয়ান অ্যাট্রিবিউট অন্তর্ভুক্ত করুন এবং ডিভাইসগুলি নির্দেশ না করে ব্যবহারকারীদের জন্য একটি লিঙ্কে <img> নেস্ট করুন।

<input type="image" name="imageSubmitName"> -এ ismap অ্যাট্রিবিউট প্রয়োজনীয় নয়, এমনকি সমর্থিতও নয় কারণ ক্লিক অবস্থানের x এবং y স্থানাঙ্কগুলি ফর্ম জমা দেওয়ার সময় পাঠানো হয়, ইনপুট নামের সাথে মান যুক্ত করে, যদি থাকে। উদাহরণস্বরূপ, &imageSubmitName.x=169&imageSubmitName.y=66 মতো কিছু ফর্মের সাথে জমা দেওয়া হয় যখন ব্যবহারকারী ছবিটিতে ক্লিক করে, জমা দেয়। যদি চিত্রটির একটি name বৈশিষ্ট্য না থাকে, x এবং y পাঠানো হয়: &x=169&y=66 ।

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

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