এইচটিএমএল 5 <picture>ট্যাগ আপনাকে পর্দার প্রস্থের উপর নির্ভর করে সঠিক চিত্র উত্সটি সমাধান করতে সহায়তা করবে
স্পষ্টতই গত 5 বছরে ব্রাউজারগুলির আচরণের খুব বেশি পরিবর্তন হয়নি এবং display: noneতাদের মধ্যে কোনও সম্পত্তি সেট করা থাকলেও অনেকে এখনও লুকানো চিত্রগুলি ডাউনলোড করবেন।
যদিও একটি মিডিয়া ক্যোয়ারীস কাজটি পুরোপুরি রয়েছে, এটি তখনই কার্যকর হতে পারে যখন চিত্রটি সিএসএসে একটি পটভূমি হিসাবে সেট করা হয়েছিল।
আমি যখন ভাবছিলাম যে সমস্যার একটি জেএস সমাধান আছে ( অলস বোঝা , চিত্রফিল ইত্যাদি), এটি উপস্থিত হয়েছিল যে একটি দুর্দান্ত খাঁটি এইচটিএমএল সমাধান রয়েছে যা এইচটিএমএল 5 এর বাক্স থেকে বেরিয়ে আসে।
এবং এটি <picture>ট্যাগ।
এমডিএন এটি কীভাবে বর্ণনা করে তা এখানে:
এইচটিএমএল <picture>উপাদান একাধিক নির্দিষ্ট করতে ব্যবহৃত একটি ধারক <source>একটি নির্দিষ্ট জন্য উপাদান <img>এটি অন্তর্ভুক্ত। ব্রাউজারটি পৃষ্ঠার বর্তমান বিন্যাস (চিত্রটির বাক্সগুলির মধ্যে যে সীমাবদ্ধতা উপস্থিত হবে) এবং যে ডিভাইসে এটি প্রদর্শিত হবে (যেমন একটি সাধারণ বা হাইডিপিআই ডিভাইস)
এবং এটি কীভাবে ব্যবহার করবেন তা এখানে:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
পিছনে যুক্তি
ব্রাউজারটি imgকেবলমাত্র মিডিয়া বিধি প্রয়োগ না করে ট্যাগটির উত্স লোড করবে । যখন <picture>উপাদানটি ব্রাউজার দ্বারা সমর্থিত নয়, এটি আবার imgট্যাগটি দেখায় ফ্যালব্যাক করবে ।
সাধারণত আপনি ক্ষুদ্রতম চিত্রটি উত্স হিসাবে উত্স হিসাবে রাখবেন <img>এবং এইভাবে বড় পর্দার জন্য ভারী চিত্রগুলি লোড করবেন না। বিপরীতে, যদি কোনও মিডিয়া বিধি প্রয়োগ হয় তবে এর উত্সটি <img>ডাউনলোড হবে না, পরিবর্তে এটি সংশ্লিষ্ট <source>ট্যাগের ইউআরএলের সামগ্রীগুলি ডাউনলোড করবে ।
কেবলমাত্র এখানেই সমস্যাটি হ'ল যদি উপাদানটি ব্রাউজার দ্বারা সমর্থিত না হয় তবে এটি কেবলমাত্র ছোট চিত্রটি লোড করবে। অন্যদিকে 2017 সালে আমাদের মোবাইলের প্রথম পদ্ধতির মধ্যে চিন্তা করা এবং কোড করা উচিত ।
এবং কেউ খুব বেরিয়ে আসার আগে, এখানে বর্তমান ব্রাউজার সমর্থন <picture>:
ডেস্কটপ ব্রাউজারগুলি
মোবাইল ব্রাউজারগুলি
ক্যান আই ইউজ এ আপনি ব্রাউজার সমর্থন সম্পর্কে আরও জানতে পারেন ।
ভাল জিনিস হ'ল এইচটিএমএল 5 প্লিজ এর বাক্যটি এটি ফ্যালব্যাক সহ ব্যবহার করা । এবং আমি ব্যক্তিগতভাবে তাদের পরামর্শ নেওয়ার ইচ্ছা করি।
ট্যাগ সম্পর্কে আপনি জানতে পারেন W3C এর স্পেসিফিকেশন । সেখানে একটি অস্বীকৃতি রয়েছে, যা আমি উল্লেখ করা গুরুত্বপূর্ণ বলে মনে করি:
pictureউপাদান অনুরূপ সুদর্শন থেকে কিছুটা ভিন্ন videoএবং audioউপাদান। যখন এগুলির মধ্যে সমস্ত উপাদান রয়েছে sourceতবে উত্স উপাদানটির srcবৈশিষ্ট্যের কোনও অর্থ নেই যখন উপাদানটি কোনও উপাদানের মধ্যে বাসা বেঁধে থাকে pictureএবং উত্স নির্বাচন অ্যালগরিদম আলাদা। পাশাপাশি, pictureউপাদান নিজেই কিছু প্রদর্শন করে না; এটি কেবলমাত্র এতে থাকা imgউপাদানটির জন্য একটি প্রসঙ্গ সরবরাহ করে যা এটি একাধিক URL থেকে চয়ন করতে সক্ষম করে choose
সুতরাং এটি যা বলে তা হ'ল এটি কেবল কোনও চিত্রকে লোড করার সময় এর সাথে কিছু প্রসঙ্গ সরবরাহের মাধ্যমে কর্মক্ষমতা উন্নত করতে সহায়তা করে।
এবং ছোট ডিভাইসে চিত্রটি আড়াল করতে আপনি এখনও কিছু সিএসএস যাদু ব্যবহার করতে পারেন:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
সুতরাং ব্রাউজারটি প্রকৃত চিত্র প্রদর্শন করবে না এবং কেবল 1x1পিক্সেল চিত্রটি ডাউনলোড করবে (যা আপনি যদি একাধিকবার ব্যবহার করেন তবে ক্যাশে করা যায়)। যদিও সচেতন হন, যদি <picture>ট্যাগটি ব্রাউজার দ্বারা সমর্থিত না হয়, এমনকি ডেস্কটপ স্ক্রিনেও প্রকৃত চিত্র প্রদর্শিত হবে না (যাতে আপনার অবশ্যই সেখানে পলিফিল ব্যাকআপ লাগবে)।
