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

Demián Renzulli

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

পূর্বশর্ত

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

প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড ইমেজ বুঝতে

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

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

দ্রষ্টব্য: আপনার যদি DevTools এর সাথে আরও সাহায্যের প্রয়োজন হয় তাহলে 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 এ ব্যাকগ্রাউন্ড ইমেজ ইউআরএল ধারণ করা লাইনটি সরিয়ে দিন:

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- এর অপ্টিমাইজ করা সংস্করণ খুলুন৷

দ্রষ্টব্য: অপ্টিমাইজ করা ডেমোতে ব্যবহৃত চিত্রগুলি ইতিমধ্যেই বিভিন্ন স্ক্রীন আকারে ফিট করার জন্য পুনরায় আকার দেওয়া হয়েছে৷ কীভাবে চিত্রগুলিকে পুনরায় আকার দিতে হয় তা দেখানো এই গাইডের সুযোগের বাইরে নয়, তবে আপনি যদি এই সম্পর্কে আরও জানতে চান, পরিবেশন প্রতিক্রিয়াশীল চিত্র নির্দেশিকা কিছু দরকারী টুল কভার করে, যেমন শার্প 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) সংজ্ঞায়িত মানের নিচে থাকে, তখন আপনি নিম্নলিখিত নেটওয়ার্ক লগ দেখতে পান:

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

সবচেয়ে বড় কন্টেন্টফুল পেইন্টের (LCP) উপর প্রভাব

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

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

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

সারসংক্ষেপ

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