ClearByte.
বাংলা
ওয়েব ও উন্নয়ন / CLEARBYTE

Responsive image: srcset, sizes ও device pixel ratio বুঝুন

srcset উপলব্ধ image files-এর তালিকা। width descriptor থাকলে sizes প্রত্যাশিত প্রদর্শন-প্রস্থ CSS pixels-এ জানায়। browser এটিকে DPR ও নিজের নীতির সঙ্গে মিলিয়ে ফাইল বেছে নেয়; আসল layout এখনও CSS নিয়ন্ত্রণ করে।

এই নির্দেশিকায়

একটি ছবি দেখতে ঠিক হলেও layout-এর প্রয়োজনের চেয়ে বেশি pixels নামাতে পারে। আবার ছোট ফাইল ঘন screen-এ বড় করলে অস্পষ্ট হয়। responsive markup তৈরি করা ফাইলকে ছবির আসল জায়গার সঙ্গে মেলায়; দুই দিকেই একই layout-এর বর্ণনা দরকার।

একটি বাস্তব component ও কয়েকটি দরকারি মাপ দিয়ে শুরু করুন। উদাহরণের content column সর্বোচ্চ 800 CSS pixels এবং সরু screen-এ বাইরের gutter 16 pixels । সব candidate-এ বিষয়বস্তু ও 4:3 অনুপাত একই।

Source pixels, CSS pixels ও DPR আলাদা রাখুন

800-pixel ফাইল 400 CSS-pixel slot-এ দেখানো যায়। DPR 2 হলে slot-এর প্রস্থ প্রায় 800 device pixels । এটি resolution পরিকল্পনার সম্পর্ক; browser-কে বাধ্য করার নিয়ম নয়, তার resource নির্বাচনের স্বাধীনতা থাকে।

প্রথমে slot বের করুন:800 ও viewport width থেকে 32 বাদ দেওয়ার মধ্যে ছোটটি। slot-কে DPR দিয়ে গুণ করে target source width পান। ছবিটি সরু column-এ থাকলে পুরো viewport গুণ করা ভুল; component-এর স্থানটাই প্রয়োজন নির্ধারণ করে।

800-pixel content column-এর প্রস্থ পরিকল্পনা
Viewport-এর প্রস্থCSS pixels-এ প্রদর্শন স্থানDPRলক্ষ্য source প্রস্থ
3923601360 pixels প্রস্থ
3923602720 pixels প্রস্থ
10248001800 pixels প্রস্থ
102480021600 pixels প্রস্থ

Layout বদলালে width descriptor ব্যবহার করুন

w descriptor ফাইলের আসল pixel width, breakpoint নয়। তার মান সত্যিকারের resource-এর সঙ্গে মিলতে হবে। sizes বর্তমান layout-এ সম্ভাব্য প্রস্থ জানায়। নিচে 832 CSS pixels বা বেশি viewport-এ 800-pixel slot, সরু হলে দুই gutter বাদ দিয়ে প্রস্থ নেওয়া হয়েছে।

সংশ্লিষ্ট CSS-ও উদাহরণের অংশ। পরে component অর্ধেক grid-এ গেলে sizes বদলান। পুরনো full-width মান browser-কে অপ্রয়োজনীয় বড় resource বাছতে বলতে পারে। সঠিক attribute মানে layout-এর সঠিক বর্ণনা, জনপ্রিয় screen widths-এর তালিকা নয়।

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

সম্ভাব্য নির্বাচন হিসাব করে আসলটি দেখুন

392-pixel viewport ও DPR 2-এ slot 360, target 720 source pixels । দেওয়া তালিকায় 800w যুক্তিসঙ্গত প্রত্যাশা। wide screen-এ DPR 2 হলে target 1600 । হিসাব নির্বাচন কেন হতে পারে বোঝায়, browser ঠিক সেই candidate নেবেই এমন আদেশ নয়।

browser অন্য বিষয়ও বিবেচনা করতে পারে, window ছোট হলেও আগে নামানো বড় ছবি রাখতে পারে। পরিষ্কার পরীক্ষায় device settings বেছে fresh page context বা reload করুন, তারপর developer tools-এ নির্বাচিত URL ও transferred bytes দেখুন। warm page বারবার resize করলে ভুল ধারণা হতে পারে।

