রেসপন্সিভ ছবি প্রিলোড করুন

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

প্রকাশিত: ৩০ সেপ্টেম্বর, ২০১৯, শেষবার আপডেট করা হয়েছে: ১০ জুলাই, ২০২৬

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

রেসপন্সিভ ছবির ওভারভিউ

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

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

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

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

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

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

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

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

imagesrcset ও imagesizes

<link> এলিমেন্ট imagesrcset এবং imagesizes অ্যাট্রিবিউট ব্যবহার করে রেসপন্সিভ ছবি প্রিলোড করে। <link rel="preload">-এর সাথে srcset ও sizes সিনট্যাক্স ব্যবহার করুন যা <img> এলিমেন্টে ব্যবহার করা হয়।

যেমন, আপনি যদি নির্দিষ্ট করা কোনও রেসপন্সিভ ছবি প্রিলোড করতে চান:

 <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 নেটওয়ার্ক প্যানেল একটি ওয়াটারফল দেখাচ্ছে যেখানে কিছু CSS-এর পরে JPEG রিসোর্স ডাউনলোড শুরু হচ্ছে।
এই উদাহরণে, CSS সম্পূর্ণ ডাউনলোড না হওয়া পর্যন্ত ছবি ডাউনলোড শুরু হয় না, যার ফলে ছবি ডিসপ্লে হতে অপ্রয়োজনীয় দেরি হয়।

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

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

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

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

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

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

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

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

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

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

প্রিলোড ও <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 ব্যবহার করার সময়, কারণ এটি ব্রাউজার সাপোর্টের উপর ভিত্তি করে সঠিক ছবি প্রিলোড করার অনুমতি দেয়। এছাড়াও, ছবি বা পৃষ্ঠা পরিবর্তন হলে, মূল মার্ক-আপ থেকে প্রিলোড আউটডেটেড হয়ে যাওয়ার ঝুঁকিও এটি দূর করে।

Largest Contentful Paint (LCP)-এর উপর প্রভাব

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

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