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

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

আপনি রেসপন্সিভ ছবি প্রিলোড করতে পারেন, যা আপনার ছবিগুলিকে উল্লেখযোগ্যভাবে দ্রুত লোড করতে সাহায্য করে, যার ফলে ব্রাউজারটি img ট্যাগ রেন্ডার করার আগে srcset থেকে সঠিক ছবি সনাক্ত করতে সাহায্য করে।

প্রতিক্রিয়াশীল চিত্রগুলির ওভারভিউ

Browser Support

  • ক্রোম: ৭৩।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ৭৮।
  • সাফারি: ১৭.২।

Source

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

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

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

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

Browser Support

  • ক্রোম: ৫০।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ৮৫।
  • সাফারি: ১১.১।

Source

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

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

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" fetchpriority="high">

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

ব্যবহারের ক্ষেত্রে

রেসপন্সিভ ছবি প্রিলোড করার জন্য কিছু ব্যবহারের উদাহরণ নিচে দেওয়া হল।

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

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

আপনি এই সমস্যাটি একটি ওয়েবসাইটে পরীক্ষা করতে পারেন যেখানে একটি গতিশীলভাবে লোড করা ইমেজ গ্যালারি রয়েছে:

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

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

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

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

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

যদি আপনার বিভিন্ন স্ক্রিন ঘনত্বের জন্য বিভিন্ন ব্যাকগ্রাউন্ড ইমেজ থাকে, তাহলে আপনি image-set সিনট্যাক্স ব্যবহার করে আপনার CSS-এ সেগুলো নির্দিষ্ট করতে পারেন। এরপর ব্রাউজার স্ক্রিনের 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" fetchpriority="high">

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

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

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

রেসপন্সিভ ছবি প্রিলোড করার ব্যবহারিক প্রভাব

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

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

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

ওয়েবপেজটেস্ট ফিল্মস্ট্রিপ তুলনা যেখানে প্রিলোড করা ছবিগুলি প্রায় ১.৫ সেকেন্ড দ্রুত প্রদর্শিত হয়।
প্রিলোড করা হলে ছবিগুলি উল্লেখযোগ্যভাবে দ্রুত আসে, যা ব্যবহারকারীর অভিজ্ঞতাকে ব্যাপকভাবে উন্নত করে।

প্রিলোড এবং <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)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

প্রিলোড এবং type

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

এই ব্যবহারের ক্ষেত্রে শুধুমাত্র প্রিলোডের সাথে আংশিকভাবে সমর্থিত: ব্রাউজারগুলি কেবল সমর্থিত ধরণের জন্য প্রিলোড ডাউনলোড করবে। তাই আপনি প্রিলোডে এটি অন্তর্ভুক্ত করে ব্রাউজারগুলিকে অসমর্থিত মাইমটাইপ ধরণের প্রিলোড করা থেকে বিরত রাখতে এটি ব্যবহার করতে পারেন:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

তবে, <picture> বিপরীতে, এটি প্রথম সমর্থিত টাইপেই থেমে থাকবে না। তাই যদি একাধিক টাইপের জন্য একাধিক প্রিলোড অন্তর্ভুক্ত করা হয়, তাহলে সমস্ত ছবি প্রিলোড করা হবে:

এটা করবেন না — একাধিক প্রকার প্রিলোড করুন: 

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

পরিবর্তে এটি করুন — সবচেয়ে পছন্দের ধরণটি প্রিলোড করুন: 

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

নতুন ফর্ম্যাট (এই ক্ষেত্রে AVIF) প্রিলোড করা একটি প্রগতিশীল বর্ধন হিসাবে কাজ করে, যেখানে সেই ধরণের সমর্থনকারী ব্রাউজারগুলি উপকৃত হবে এবং অন্যান্য ব্রাউজারগুলি প্রিলোড থেকে উপকৃত হবে না।

যেসব সাইটে HTML-এ ছবি দ্রুত আবিষ্কার করা যায়, আমরা প্রিলোড এড়িয়ে যাওয়ার পরামর্শ দিচ্ছি, এবং এর পরিবর্তে প্রিলোড স্ক্যানার ব্যবহার করে ছবিগুলো <picture> এবং <source> এলিমেন্ট থেকে তুলে নেওয়ার পরামর্শ দিচ্ছি। যাইহোক, এটি একটি সর্বোত্তম অনুশীলন, বিশেষ করে যখন উপযুক্ত ছবিকে অগ্রাধিকার দেওয়ার জন্য Fetch Priority ব্যবহার করা হয়, কারণ এটি ব্রাউজার সাপোর্টের উপর ভিত্তি করে সঠিক ছবিটিকে প্রিলোড করার সুযোগ দেয়। এটি ছবি বা পৃষ্ঠা পরিবর্তনের সময় মূল মার্কআপ থেকে প্রিলোডের পুরনো হয়ে যাওয়ার ঝুঁকিও দূর করে।

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

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

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