সত্যিকারের 400, 800 ও 1600-pixel files তৈরি করুন। গুণমান ও প্রতিটি URL-এ image response যাচাই করুন। 1600-pixel একই ফাইলের তিনটি নাম দিয়ে আলাদা w লেখা responsive resolution তৈরি করে না।

  • Element-এর rendered width মাপুন; viewport-এর সমান ধরে নেবেন না।
  • currentSrc URL-এর সঙ্গে Network panel-এর image response মেলান।
  • Dimensions, response type, cache state ও transferred bytes দেখুন।
  • সরু ও প্রশস্ত viewport-এ DPR 1 এবং DPR 2 দিয়ে আবার পরীক্ষা করুন।
  • ছবি আসার আগে ও পরে overflow এবং layout movement দেখুন।

স্থির মাপের ছবিতে x descriptor বাছুন

স্থির প্রস্থের ছোট logo density descriptors ব্যবহার করতে পারে। 120 CSS pixels-এ দেখানোর জন্য 120-pixel file 1x ও 240-pixel file 2x দিন। একই প্রদর্শন মাপের আলাদা resolution বোঝায়। এক srcset-এ x ও w মেশাবেন না।

আলাদা crop আরেকটি design সমস্যা। mobile-এ মুখের close crop, desktop-এ পুরো দৃশ্য চাইলে picture ও উপযুক্ত source media condition নিন। এটি art direction; মূল উদাহরণে কেবল resolution বদলায়, composition নয়। alt text দৃশ্যটির দরকারি অর্থ বর্ণনা করুক।

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

অনুপাত ও loading-ও পরিকল্পনায় আনুন

width এবং height attributes ছবি আসার আগে অনুপাতে জায়গা রাখতে দেয়। CSS প্রস্থ বদলালে এগুলো সেই CSS মাপে আটকে দেয় না। 4:3 অনুপাতে 800 প্রস্থে 600 উচ্চতা,360 প্রস্থে 270 উচ্চতা হয়। আগের জায়গা থাকলে অপ্রত্যাশিত নড়াচড়া কমে।

নিচের দূরের ছবিতে lazy loading কাজে আসে, কিন্তু প্রথমেই দেখা গুরুত্বপূর্ণ ছবি অকারণে দেরি করাবেন না। candidate বাছা অতিরিক্ত pixels কমায়; compression, format ও request timing loading খরচের অন্য অংশ সামলায়।

Decoded image memory আর network file size আলাদা। ছোট compressed WebP খুলে অনেক বড় pixel buffer হতে পারে। memory calculator-এ decoded dimensions দিন এবং compressed file-এর প্রকৃত bytes মাপুন; pixel count একা ফাইলের আকার জানায় না।

প্রকাশের আগে component-এর তালিকা মিলিয়ে নিন

Layout rule ও image generation-কে এক চুক্তি হিসেবে রাখুন: candidate widths, crop, ratio, quality ও sizes expression একসঙ্গে বদলাক। maximum width 800 থেকে 1000 হলে candidate আবার দেখুন। তাতে পরিবর্তনের পরে পুরনো attribute থেকে যাওয়ার ঝুঁকি কমে।

Fallback src, সব srcset URL, অর্থপূর্ণ alt text ও সংরক্ষিত স্থান পরীক্ষা করুন। নিজের slot এবং DPR দিয়ে pixel calculator-এ টেবিলটি পুনরায় হিসাব করুন, ratio calculator-এ উচ্চতা পান। লক্ষ্য বাস্তব যন্ত্রে মিল থাকা layout ও files ।

সাধারণ প্রশ্ন

sizes কি ছবির CSS প্রস্থ বদলায়?

না। width descriptors-এর ক্ষেত্রে এটি resource selection-এর প্রত্যাশিত slot জানায়। layout CSS ঠিক করে; দুই বর্ণনা মিলতে হবে।

window ছোট করলেও বড় ছবি কেন রইল?

browser আগে পাওয়া ছবি পুনরায় নিতে পারে। চাওয়া viewport ও DPR-এ fresh load করে resource এবং network transfer দেখুন, শুধু resize sequence নয়।

2x ছবি কি সব সময় দ্বিগুণ file size?

না। দুই dimension দ্বিগুণ হলে pixels চারগুণ হয়, কিন্তু encoded bytes content, format ও compression quality-র ওপরও নির্ভর করে। তৈরি files মাপুন।

উৎস ও সংজ্ঞা

পদ্ধতি যাচাই করা হয়েছে: