মিডিয়া ক্যোয়ারী সহ CSS ব্যাকগ্রাউন্ড ইমেজ অপ্টিমাইজ করুন

Demián Renzulli

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

পূর্বশর্ত

এই নির্দেশিকা ধরে নিয়েছে যে আপনি Chrome DevTools এর সাথে পরিচিত। আপনি যদি চান তাহলে অন্য ব্রাউজারের DevTools ব্যবহার করতে পারেন। আপনাকে কেবল এই নির্দেশিকায় থাকা Chrome DevTools স্ক্রিনশটগুলিকে আপনার পছন্দের ব্রাউজারের প্রাসঙ্গিক বৈশিষ্ট্যগুলিতে ম্যাপ করতে হবে।

প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড ছবিগুলি বুঝুন

প্রথমে, অপ্টিমাইজড ডেমোর নেটওয়ার্ক ট্র্যাফিক বিশ্লেষণ করুন:

1. একটি নতুন Chrome ট্যাবে অপ্টিমাইজ করা ডেমোটি খুলুন।
2. DevTools খুলতে `Control+Shift+J` (অথবা Mac-এ `Command+Option+J`) টিপুন।
3. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
4. পৃষ্ঠাটি পুনরায় লোড করুন।

দ্রষ্টব্য: DevTools সম্পর্কে আরও সাহায্যের প্রয়োজন হলে, Inspect Network Activity With Chrome DevTools দেখুন।

আপনি দেখতে পাবেন যে শুধুমাত্র background-desktop.jpg ছবিটির জন্য অনুরোধ করা হচ্ছে, যার আকার 1006KB :

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

style.css- এ আপনি ব্যাকগ্রাউন্ড ইমেজ নিয়ন্ত্রণকারী স্টাইলগুলি দেখতে পাবেন:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

এখানে ব্যবহৃত প্রতিটি বৈশিষ্ট্যের অর্থ দেওয়া হল:

• background-position: center center : ছবিটি উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত করুন।
• background-repeat: no-repeat : ছবিটি শুধুমাত্র একবার দেখান।
• background-attachment: fixed : ব্যাকগ্রাউন্ড চিত্র স্ক্রোল করা এড়িয়ে চলুন।
• background-size: cover : পুরো কন্টেইনারটি ঢেকে রাখার জন্য ছবির আকার পরিবর্তন করুন।
• background-image: url(images/background-desktop.jpg) : ছবির URL।

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

সকল স্ক্রিন আকারের জন্য একটি একক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার কিছু সীমাবদ্ধতা রয়েছে:

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

পরবর্তী বিভাগে, আপনি শিখবেন কিভাবে ব্যবহারকারীর ডিভাইস অনুসারে বিভিন্ন ব্যাকগ্রাউন্ড ইমেজ লোড করার জন্য একটি অপ্টিমাইজেশন প্রয়োগ করতে হয়।

মিডিয়া কোয়েরি ব্যবহার করুন

মিডিয়া কোয়েরি ব্যবহার করা স্টাইলশিট ঘোষণা করার একটি সাধারণ কৌশল যা শুধুমাত্র নির্দিষ্ট মিডিয়া বা ডিভাইসের ধরণের ক্ষেত্রে প্রযোজ্য হবে। এগুলি @media নিয়ম ব্যবহার করে বাস্তবায়িত হয়, যা আপনাকে ব্রেকপয়েন্টের একটি সেট সংজ্ঞায়িত করতে দেয়, যেখানে নির্দিষ্ট স্টাইল সংজ্ঞায়িত করা হয়। যখন @media নিয়ম দ্বারা সংজ্ঞায়িত শর্তগুলি পূরণ করা হয় (উদাহরণস্বরূপ, একটি নির্দিষ্ট স্ক্রিন প্রস্থ), ব্রেকপয়েন্টের ভিতরে সংজ্ঞায়িত স্টাইলের গ্রুপ প্রয়োগ করা হবে।

নিম্নলিখিত ধাপগুলি ব্যবহার করে সাইটে মিডিয়া কোয়েরি প্রয়োগ করা যেতে পারে যাতে পৃষ্ঠার অনুরোধকারী ডিভাইসের সর্বাধিক প্রস্থের উপর নির্ভর করে বিভিন্ন ছবি ব্যবহার করা যায়।

• style.css এ ব্যাকগ্রাউন্ড ইমেজ URL থাকা লাইনটি সরিয়ে ফেলুন:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

• এরপর, মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রিনে সাধারণত যে পিক্সেল থাকে তার সাধারণ মাত্রার উপর ভিত্তি করে প্রতিটি স্ক্রিন প্রস্থের জন্য একটি ব্রেকপয়েন্ট তৈরি করুন:

মোবাইলের জন্য:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

ট্যাবলেটের জন্য:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

ডেস্কটপ ডিভাইসের জন্য:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

পরিবর্তনগুলি দেখতে আপনার ব্রাউজারে style.css এর অপ্টিমাইজ করা সংস্করণটি খুলুন।

দ্রষ্টব্য: অপ্টিমাইজড ডেমোতে ব্যবহৃত ছবিগুলি ইতিমধ্যেই বিভিন্ন স্ক্রিন আকারের সাথে মানানসই করে আকার পরিবর্তন করা হয়েছে। ছবিগুলির আকার পরিবর্তন কীভাবে করবেন তা দেখানো এই নির্দেশিকার আওতার বাইরে, তবে আপনি যদি এই সম্পর্কে আরও জানতে চান, তাহলে Serve responsive images নির্দেশিকাটি কিছু দরকারী টুল কভার করে, যেমন sharp npm প্যাকেজ এবং ImageMagick CLI ।

