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

ব্যারি পোলার্ড
ইয়োভ ওয়েইস

আপনি প্রতিক্রিয়াশীল ছবিগুলি প্রিলোড করতে পারেন, যা আপনার ইমেজগুলিকে উল্লেখযোগ্যভাবে দ্রুত লোড করতে দেয় যাতে ব্রাউজারটিকে img ট্যাগ রেন্ডার করার আগে একটি srcset থেকে সঠিক চিত্র সনাক্ত করতে সহায়তা করে৷

প্রতিক্রিয়াশীল ছবি ওভারভিউ

ব্রাউজার সমর্থন

  • ক্রোম: 73।
  • প্রান্ত: 79।
  • ফায়ারফক্স: 78।
  • সাফারি: 17.2।

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

প্রতিক্রিয়াশীল চিত্রগুলি ব্রাউজারগুলিকে বিভিন্ন ডিভাইসের জন্য বিভিন্ন চিত্র সংস্থান আনতে দেয়৷ আপনি যদি একটি ইমেজ CDN ব্যবহার না করেন, তাহলে প্রতিটি ছবির জন্য একাধিক মাত্রা সংরক্ষণ করুন এবং srcset অ্যাট্রিবিউটে সেগুলি নির্দিষ্ট করুন। w মান ব্রাউজারকে প্রতিটি সংস্করণের প্রস্থ বলে, তাই এটি যেকোনো ডিভাইসের জন্য উপযুক্ত সংস্করণ বেছে নিতে পারে:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

প্রিলোড ওভারভিউ

ব্রাউজার সমর্থন

  • ক্রোম: 50।
  • প্রান্ত: ≤79।
  • ফায়ারফক্স: 85।
  • সাফারি: 11.1।

উৎস

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

<link rel="preload" as="image" href="important.png">

imagesrcset এবং imagesizes

<link> উপাদানটি imagesrcset ব্যবহার করে এবং প্রতিক্রিয়াশীল ছবিগুলিকে প্রিলোড করার জন্য imagesizes বৈশিষ্ট্যগুলি ব্যবহার করে। <img> উপাদানে ব্যবহৃত srcset এবং sizes সিনট্যাক্স সহ <link rel="preload"> পাশাপাশি ব্যবহার করুন।

উদাহরণস্বরূপ, আপনি যদি এর সাথে নির্দিষ্ট একটি প্রতিক্রিয়াশীল চিত্র প্রিলোড করতে চান:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

আপনি আপনার HTML এর <head> এ নিম্নলিখিত যোগ করে এটি করতে পারেন:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

এটি একই রিসোর্স সিলেকশন লজিক ব্যবহার করে একটি অনুরোধ শুরু করে যা srcset এবং sizes ব্যবহার করে।

কেস ব্যবহার করুন

প্রতিক্রিয়াশীল চিত্রগুলি প্রিলোড করার জন্য নিম্নলিখিত কিছু ব্যবহারের ক্ষেত্রে রয়েছে৷

গতিশীল-ইনজেক্ট করা প্রতিক্রিয়াশীল চিত্রগুলি প্রিলোড করুন

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

আপনি একটি গতিশীল-লোড করা চিত্র গ্যালারী সহ একটি ওয়েবসাইটে এই সমস্যাটি পরিদর্শন করতে পারেন:

  1. একটি নতুন ট্যাবে এই স্লাইডশো ডেমো খুলুন.
  2. DevTools খুলতে Control+Shift+J (বা Mac-এ Command+Option+J ) টিপুন।
  3. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
  4. থ্রটলিং ড্রপ-ডাউন তালিকায়, দ্রুত 3G নির্বাচন করুন।
  5. অক্ষম ক্যাশে চেকবক্স নিষ্ক্রিয় করুন।
  6. পৃষ্ঠাটি পুনরায় লোড করুন।
Chrome DevTools নেটওয়ার্ক প্যানেল JPEG রিসোর্স সহ একটি জলপ্রপাত দেখাচ্ছে যা কিছু JavaScript পরে ডাউনলোড করা শুরু করে।
প্রিলোডিং ছাড়াই, ব্রাউজার স্ক্রিপ্ট চালানো শেষ করার পরে ছবিগুলি লোড হতে শুরু করে। প্রথম চিত্রের জন্য, সেই বিলম্ব অপ্রয়োজনীয়।

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

