ওয়েবে ছবিগুলির একটি সংক্ষিপ্ত ইতিহাস

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

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

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

একটি প্রতিক্রিয়াশীল বিন্যাসে ছবি

একটি নমনীয় বিন্যাস এবং CSS মিডিয়া প্রশ্নের ব্যবহারের পাশাপাশি, "নমনীয় ছবি এবং মিডিয়া" হল প্রতিক্রিয়াশীল ওয়েব ডিজাইনের তিনটি সংজ্ঞায়িত দিকগুলির মধ্যে একটি। একটি ইমেজকে নমনীয় করতে, ডেভেলপাররা max-width: 100% ইমেজে (বা সমস্ত ছবি, সাইট-ওয়াইড) ব্রাউজারের রেন্ডারিং ইঞ্জিনকে বলে যে কোনও ছবিকে তার প্যারেন্ট কন্টেইনারকে স্কেল করার মাধ্যমে কখনও উপচে পড়া রোধ করতে। . দৃশ্যত, এটি নিখুঁতভাবে কাজ করে- একটি রাস্টার চিত্রকে ডাউনস্কেল করা দৃশ্যত বিরামহীন। CSS-এর একটি বা দুই লাইনের সাথে, একটি স্কেল-ডাউন ইমেজ সবসময় এমন দেখাবে যেন আমরা একটি ইমেজ সোর্স নির্দিষ্ট করেছি যা সেই আকারে দেখানোর জন্য ছিল। যখন রেন্ডারিং ইঞ্জিনগুলিকে একটি লেআউটে চিত্রটি যে স্থান দখল করে তার জন্য প্রয়োজনীয়তার চেয়ে বেশি চিত্র ডেটা দেওয়া হয়, তখন তারা কীভাবে হ্রাস করা চিত্রটি রেন্ডার করতে হয় সে সম্পর্কে অবগত সিদ্ধান্ত নিতে সক্ষম হয় এবং কোনও ভিজ্যুয়াল আর্টিফ্যাক্ট বা অস্পষ্টতা প্রবর্তন না করেই তা করতে পারে।

আপনি সাধারণত একটি চিত্রকে আপস্কেল করতে চান না—অর্থাৎ, উৎস চিত্রের অন্তর্নিহিত আকারের চেয়ে বড় আকারে <img> রেন্ডার করুন। প্রদর্শিত চিত্রটি ঝাপসা এবং দানাদার দেখাবে।

img { max-width: 100% } ব্যবহার করার মানে হল যে একটি নমনীয় কন্টেইনারের আকার পরিবর্তন করার সাথে সাথে ছবিগুলিকে যথাযথভাবে কমিয়ে দেওয়া হবে৷ আরও কঠোর width: 100% , এটি এটিও নিশ্চিত করে যে চিত্রটি তার অন্তর্নিহিত আকারের বাইরে স্কেল করা হবে না। দীর্ঘ সময়ের জন্য, এটি ইমেজগুলির সাথে কাজ করার নিয়মগুলির জন্য ছিল: একটি বিন্যাস ব্যবহার করুন ব্রাউজাররা বোঝে, একটি সংবেদনশীল স্তরের কম্প্রেশন ব্যবহার করুন এবং কখনও চিত্রগুলিকে উপরের দিকে স্কেল করবেন না।

কিন্তু এই পদ্ধতিটি দৃশ্যত যতটা সহজ এবং কার্যকর ছিল, এটি একটি বিশাল কর্মক্ষমতা খরচে এসেছিল। যেহেতু <img> ছবির ডেটার জন্য শুধুমাত্র একটি একক উৎসকে সমর্থন করে, এই পদ্ধতির জন্য আমাদেরকে একটি অন্তর্নিহিত আকার সহ একটি চিত্র সম্পদ প্রদান করতে হবে যতটা বড় আকারে এটি প্রদর্শিত হতে পারে। ব্যবহারকারীর ভিউপোর্ট আকারের উপর নির্ভর করে 300px থেকে 2000px চওড়া হতে পারে এমন একটি লেআউটে একটি স্থান দখল করার জন্য একটি চিত্রের জন্য কমপক্ষে 2000px এর অন্তর্নিহিত প্রস্থ সহ একটি চিত্র উত্স প্রয়োজন৷ যে ব্যবহারকারী শুধুমাত্র একটি ছোট ভিউপোর্টের মাধ্যমে পৃষ্ঠাটি দেখেন, তার জন্য সবকিছুই প্রত্যাশিতভাবে দেখাবে—ছবিটি ঠিক স্কেল করবে। রেন্ডার করা পৃষ্ঠায়, একটি বৃহদায়তন কিন্তু স্কেল-ডাউন সোর্স ইমেজ উপযুক্ত আকারের থেকে আলাদা হবে না। যাইহোক, তারা এখনও একটি 2000px প্রশস্ত চিত্র স্থানান্তর এবং রেন্ডার করবে, কোন বাস্তব সুবিধা ছাড়াই বিপুল পরিমাণ ব্যান্ডউইথ এবং প্রক্রিয়াকরণ শক্তির মাধ্যমে জ্বলবে।

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

এখানে, বিকাশকারীরা আবার রেন্ডারিং ইঞ্জিনের ইমেজগুলিকে দৃশ্যমানভাবে ডাউনস্কেল করার ক্ষমতার উপর নির্ভর করতে সক্ষম হয়েছিল। ব্রাউজারটিকে src এ 800px চওড়া সোর্স ইমেজ প্রদান করে, তারপর CSS এর সাথে এটিকে 400px চওড়া প্রদর্শন করা উচিত বলে উল্লেখ করে, ফলাফলটি পিক্সেলের দ্বিগুণ ঘনত্বে রেন্ডার করা একটি চিত্র:

একটি একক উৎস চিত্র, আপনার লেআউট এবং উচ্চ-ঘনত্ব প্রদর্শনের সবচেয়ে বড় সম্ভাব্য স্থান অনুসারে কাটা, অবশ্যই দৃশ্যত সকল ব্যবহারকারীর জন্য কাজ করে। একটি ছোট, কম ঘনত্বের ডিসপ্লেতে রেন্ডার করা একটি বিশাল, উচ্চ রেজোলিউশন ইমেজ সোর্স দেখতে অন্য যেকোন ছোট, কম ঘনত্বের ইমেজের মতো হবে, কিন্তু অনেক ধীর বোধ করবে। ব্যবহারকারীকে সেই বিশাল, 4000px-ওয়াইড ইমেজ সোর্সের সমস্ত পারফরম্যান্স খরচ বহন করতে হবে, কোনো লাভ হবে না।

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