বিভিন্ন ডিভাইসের জন্য পরিমাপ

এরপর বিভিন্ন স্ক্রিন সাইজ এবং সিমুলেটেড মোবাইল ডিভাইসে ফলাফলের সাইটটি কল্পনা করুন:

1. একটি নতুন Chrome ট্যাবে অপ্টিমাইজ করা সাইটটি খুলুন।
2. আপনার ভিউপোর্ট সংকীর্ণ করুন ( 480px এর কম)।
3. DevTools খুলতে `Control+Shift+J` (অথবা Mac-এ `Command+Option+J`) টিপুন।
4. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
5. পৃষ্ঠাটি পুনরায় লোড করুন। লক্ষ্য করুন কিভাবে background-mobile.jpg ছবিটি অনুরোধ করা হয়েছিল।
6. আপনার ভিউপোর্টটি আরও প্রশস্ত করুন। 480px বেশি প্রশস্ত হলে লক্ষ্য করুন কিভাবে background-tablet.jpg অনুরোধ করা হয়েছে। 1025px বেশি প্রশস্ত হলে লক্ষ্য করুন কিভাবে background-desktop.jpg অনুরোধ করা হয়েছে।

যখন ব্রাউজার স্ক্রিনের প্রস্থ পরিবর্তন করা হয়, তখন নতুন ছবি অনুরোধ করা হয়।

বিশেষ করে যখন প্রস্থ মোবাইল ব্রেকপয়েন্টে (480px) নির্ধারিত মানের নিচে থাকে, তখন আপনি নিম্নলিখিত নেটওয়ার্ক লগটি দেখতে পাবেন:

নতুন মোবাইল ব্যাকগ্রাউন্ডের আকার ডেস্কটপের তুলনায় ৬৭% ছোট ।

লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) এর উপর প্রভাব

CSS ব্যাকগ্রাউন্ড ইমেজ সহ এলিমেন্টগুলিকে Largest Contentful Paint (LCP) এর জন্য প্রার্থী হিসেবে বিবেচনা করা হয়, তবে, CSS ব্যাকগ্রাউন্ড ইমেজগুলি ব্রাউজার প্রিলোড স্ক্যানার দ্বারা আবিষ্কারযোগ্য নয় , যার অর্থ আপনি যদি সতর্ক না হন তবে আপনার সাইটের LCP বিলম্বিত হতে পারে।

আপনার প্রথম যে বিকল্পটি বিবেচনা করা উচিত তা হল আপনার LCP প্রার্থীর ছবিটি srcset এবং sizes অ্যাট্রিবিউট সহ একটি <img> এলিমেন্টে কাজ করতে পারে কিনা। ব্রাউজার প্রিলোড স্ক্যানার <img> এলিমেন্টগুলি আবিষ্কার করবে এবং রেন্ডারিংয়ে পার্সার ব্লক থাকা অবস্থায় তাদের জন্য অনুরোধ পাঠাবে।

যদি আপনি CSS ব্যাকগ্রাউন্ড ইমেজ ব্যবহার এড়াতে না পারেন (অথবা চান না), তাহলে দ্বিতীয় বিকল্পটি হল রেসপন্সিভ ইমেজ প্রিলোড করা যাতে আপনি সঠিক ভিউপোর্ট সাইজের জন্য সঠিক ইমেজ প্রিলোড করতে পারেন। <link> elements media , imagesrcset , এবং imagesizes attributes ব্রাউজারে ইঙ্গিত দেয় যে একটি প্রদত্ত রিসোর্স ইঙ্গিত শুধুমাত্র নির্দিষ্ট ভিউপোর্ট পরিস্থিতিতে প্রযোজ্য, যখন আপনি শুধুমাত্র বর্তমান ভিউপোর্টের জন্য উপযুক্ত একটি রিসোর্স লোড করতে চান তখন একাধিক অপচয় হওয়া প্রিলোড এড়িয়ে যান।

সারাংশ

এই নির্দেশিকায় আপনি শিখেছেন কিভাবে নির্দিষ্ট স্ক্রিন সাইজ অনুযায়ী ব্যাকগ্রাউন্ড ইমেজের অনুরোধ করতে হয় এবং মোবাইল ফোনের মতো ছোট ডিভাইসে সাইট অ্যাক্সেস করার সময় বাইট সংরক্ষণ করতে হয়। আপনি @media নিয়ম ব্যবহার করে একটি রেসপন্সিভ ব্যাকগ্রাউন্ড বাস্তবায়ন করেছেন। এই কৌশলটি সকল ব্রাউজারে ব্যাপকভাবে সমর্থিত। একটি নতুন CSS বৈশিষ্ট্য: image-set() , একই উদ্দেশ্যে কম লাইন কোড ব্যবহার করা যেতে পারে। এই লেখার সময়, এই বৈশিষ্ট্যটি সমস্ত ব্রাউজারে সমর্থিত নয়, তবে আপনি কীভাবে গ্রহণের বিবর্তন ঘটে তা পর্যবেক্ষণ করতে পারেন, কারণ এটি এই কৌশলের একটি আকর্ষণীয় বিকল্প হতে পারে।