Chrome DevTools নেটওয়ার্ক প্যানেল কিছু জাভাস্ক্রিপ্টের সমান্তরালে ডাউনলোড করা JPEG রিসোর্স সহ একটি জলপ্রপাত দেখাচ্ছে৷
প্রথম চিত্রটি প্রিলোড করলে এটি স্ক্রিপ্টের মতো একই সময়ে লোড হতে শুরু করে।

প্রিলোডিং যে পার্থক্য তৈরি করে তা দেখতে, একই গতিশীল-লোড করা চিত্র গ্যালারি পরিদর্শন করুন কিন্তু প্রথম উদাহরণের ধাপগুলি অনুসরণ করে প্রিলোড করা প্রথম চিত্রের সাথে ।

ইমেজ-সেট ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ প্রিলোড করুন

আপনার যদি বিভিন্ন স্ক্রীনের ঘনত্বের জন্য ভিন্ন ভিন্ন ব্যাকগ্রাউন্ড ইমেজ থাকে, তাহলে আপনি সেগুলিকে আপনার CSS-এ image-set সিনট্যাক্স দিয়ে উল্লেখ করতে পারেন। ব্রাউজার তারপর পর্দার DPR উপর ভিত্তি করে কোনটি প্রদর্শন করতে হবে তা চয়ন করতে পারে৷

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

CSS ব্যাকগ্রাউন্ড ইমেজগুলির সমস্যা হল যে ব্রাউজারটি পৃষ্ঠার <head> এ সমস্ত CSS ডাউনলোড এবং প্রক্রিয়া করার পরেই সেগুলি আবিষ্কার করে।

আপনি একটি প্রতিক্রিয়াশীল পটভূমি চিত্র সহ একটি উদাহরণ ওয়েবসাইটে এই সমস্যাটি পরিদর্শন করতে পারেন৷

Chrome DevTools নেটওয়ার্ক প্যানেল JPEG রিসোর্স সহ একটি জলপ্রপাত দেখাচ্ছে যা কিছু CSS পরে ডাউনলোড করা শুরু করে।
এই উদাহরণে, CSS সম্পূর্ণরূপে ডাউনলোড না হওয়া পর্যন্ত ছবির ডাউনলোড শুরু হয় না, যার ফলে ছবির প্রদর্শনে অপ্রয়োজনীয় ল্যাগ হয়।

প্রতিক্রিয়াশীল ইমেজ প্রিলোডিং আপনাকে সেই ছবিগুলি দ্রুত লোড করতে দেয়।

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

href অ্যাট্রিবিউটটি বাদ দিলে আপনি নিশ্চিত করতে পারবেন যে যে ব্রাউজারগুলি <link> এলিমেন্টে imagesrcset সমর্থন করে না, কিন্তু CSS-এ image-set সমর্থন করে তারা সঠিক উৎস ডাউনলোড করে। যাইহোক, তারা এই ক্ষেত্রে প্রিলোড থেকে উপকৃত হবে না।

প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড প্রিলোড ডেমোতে প্রিলোড করা প্রতিক্রিয়াশীল ব্যাকগ্রাউন্ড ইমেজের সাথে আগের উদাহরণটি কীভাবে আচরণ করে তা আপনি পরিদর্শন করতে পারেন।

Chrome DevTools নেটওয়ার্ক প্যানেল কিছু CSS-এর সমান্তরালে ডাউনলোড করা JPEG রিসোর্স সহ একটি জলপ্রপাত দেখাচ্ছে।
এখানে ইমেজ এবং CSS একই সময়ে ডাউনলোড করা শুরু করে, ইমেজটিকে দ্রুত লোড করতে দেয়।

প্রতিক্রিয়াশীল ছবি প্রিলোড করার ব্যবহারিক প্রভাব

আপনার প্রতিক্রিয়াশীল ইমেজগুলিকে প্রিলোড করলে তা তত্ত্বে তাদের গতি বাড়তে পারে, কিন্তু বাস্তবে এটি কী করে?

