একটি ওয়েবসাইট স্থাপন করার সময়, বিকাশকারীরা সাধারণত সমস্ত স্ক্রীন আকারের জন্য একই চিত্র ব্যবহার করে, যা একটি ভাল অনুশীলন নয় কারণ ব্রাউজারটি আকার পরিবর্তনের জন্য নির্ভর করা যায় না। এই ধরনের পরিস্থিতিতে, প্রতিক্রিয়াশীল ছবিগুলি কার্যকর হয় এবং নিশ্চিত করে যে ছবিটি সংশ্লিষ্ট ডিভাইসের জন্য উপযুক্ত আকার এবং গুণমানে ডাউনলোড করা হয়েছে, যার ফলে পৃষ্ঠা লোড করার গতি বৃদ্ধি পায়।
প্রতিক্রিয়াশীল চিত্রগুলি ব্যবহার করে কীভাবে পৃষ্ঠা লোডের গতি বাড়ানো যায়?
প্রতিক্রিয়াশীল চিত্রগুলির মাধ্যমে পৃষ্ঠা লোডের গতি বাড়ানোর জন্য, নিম্নলিখিত পদ্ধতিগুলি বিবেচনা করুন:
উদাহরণ 1: 'srcset' অ্যাট্রিবিউট ব্যবহার করে প্রতিক্রিয়াশীল চিত্রগুলির মাধ্যমে পৃষ্ঠা লোডের গতি বাড়ান
প্রতিক্রিয়াশীল চিত্রগুলি প্রয়োগ করার জন্য সবচেয়ে সুবিধাজনক পদ্ধতি হল ' srcset 'এ অ্যাট্রিবিউট জমা হয়েছে' ট্যাগ এই বৈশিষ্ট্যটি প্রোগ্রামারকে বিভিন্ন চিত্রের আকার নির্দিষ্ট করতে সক্ষম করে এবং ব্রাউজার স্বয়ংক্রিয়ভাবে ব্যবহারকারীর পর্দার আকারের সাথে সবচেয়ে উপযুক্ত চিত্রটি বেছে নেয়। নিম্নলিখিত প্রদর্শনী হল:
DOCTYPE html >
< html >
< মাথা >
< মেটা অক্ষর সেট = 'UTF-8' >
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1' >
< শিরোনাম >> শিরোনাম >
মাথা >
< শরীর >
< img src = 'F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png' সবকিছু = 'প্রতিক্রিয়াশীল ছবি'
srcset = 'F:\JOB টেকনিক্যাল নিবন্ধ\imgre.png 400w, F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 800w, F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 1200w'
/>
শরীর >
html >
এই কোডে:
- দ্য ' srcset ” বৈশিষ্ট্যটি অন্তর্ভুক্ত করা হয়েছে যা প্রতিবার চিত্রের পথ এবং বিভিন্ন প্রস্থকে অন্তর্ভুক্ত করে।
- এটি এমন যে চিত্রটি ' F:\JOB টেকনিক্যাল আর্টিকেল\imgre.png 400w 'প্রস্থের একটি চিত্র পথ উপস্থাপন করে' 400 ” পিক্সেল।
- এই তথ্যের উপর ভিত্তি করে, ব্রাউজার ব্যবহারকারীর স্ক্রীনের আকারের উপর ভিত্তি করে ডাউনলোড করার জন্য সবচেয়ে উপযুক্ত ছবি বিশ্লেষণ করে যাতে ছোট স্ক্রীনগুলি ছোট ছবি প্রদর্শন করে, যার ফলে ব্যান্ডউইথ সংরক্ষণ করা হয়।
আউটপুট
উদাহরণ 2: বিভিন্ন পিক্সেল ঘনত্ব নির্দিষ্ট করে প্রতিক্রিয়াশীল চিত্রগুলির মাধ্যমে পৃষ্ঠা লোডের গতি বাড়ান
এই উদাহরণে, উচ্চ-রেজোলিউশন প্রদর্শনের জন্য বিভিন্ন পিক্সেল ঘনত্বের সাথে চিত্রের পথটি নির্দিষ্ট করা হবে। এটি 'এর মাধ্যমে অর্জন করা যেতে পারে srcset ' বৈশিষ্ট্য, নীচে প্রদর্শিত:
DOCTYPE html >< html >
< মাথা >
< মেটা অক্ষর সেট = 'UTF-8' >
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1' >
< শিরোনাম >> শিরোনাম >
মাথা >
< শরীর >
< img src = 'F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png' সবকিছু = 'প্রতিক্রিয়াশীল ছবি' srcset = 'F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 1x, F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 1.5x, F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 2x'
/>
শরীর >
html >
কোডের এই স্নিপেটে, বিভিন্ন পিক্সেল ঘনত্বের সাথে চিত্রের পথটি তিনবার নির্দিষ্ট করুন। এটি এমন যে ব্রাউজার বিভিন্ন স্ক্রিনে শীর্ষ গুণমান নিশ্চিত করতে সবচেয়ে উপযুক্ত/উপযুক্ত ছবি বেছে নেয়।
বিঃদ্রঃ: দ্য ' 1x ' পিক্সেল হল ডিফল্ট মান তাই ব্যবহারকারীর জন্য ছবির পথের সাথে যুক্ত করা বা না করা একটি পছন্দ।
আউটপুট
উদাহরণ 3: 'আকার' বৈশিষ্ট্য ব্যবহার করে প্রতিক্রিয়াশীল চিত্রগুলির মাধ্যমে পৃষ্ঠা লোডের গতি বাড়ান
কিছু পরিস্থিতিতে, একটি সীমাবদ্ধতা থাকতে পারে যেখানে পর্দার প্রকৃত চিত্রের আকার পর্দার প্রস্থ থেকে পরিবর্তিত হয়। এই সমস্যা সমাধানের জন্য, ' মাপ মিডিয়া ক্যোয়ারী বা একটি নির্দিষ্ট আকারের সাথে ইমেজ সাইজ অন্তর্ভুক্ত করতে অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। নীচে কোড প্রদর্শন করা হল:
DOCTYPE html >< html >
< মাথা >
< মেটা অক্ষর সেট = 'UTF-8' >
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1' >
< শিরোনাম >> শিরোনাম >
মাথা >
< শরীর >
< img src = 'F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png' সবকিছু = 'প্রতিক্রিয়াশীল ছবি' srcset = 'F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 50w, F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 800w, F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png 1200w'
মাপ = '(সর্বোচ্চ-প্রস্থ: 800px) 100vw, 800px'
/>
শরীর >
html >
এই কোড ব্লকে, ' মাপ ” অ্যাট্রিবিউট মিডিয়া প্রশ্ন এবং আকার একত্রিত করে। এটি এমন যে এটি ব্রাউজারকে ব্যবহারকারীর স্ক্রিনের প্রস্থের সাপেক্ষে চিত্রের আকার বেছে নেওয়ার জন্য গাইড করে। এটি নিশ্চিত করে যে চিত্র(গুলি) লক্ষ্য সর্বোচ্চ প্রস্থ অতিক্রম না করে।
আউটপুট
'আকার' বৈশিষ্ট্য ব্যবহার করার সময় গুরুত্বপূর্ণ বিবেচনা
ব্যবহার করার কিছু সীমাবদ্ধতা আছে ' মাপ ” বৈশিষ্ট্য নীচে তালিকাভুক্ত:
- 'এ একাধিক মিডিয়া প্রশ্ন ব্যবহার করার সময় মাপ ” বৈশিষ্ট্য, নিশ্চিত করুন যে প্রথম সত্য মিডিয়া কোয়েরিটি বেছে নেওয়া হয়েছে। এছাড়াও, নিশ্চিত করুন যে মিডিয়া প্রশ্নগুলি সর্বাধিক নির্দিষ্ট থেকে কমপক্ষে নির্দিষ্ট পর্যন্ত অর্ডার করা হয়েছে।
- 'মাপ' বৈশিষ্ট্যটি শতাংশের মাপ সমর্থন করে না কারণ ব্রাউজারটি প্যারেন্ট এলিমেন্টের প্রস্থ সম্পর্কে সচেতন না হওয়া পর্যন্ত শতাংশে নির্দিষ্ট কিছু কতটা প্রশস্ত হবে তা জানে না।
উদাহরণ 4: “<ছবি>” উপাদান ব্যবহার করে প্রতিক্রিয়াশীল চিত্রগুলির মাধ্যমে পৃষ্ঠা লোডের গতি বাড়ান
দ্য ' <ছবি> ” উপাদান প্রোগ্রামারকে বিভিন্ন স্ক্রীন আকারে একাধিক ছবি প্রদর্শন ও স্থাপন করতে সক্ষম করে। ডিভাইসের উপর ভিত্তি করে বিষয়বস্তু পরিবর্তিত হয় এমন ক্ষেত্রে এটি সহায়ক। নীচে কোড প্রদর্শন করা হল:
DOCTYPE html >< html >
< মাথা >
< মেটা অক্ষর সেট = 'UTF-8' >
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1' >
< শিরোনাম >> শিরোনাম >
মাথা >
< শরীর >
< ছবি >
< উৎস মিডিয়া = '(সর্বোচ্চ-প্রস্থ: 100px)' srcset = 'F:\JOB প্রযুক্তিগত নিবন্ধ\imgbanner.png' />
< img src = 'F:\JOB প্রযুক্তিগত নিবন্ধ\imgre.png' সবকিছু = 'প্রতিক্রিয়াশীল ছবি' />
ছবি >
শরীর >
html >
এই কোড লাইন অনুযায়ী:
- উল্লেখ ' <ছবি> ' উপাদান যা জমা করে ' <উৎস> ” বিভিন্ন চিত্রের জন্য উপাদান এবং ব্রাউজারকে ব্যবহারকারীর স্ক্রীনের আকারের উপর ভিত্তি করে উপযুক্ত একটি বেছে নিতে দিন।
- এছাড়াও, যদি ' <উৎস> ' উপাদানগুলি পর্দার আকারের জন্য উপযুক্ত, চিত্রটি '
” ট্যাগ একটি ফলব্যাক হিসাবে কাজ করে।
- এটি ফলস্বরূপ একটি অপ্রত্যাশিত ক্ষেত্রে একটি বিকল্প চিত্র যোগ করে, যার ফলে উন্নত পৃষ্ঠা লোড গতি বজায় থাকে।
আউটপুট
উপসংহার
পৃষ্ঠা লোডের গতি প্রতিক্রিয়াশীল চিত্রগুলির মাধ্যমে উন্নত করা যেতে পারে ' srcset ” বৈশিষ্ট্য, বিভিন্ন পিক্সেল ঘনত্ব নির্দিষ্ট করে, ব্যবহার করে মাপ ' বৈশিষ্ট্য, বা 'এর মাধ্যমে <ছবি> ' উপাদান। দ্য ' <ছবি> ” উপাদান পদ্ধতি বিবেচনা করা যেতে পারে যদি অন্য কোনো পন্থা কাজ না করে কারণ এটি একই চিত্রের জন্য অতিরিক্ত বিকল্প ছাড়াই একটি অপ্রত্যাশিত ক্ষেত্রে একটি বিকল্প চিত্র যোগ করে।