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

ব্যারি পোলার্ড
ইয়োভ ওয়েইস
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 অ্যাট্রিবিউট ব্যবহার করে। <link rel="preload"> এর সাথে এগুলো ব্যবহার করুন, এবং <img> এলিমেন্টে ব্যবহৃত srcset ও sizes সিনট্যাক্স অনুসরণ করুন।

উদাহরণস্বরূপ, যদি আপনি নিম্নলিখিতভাবে নির্দিষ্ট একটি রেসপন্সিভ ইমেজ প্রি-লোড করতে চান:

 <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. ‘Disable cache’ চেকবক্সটি নিষ্ক্রিয় করুন।
  6. পৃষ্ঠাটি পুনরায় লোড করুন।
ক্রোম ডেভটুলস নেটওয়ার্ক প্যানেলে একটি ওয়াটারফল দেখা যাচ্ছে, যেখানে একটি JPEG রিসোর্স কিছু জাভাস্ক্রিপ্ট কোড পড়ার পরেই কেবল ডাউনলোড হওয়া শুরু হচ্ছে।
প্রি-লোডিং ছাড়া, ব্রাউজারে স্ক্রিপ্ট চালানো শেষ হওয়ার পর ছবিগুলো লোড হতে শুরু করে। প্রথম ছবিটির জন্য এই বিলম্ব অপ্রয়োজনীয়।

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

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

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

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

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

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

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

আপনি রেসপন্সিভ ব্যাকগ্রাউন্ড ইমেজ সহ একটি উদাহরণ ওয়েবসাইটে এই সমস্যাটি পরীক্ষা করে দেখতে পারেন।

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

রেসপন্সিভ ইমেজ প্রি-লোডিং আপনাকে ছবিগুলো আরও দ্রুত লোড করতে সাহায্য করে।

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

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

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

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

রেসপন্সিভ ইমেজ প্রি-লোড করার বাস্তব প্রভাব

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

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

এর ফলে প্রি-লোড ছাড়া এবং ইমেজ প্রি-লোড সহ নিম্নলিখিত ফলাফলগুলি পাওয়া গেছে:

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

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

ওয়েব পারফরম্যান্স ওয়ার্কিং গ্রুপ srcset এবং sizes জন্য একটি preload সমতুল্য অপশন যোগ করার বিষয়ে আলোচনা করছে, কিন্তু <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-এর আরও বেশি উন্নতি দেখতে পাবেন।