উত্তর দেওয়ার জন্য আমি একটি ডেমো PWA দোকানের দুটি কপি তৈরি করেছি: একটি যেটি ছবিগুলি প্রিলোড করে না , এবং একটি যা তাদের কিছু প্রিলোড করে । যেহেতু অলস সাইটটি জাভাস্ক্রিপ্ট ব্যবহার করে ছবি লোড করে, তাই প্রাথমিক ভিউপোর্টে প্রদর্শিত ছবিগুলিকে প্রিলোড করে লাভবান হওয়ার সম্ভাবনা রয়েছে৷

এটি কোন প্রিলোড ছাড়া এবং ইমেজ প্রিলোডের জন্য নিম্নলিখিত ফলাফল তৈরি করেছে:

ওয়েবপেজটেস্ট ফিল্মস্ট্রিপ তুলনা দেখায় যে প্রিলোড করা ছবিগুলি প্রায় 1.5 সেকেন্ড দ্রুত প্রদর্শিত হয়৷
প্রিলোড করা হলে ইমেজগুলি উল্লেখযোগ্যভাবে দ্রুত পৌঁছায়, ব্যবহারকারীর অভিজ্ঞতাকে ব্যাপকভাবে উন্নত করে।

প্রিলোড এবং <picture>

ওয়েব পারফরম্যান্স ওয়ার্কিং গ্রুপ srcset এবং sizes জন্য একটি প্রিলোড সমতুল্য যোগ করার বিষয়ে আলোচনা করছে, কিন্তু <picture> উপাদান নয়, যা "আর্ট ডিরেকশন" ব্যবহার কেস পরিচালনা করে।

<picture> প্রিলোড করার জন্য এখনও বেশ কিছু প্রযুক্তিগত সমস্যা আছে, কিন্তু এর মধ্যে, সমাধান আছে:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

<picture> এলিমেন্টের ইমেজ সোর্স সিলেকশন লজিক <source> এলিমেন্টের media অ্যাট্রিবিউটের উপর ক্রমানুসারে যায়, প্রথমটি খুঁজে পায় যা মেলে এবং সংযুক্ত রিসোর্স ব্যবহার করে।

যেহেতু প্রতিক্রিয়াশীল প্রিলোডের "অর্ডার" বা "প্রথম ম্যাচ" এর কোন ধারণা নেই, তাই আপনাকে ব্রেকপয়েন্টগুলিকে নিম্নলিখিত মত কিছুতে অনুবাদ করতে হবে:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

প্রিলোড করুন এবং type

<picture> উপাদানটি প্রথম type সাথে মিলে যাওয়াকেও সমর্থন করে, যাতে আপনি বিভিন্ন ইমেজ ফরম্যাট প্রদান করতে পারেন যাতে ব্রাউজার এটি সমর্থন করে এমন প্রথম ইমেজ ফরম্যাট বেছে নিতে পারে। এই ব্যবহারের ক্ষেত্রে প্রিলোডের সাথে সমর্থিত নয়।

টাইপ ম্যাচিং ব্যবহার করে এমন সাইটগুলির জন্য, আমরা প্রিলোড এড়ানোর পরামর্শ দিই, এবং এর পরিবর্তে প্রিলোড স্ক্যানারটি <picture> ছবি> এবং <source> উপাদানগুলি থেকে ছবিগুলি বাছাই করুন৷ যাইহোক এটি একটি সর্বোত্তম অভ্যাস, বিশেষ করে উপযুক্ত চিত্রকে অগ্রাধিকার দেওয়ার জন্য সাহায্যের জন্য ফেচ অগ্রাধিকার ব্যবহার করার সময়।

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

যেহেতু ছবিগুলি সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) প্রার্থী হতে পারে, সেগুলিকে আগে থেকে লোড করা আপনার ওয়েবসাইটের LCP উন্নত করতে পারে৷

আপনি যে ছবিটি প্রিলোড করছেন সেটি প্রতিক্রিয়াশীল কিনা তা বিবেচনা না করেই, প্রারম্ভিক মার্কআপ পেলোডে ইমেজ রিসোর্সটি আবিষ্কারযোগ্য না হলে প্রিলোডগুলি সবচেয়ে ভাল কাজ করে৷ আপনি সার্ভার থেকে সম্পূর্ণ মার্কআপ পাঠানো সাইটগুলির তুলনায় ক্লায়েন্ট সাইডে মার্কআপ রেন্ডার করে এমন সাইটগুলিতে আরও LCP উন্নতি পাবেন৷