Srcset জেনারেটর
নতুনআপনার প্রস্থ থেকে srcset ও sizes সহ রেসপন্সিভ <img> মার্কআপ তৈরি করুন।
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
srcset, sizes এবং picture মার্কআপ একই জায়গায় তৈরি করুন
রেসপনসিভ ইমেজ মার্কআপ হাতে লেখা ঝামেলার — srcset তালিকা, তার সাথে মেলানো sizes অ্যাট্রিবিউট, WebP এবং AVIF fallback সহ <picture> ব্লক — আর একটিমাত্র টাইপো মানে ব্রাউজার নীরবে ভুল ফাইল ডাউনলোড করে ফেলে। এই srcset জেনারেটর আপনার জন্য পুরো ট্যাগটি তৈরি করে দেয়: একটি ফাইলের নাম এবং আপনার প্রস্থগুলো লিখুন, আর এটি সঠিক ডেসক্রিপ্টর, লেজি লোডিং এবং async ডিকোডিংসহ একটি সম্পূর্ণ, কপি-করার-জন্য-প্রস্তুত রেসপনসিভ <img> বা <picture> এলিমেন্ট তৈরি করে।
এটি একটি ফ্রি রেসপনসিভ ইমেজ জেনারেটর যা সম্পূর্ণভাবে ব্রাউজারেই চলে — কোনো সাইনআপ নেই, কিছুই আপলোড হয় না, এবং একবার লোড হয়ে গেলে এটি অফলাইনেও কাজ চালিয়ে যায়।
srcset এবং sizes, ব্যাখ্যা সহ
একটি রেসপনসিভ ইমেজের দুটি অংশকে একসাথে কাজ করতে হয়। srcset হলো ফাইল ও তাদের আসল প্রস্থের তালিকা — hero-640.jpg 640w ব্রাউজারকে বলে যে ফাইলটি ৬৪০ পিক্সেল চওড়া। sizes বর্ণনা করে ইমেজটি আপনার লেআউটে কতটা চওড়া দেখানো হবে, যেমন (max-width: 600px) 100vw, 600px। ব্রাউজার sizes পড়ে, ডিভাইস পিক্সেল রেশিও দিয়ে গুণ করে, এবং সবচেয়ে কাছের srcset প্রার্থীটি ডাউনলোড করে।
ডেসক্রিপ্টর-কে x-এ পরিবর্তন করলে আপনি পিক্সেল-ডেনসিটি মার্কআপ পাবেন — logo.png 1x, logo@2x.png 2x — যা রেটিনা স্ক্রিনে লোগো ও আইকনের মতো নির্দিষ্ট-আকারের ইমেজের জন্য আদর্শ, যেখানে w ডেসক্রিপ্টর এবং sizes অতিরিক্ত হয়ে যেত।
কখন এর বদলে picture এলিমেন্ট ব্যবহার করবেন
সাধারণ srcset রেজোলিউশন সুইচিং সামলায় — একই ইমেজ, ভিন্ন আকারে। বেশি নিয়ন্ত্রণের দরকার হলে <picture> এলিমেন্টের দিকে যান: পরবর্তী-প্রজন্মের ফরম্যাট একটি fallback সহ পরিবেশন করা, অথবা আর্ট ডিরেকশন (মোবাইলে ভিন্ন ক্রপ, ডেস্কটপে অন্যটি)।
<picture> মোডে এই টুলটি একটি <source type="image/avif">, একটি <source type="image/webp">, এবং একটি JPEG বা PNG <img> fallback তৈরি করে, তাই আধুনিক ব্রাউজার সবচেয়ে ছোট ফরম্যাট পায় আর পুরনোগুলোও একটি ইমেজ দেখতে পায়।
আপনার ইমেজ প্রতিটি প্রস্থে রিসাইজ করুন, স্থানীয়ভাবে
মার্কআপ কাজের অর্ধেক মাত্র — আসল রিসাইজ করা ফাইলগুলোও আপনার প্রয়োজন। টুলটিতে একটি ইমেজ ড্রপ করুন আর এটি একটি HTML ক্যানভাসেই আপনার প্রতিটি প্রস্থে এটি রিসাইজ করে দেবে, তারপর তৈরি করা মার্কআপের সাথে ঠিক মিলে যাওয়া ফাইলের নামসহ পুরো সেট ডাউনলোড করতে দেবে (hero-320.jpg, hero-640.jpg, ইত্যাদি)।
এখানে কোনো আপলোড নেই এবং কোনো বিল্ড পাইপলাইনও নেই। আসল ছবির চেয়ে বড় করলে শুধু ঝাপসাই যোগ হয় বলে, টুলটি এমন যেকোনো প্রস্থ চিহ্নিত করে দেয় যা আপনার সোর্সের চেয়ে বড়, যাতে আপনার ইমেজ সেট নির্ভুল থাকে।
Squoosh, Responsivebreakpoints.com এবং CloudFlare Image Resize-এর সাথে তুলনা
Squoosh (Google-এর তৈরি) একক ইমেজ কম্প্রেশন ও রূপান্তরে চমৎকার — একটি WebP বা AVIF-এর জন্য সঠিক কোয়ালিটি সেটিং বেছে নেওয়ার জন্য এটি দুর্দান্ত। কিন্তু এটি srcset মার্কআপ তৈরি করে না বা HTML-এ পেস্ট করার জন্য একটি সম্পূর্ণ রেসপনসিভ ইমেজ ট্যাগও তৈরি করে না। এটি একটি কম্প্রেশন টুল, মার্কআপ জেনারেটর নয়।
Responsivebreakpoints.com (Cloudinary-র) সর্বোত্তম ব্রেকপয়েন্ট গণনা এবং রিসাইজ করা ইমেজ তৈরি করতে আপনার ইমেজ Cloudinary-র সার্ভারে আপলোড করে। ফলাফল ভালো, কিন্তু আপনার ফাইল আপনার মেশিন ছেড়ে যায় এবং Cloudinary-র শর্তাবলী প্রযোজ্য হয়। Cloudflare Image Resize এবং Imgix হলো CDN সার্ভিস — এগুলো ডেলিভারির সময় ইমেজ প্রসেস করে কিন্তু অ্যাকাউন্ট সেটআপ, API ইন্টিগ্রেশন, এবং চলমান বিলিং প্রয়োজন। UtiloKit-এর srcset জেনারেটর একটি ভিন্ন অবস্থানে থাকে: এটি সম্পূর্ণ HTML মার্কআপ তৈরি করে এবং ইমেজ স্থানীয়ভাবে, ক্লায়েন্ট-সাইডে রিসাইজ করে, কোনো আপলোড, কোনো অ্যাকাউন্ট, কোনো খরচ বা ফাইল-সাইজ সীমা ছাড়াই। যখন আপনি কোনো ইনফ্রাস্ট্রাকচার না বসিয়েই মার্কআপ বা রিসাইজ করা ফাইল তাৎক্ষণিকভাবে চান তখন এটি উপযোগী।
প্রস্থ, ব্রেকপয়েন্ট এবং Core Web Vitals
একটি নির্ভরযোগ্য প্রস্থ সেট হলো ৩২০, ৬৪০, ৯৬০, ১২৮০ এবং ১৯২০, প্রতিটি ধাপে মোটামুটি দ্বিগুণ করে ফোন থেকে বড় রেটিনা ডিসপ্লে পর্যন্ত কভার করে; ফুল-ব্লিড হিরোর জন্য ২৫৬০ যোগ করুন। সঠিক-আকারের ইমেজ পরিবেশন করা Core Web Vitals-এর জন্য অন্যতম বড় জয়: কম বাইট মানে দ্রুততর Largest Contentful Paint, আর width এবং height অ্যাট্রিবিউট যোগ করা লেআউট শিফট (CLS) প্রতিরোধ করে যা ব্যবহারকারী ও র্যাঙ্কিং দুটোরই ক্ষতি করে।
স্ক্রিনের বাইরের ইমেজে loading="lazy" যোগ করুন যাতে সেগুলো স্ক্রল করে ভিউয়ে আসার সময়ই লোড হয়, আর আপনার হিরোতে fetchpriority="high" যোগ করুন যাতে এটি প্রথমে লোড হয় — দুটোই এখানে এক-ক্লিকের টগল।
প্রাইভেট, তাৎক্ষণিক এবং অফলাইন — যেকোনো ডিভাইসে কাজ করে
ইনস্টল করার কিছু নেই এবং অ্যাকাউন্ট তৈরির দরকার নেই। আপনি টাইপ করার সাথে সাথে প্রতিটি ট্যাগ আপনার ব্রাউজারে তৈরি হয়, এবং আপনি যে ইমেজ রিসাইজ করেন তা canvas API দিয়ে স্থানীয়ভাবে প্রসেস হয় — কিছুই কখনো আপলোড হয় না। পেজ লোড হয়ে গেলে জেনারেটরটি অফলাইনেও কাজ করে, তাই আপনি যেকোনো জায়গায় — প্লেনে, ফোনে, ওয়াই-ফাই ছাড়াই — রেসপনসিভ img srcset এবং <picture> মার্কআপ তৈরি করতে পারেন।
ব্রাউজার আসলে কীভাবে srcset থেকে একটি ইমেজ বেছে নেয়
ব্রাউজারের নির্বাচন অ্যালগরিদম বুঝলে বোঝা যায় কেন srcset এবং sizes দুটোই প্রয়োজন। ব্রাউজার যখন একটি <img> ট্যাগ পার্স করে, কিছু ডাউনলোড করার আগে তিনটি ধাপ পার হয়। প্রথমে এটি sizes অ্যাট্রিবিউট পড়ে এবং বর্তমান ভিউপোর্টের সাথে মিলে যাওয়া প্রথম মিডিয়া কন্ডিশনটি খুঁজে বের করে — যেমন sizes="(max-width: 768px) 100vw, 50vw" মানে ইমেজটি মোবাইলে ভিউপোর্টের ১০০% এবং বড় স্ক্রিনে ৫০% জায়গা নেয়। দ্বিতীয়ত, এটি সেই CSS প্রস্থকে স্ক্রিনের ডিভাইস পিক্সেল রেশিও (একটি স্ট্যান্ডার্ড মনিটরে ১×, বেশিরভাগ আধুনিক ফোনে ২×, উচ্চ-মানের অ্যান্ড্রয়েড ডিভাইসে ৩×) দিয়ে গুণ করে প্রয়োজনীয় লক্ষ্য পিক্সেল সংখ্যা বের করে। তৃতীয়ত, এটি srcset তালিকা স্ক্যান করে এবং যে প্রার্থীর প্রস্থ ডেসক্রিপ্টর (w) সেই লক্ষ্যের সবচেয়ে কাছাকাছি অথচ তার নিচে নয়, তা ডাউনলোড করে।
এই পুরো গণনাটি একটি বাইটও ইমেজ ডেটা আনার আগেই ঘটে, যে কারণে দক্ষতার জন্য sizes ইঙ্গিতটি গুরুত্বপূর্ণ — এটি বাদ দিলে ব্রাউজার ধরে নেয় ইমেজটি ১০০vw চওড়া, যা প্রায় সবসময় ডেস্কটপ বা ট্যাবলেট লেআউটে প্রয়োজনের চেয়ে অনেক বড় ফাইল আনতে বাধ্য করে। প্রস্থ ডেসক্রিপ্টর (w) ফ্লুইড, লেআউট-চালিত ইমেজের জন্য সঠিক পছন্দ কারণ এগুলো ব্রাউজারকে লেআউট প্রস্থ এবং পিক্সেল ডেনসিটি দুটোই গতিশীলভাবে হিসাব করতে দেয়। ডেনসিটি ডেসক্রিপ্টর (x) নির্দিষ্ট-আকারের UI এলিমেন্টের জন্য সঠিক পছন্দ — একটি ৪৮ পিক্সেলের আইকন যা রেটিনা স্ক্রিনে স্পষ্ট দেখাতে হবে তার শুধু icon.png 1x, icon@2x.png 2x-ই লাগে। একটি একক srcset অ্যাট্রিবিউটে দুই ধরনের ডেসক্রিপ্টর মেশানো অবৈধ HTML।
একটি গুরুত্বপূর্ণ সূক্ষ্ম বিষয়: স্পেসিফিকেশন স্পষ্টভাবে ব্রাউজারকে প্রয়োজনের চেয়ে বড় একটি ইমেজ পরিবেশন করার অনুমতি দেয় যদি সেটি ইতিমধ্যে ক্যাশে থাকে। একটি ব্রাউজার যা একটি প্রশস্ত ভিউপোর্টের জন্য ১২৮০w ভার্সন ডাউনলোড করেছিল, তা উইন্ডো মোবাইলে রিসাইজ হলে ৬৪০w ফাইলটি আবার ডাউনলোড না করে সেটিই পুনরায় ব্যবহার করতে পারে। এটি ইচ্ছাকৃত আচরণ — আপনি ইঙ্গিত দিচ্ছেন, নির্দেশ নয় — যার মানে সব টেস্টিং পরিস্থিতিতে আপনি ফাইল সুইচিং নাও দেখতে পারেন।
আধুনিক ইমেজ ফরম্যাট: JPEG, PNG, WebP, AVIF এবং JPEG XL-এর তুলনা
JPEG (Joint Photographic Experts Group, ১৯৯২) হলো বেসলাইন: ৮-বিট রঙ এবং কোনো স্বচ্ছতা সাপোর্ট ছাড়া লসি কম্প্রেশন, ফটোগ্রাফের জন্য চমৎকার যেখানে সামান্য কোয়ালিটি হারানো অলক্ষণীয়। PNG (১৯৯৬) লসলেস কম্প্রেশন ব্যবহার করে এবং একটি আলফা চ্যানেলের মাধ্যমে পূর্ণ স্বচ্ছতা সাপোর্ট করে, যা লোগো, আইকন, স্ক্রিনশট, এবং সমতল রং বা ধারালো কিনারাযুক্ত যেকোনো গ্রাফিকের জন্য সঠিক পছন্দ করে তোলে যেখানে কম্প্রেশন আর্টিফ্যাক্ট দৃশ্যমান হতো। কোনো ফরম্যাটই আধুনিক ডেলিভারি প্রয়োজনের সাথে বিশেষভাবে ভালোভাবে খাপ খায় না — JPEG ফাইল প্রায়ই প্রয়োজনের চেয়ে বড় হয়, আর ফটোগ্রাফের জন্য PNG ফাইল বিশাল।
WebP (Google, ২০১০) লসি ও লসলেস দুই মোডই সাপোর্ট করে সাথে স্বচ্ছতাও, এবং সমতুল্য অনুভূত কোয়ালিটিতে JPEG-এর চেয়ে প্রায় ২৫–৩৪% ছোট ফাইল দেয়। ২০২০ সাল থেকে Chrome, Firefox, Edge, এবং Safari জুড়ে এটি পূর্ণ ব্রাউজার সাপোর্ট পেয়েছে, যা আজকের নতুন প্রজেক্টের জন্য এটিকে ব্যবহারিক ডিফল্ট করে তুলেছে। AVIF (AV1 Image File Format, ২০১৯) কম্প্রেশনকে আরও এগিয়ে নেয় — সাধারণত একই কোয়ালিটিতে JPEG-এর চেয়ে ৫০% ছোট — এবং একইভাবে স্বচ্ছতা এবং HDR ওয়াইড-কালার সাপোর্ট করে। Chrome, Firefox, এবং Safari সবাই ২০২৩ সাল থেকে এটি সাপোর্ট করে, যদিও এনকোডিং ধীর এবং কিছু কালার-প্রোফাইল এজ কেস পরীক্ষা করা উচিত। আধুনিক প্যাটার্নটি হলো একটি <picture> এলিমেন্টের ভেতরে প্রথমে AVIF, দ্বিতীয়ে WebP এবং শেষ fallback হিসেবে JPEG দেওয়া, যাতে প্রতিটি ব্রাউজার সে যা বোঝে তার মধ্যে সবচেয়ে ছোট ফরম্যাটটি পায়।
JPEG XL (২০২২ ISO স্ট্যান্ডার্ড) AVIF-এর চেয়েও ভালো কম্প্রেশন, লসলেস JPEG রিকম্প্রেশন (আপনি একটি JXL ফাইলের ভেতরে আসল বিটগুলো সংরক্ষণ করতে পারেন), এবং চমৎকার প্রগ্রেসিভ ডিকোডিংয়ের প্রতিশ্রুতি দেয়। তবে, ২০২৪ পর্যন্ত ব্রাউজার সাপোর্ট সীমিত রয়ে গেছে — Chrome তার এক্সপেরিমেন্টাল ফ্ল্যাগ সরিয়ে ফেলেছে এবং Chromium-এ এই ফরম্যাটের ভবিষ্যৎ অনিশ্চিত, যদিও Firefox এবং Safari সাপোর্ট যোগ করেছে। আজকের প্রোডাকশন ব্যবহারের জন্য, WebP এবং AVIF নিরাপদ পছন্দ; JPEG XL এমন একটি বিষয় যা নজরে রাখার মতো।
<picture> এলিমেন্ট: আর্ট ডিরেকশন এবং ফরম্যাট সুইচিং
<picture> এলিমেন্টটি দুটি সমস্যা সমাধান করে যা <img>-এর সাধারণ srcset সমাধান করতে পারে না। প্রথমটি হলো আর্ট ডিরেকশন: মোবাইলে একটি টাইট ক্রপ করা পোর্ট্রেট এবং ডেস্কটপে একটি প্রশস্ত ল্যান্ডস্কেপ কম্পোজিশন দেখানো। প্রতিটি <source> চাইল্ড এলিমেন্ট একটি media অ্যাট্রিবিউট গ্রহণ করে — <source media="(max-width: 600px)" srcset="portrait-400.jpg 400w, portrait-800.jpg 800w"> — এবং ব্রাউজার প্রথম সোর্সটি লোড করে যার মিডিয়া কন্ডিশন মিলে যায়, শেষে সাধারণ <img>-এ fallback করে। এটি srcset রেজোলিউশন সুইচিং থেকে মৌলিকভাবে ভিন্ন: আপনি কোন ইমেজ লোড হবে তা নির্ধারণ করছেন, ব্রাউজারের বিবেচনার ওপর ছেড়ে দিচ্ছেন না।
দ্বিতীয় সমস্যাটি হলো গ্রেসফুল ডিগ্রেডেশনসহ ফরম্যাট সুইচিং। একটি <source> এলিমেন্টের type অ্যাট্রিবিউট ব্রাউজারকে বলে ফাইলগুলো কোন MIME টাইপের: <source type="image/avif" srcset="hero.avif 1280w, hero-640.avif 640w">। ব্রাউজার প্রতিটি সোর্স ক্রমানুসারে চেষ্টা করে এবং সে যে ফরম্যাটটি প্রথম সাপোর্ট করে সেটি ব্যবহার করে, তাই আদর্শ আধুনিক প্যাটার্নটি হলো: AVIF সোর্স → WebP সোর্স → JPEG/PNG <img> fallback। এটি AVIF সাপোর্ট ছাড়া ব্রাউজারকে একটি ছোট WebP দেয়, আর WebP ছাড়া ব্রাউজারকে (আজ প্রায় কেউই নেই, কিন্তু পুরনো iOS Safari) JPEG দেয়। <img> ট্যাগটি সবসময় প্রয়োজন <picture>-এর শেষ চাইল্ড হিসেবে — এটিই আসলে রেন্ডার হয় এবং alt, width, height, loading, এবং fetchpriority বহন করে; <source> এলিমেন্টগুলো শুধু বিকল্প প্রার্থী দেয়।
আপনি দুই কৌশলই একসাথে ব্যবহার করতে পারেন: আর্ট-ডিরেক্টেড সোর্সগুলো প্রতিটি রেজোলিউশন সুইচিংয়ের জন্য নিজস্ব srcset বহন করতে পারে, তাই একটি মোবাইল পোর্ট্রেট সোর্সে 400w, 800w এবং 1200w ভার্সন তালিকাভুক্ত থাকতে পারে, যেখানে একটি ডেস্কটপ ল্যান্ডস্কেপ সোর্সে 800w, 1280w এবং 1920w ভার্সন থাকতে পারে। মার্কআপটি দ্রুতই দীর্ঘ হয়ে যায়, ঠিক এই কারণেই জেনারেটর তৈরি করা হয়।
Core Web Vitals: LCP, CLS এবং রেসপনসিভ ইমেজের প্রভাব
Largest Contentful Paint (LCP) নেভিগেশন শুরু থেকে ব্রাউজার সবচেয়ে বড় দৃশ্যমান এলিমেন্ট রেন্ডার করা পর্যন্ত সময় মাপে — প্রায় সবসময় এটি একটি হিরো বা উপরের-ফোল্ডের ইমেজ। Google LCP-কে একটি র্যাঙ্কিং সিগন্যাল হিসেবে ব্যবহার করে: ২.৫ সেকেন্ডের নিচে একটি স্কোর 'ভালো', ৪ সেকেন্ডের ওপরে 'খারাপ'। একটি ৩৭৫px মোবাইল স্ক্রিনে একটি ১৪০০ px ইমেজ পরিবেশন করা ব্রাউজারকে প্রয়োজনের চেয়ে প্রায় বারো গুণ বেশি ডেটা ডাউনলোড করতে বাধ্য করে; একটি সঠিকভাবে তৈরি srcset সেই ট্রান্সফারটিকে ৪০০ px ফাইলে কমিয়ে দেয় এবং মোবাইলে LCP-কে এক সেকেন্ড বা তার বেশি কমাতে পারে। আপনার srcset-এ যোগ করা প্রতিটি প্রস্থ সেই রেঞ্জে পড়া ডিভাইসে একটি সম্ভাব্য LCP উন্নতি।
দুটি অ্যাট্রিবিউট বিশেষভাবে LCP ইমেজের জন্য গুরুত্বপূর্ণ। fetchpriority="high" ব্রাউজারকে বলে এটিকে সর্বোচ্চ নেটওয়ার্ক প্রায়োরিটিতে অনুরোধ করতে, পার্সিংয়ে পরে আবিষ্কৃত অন্যান্য রিসোর্সের আগে। এবং আপনার LCP ইমেজে কখনো loading="lazy" যোগ করা উচিত নয় — লেজি লোডিং এলিমেন্টটি ভিউপোর্টের কাছাকাছি না আসা পর্যন্ত ফেচ পিছিয়ে দেয়, যা একটি উপরের-ফোল্ডের হিরোর জন্য মানে যেকোনো ডাউনলোড শুরুর আগে একটি নিশ্চিত বিলম্ব। অন্য সব ইমেজের জন্য — যা কিছু স্ক্রিনের বাইরে শুরু হয় — loading="lazy" একটি বিনামূল্যের জয়: ব্যবহারকারী কাছাকাছি স্ক্রল না করা পর্যন্ত ব্রাউজার সেই ফেচগুলো সম্পূর্ণভাবে এড়িয়ে যায়, যা গুরুত্বপূর্ণ লোডিং উইন্ডোর সময় পেজের ওজন এবং নেটওয়ার্ক প্রতিযোগিতা দুটোই কমায়।
Cumulative Layout Shift (CLS) হলো অন্য ইমেজ-সম্পর্কিত Core Web Vital। যখন একটি ব্রাউজার তার মাত্রা না জেনেই একটি ইমেজ লোড করে, তখন ইমেজটি এসে পৌঁছালে পেজকে আবার রি-ফ্লো করতে হয়, কন্টেন্টকে নিচে ঠেলে দিয়ে CLS তৈরি করে। সমাধানটি সহজ কিন্তু ভুলে যাওয়া সহজ: আপনার <img> ট্যাগে সবসময় width এবং height অ্যাট্রিবিউট অন্তর্ভুক্ত করুন। আধুনিক ব্রাউজার ইমেজ লোড হওয়ার আগেই লেআউটে জায়গা সংরক্ষণ করতে এগুলো ব্যবহার করে, শিফট দূর করে। আপনার ইমেজ যদি ফ্লুইড হয় (CSS max-width: 100% দিয়ে স্কেল করা), আপনার স্টাইলশিটে height: auto যোগ করুন যাতে ব্রাউজার একটি নির্দিষ্ট পিক্সেল উচ্চতায় লক না করে HTML অ্যাট্রিবিউট থেকে অন্তর্নিহিত অ্যাসপেক্ট রেশিও ব্যবহার করে। এই সমন্বয়টি — HTML মাত্রা এবং CSS-এ height: auto — রেসপনসিভ ইমেজের জন্য স্ট্যান্ডার্ড CLS সমাধান।
Frequently asked questions
srcset কী এবং এটি কী করে?
srcset অ্যাট্রিবিউট আপনাকে একই ইমেজের বিভিন্ন প্রস্থে একাধিক ভার্সন তালিকাভুক্ত করতে দেয় যাতে ব্রাউজার ডিভাইসের জন্য সবচেয়ে উপযুক্তটি ডাউনলোড করতে পারে। প্রতিটি ভিজিটরকে একটি বড় ফাইল পাঠানোর বদলে, আপনি লেখেন srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" আর ব্রাউজার সবচেয়ে ছোট ইমেজটি বেছে নেয় যা এখনও স্পষ্ট দেখায় — ফোনে ব্যান্ডউইথ বাঁচায় এবং রেটিনা ল্যাপটপে ক্রিস্প ইমেজ পরিবেশন করে, সবকিছুই কোনো জাভাস্ক্রিপ্ট ছাড়াই।
srcset কখন ব্যবহার করব?
যখনই একটি ইমেজ ভিন্ন স্ক্রিনে ভিন্ন আকারে দেখানো হয় — হিরো ব্যানার, আর্টিকেল ইমেজ, প্রোডাক্ট ফটো, যেকোনো ফ্লুইড জিনিস — তখন srcset ব্যবহার করুন। এটি রেজোলিউশন সুইচিংয়ের জন্য সঠিক টুল: একই ছবি, শুধু বড় বা ছোট। যদি নির্দিষ্ট ব্রেকপয়েন্টে ক্রপ বা আসল ইমেজ পরিবর্তন করতে হয় (আর্ট ডিরেকশন), picture এলিমেন্টের দিকে যান। ছোট, নির্দিষ্ট-আকারের আইকন ও লোগোর srcset একদমই প্রয়োজন নেই।
srcset এবং sizes একসাথে কীভাবে ব্যবহার করব?
srcset ফাইল ও তাদের আসল পিক্সেল প্রস্থ তালিকাভুক্ত করে (640w মানে ফাইলটি ৬৪০ পিক্সেল চওড়া); sizes ব্রাউজারকে বলে লেআউট হিসাব হওয়ার আগে ইমেজটি কতটা চওড়া দেখানো হবে। একসাথে: srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px"। ব্রাউজার sizes পড়ে — '৬০০px-এর নিচে পূর্ণ ভিউপোর্ট প্রস্থ, নয়তো ৬০০px' — প্রয়োজনীয় পিক্সেল (ডিসপ্লে প্রস্থ × ডিভাইস পিক্সেল রেশিও) হিসাব করে, তারপর সবচেয়ে কাছের srcset প্রার্থীটি বেছে নেয়। এই টুল আপনার জন্য দুটোই লিখে দেয়।
srcset বনাম sizes — পার্থক্য কী?
এরা একই ট্যাগে ভিন্ন কাজ করে। srcset হলো তাদের প্রস্থসহ উপলব্ধ ইমেজ ফাইলের মেনু; sizes হলো আপনার লেআউটে প্রতিটি ব্রেকপয়েন্টে ইমেজটি কতটা জায়গা নেয় তার ইঙ্গিত। ব্রাউজার দুটোকে একত্রিত করে: sizes CSS প্রস্থ দেয়, এটি স্ক্রিনের পিক্সেল ডেনসিটি দিয়ে গুণ করে, তারপর সেই সংখ্যার কাছাকাছি srcset ফাইলটি বেছে নেয়। sizes বাদ দিলে ব্রাউজার ধরে নেয় ইমেজটি ১০০vw পূর্ণ করে, যা প্রায়ই প্রয়োজনের চেয়ে বড় ফাইল ডাউনলোড করায়।
srcset এবং picture এলিমেন্টের মধ্যে পার্থক্য কী?
একটি সাধারণ img-এ srcset রেজোলিউশন সুইচিং করে — একই ইমেজ, ভিন্ন আকার, ব্রাউজারের পছন্দ। picture এলিমেন্টটি একাধিক source ট্যাগ মুড়ে নিয়ন্ত্রণ আপনার হাতে দেয়: আপনি একটি ব্রেকপয়েন্টে ভিন্ন ক্রপে সুইচ করতে পারেন (আর্ট ডিরেকশন) অথবা JPEG fallback সহ AVIF ও WebP-এর মতো আধুনিক ফরম্যাট দিতে পারেন। একই ইমেজ ভিন্ন আকারে → srcset ব্যবহার করুন; ভিন্ন ইমেজ, ক্রপ, বা ফরম্যাট → picture ব্যবহার করুন। এই জেনারেটরটি দুটোই তৈরি করে।
image ট্যাগ এবং srcset-এর মধ্যে পার্থক্য কী?
image ট্যাগ (img) হলো এলিমেন্ট; srcset হলো একটি অ্যাট্রিবিউট যা আপনি এতে যোগ করেন। একটি খালি img src="photo.jpg" সবসময় একটি নির্দিষ্ট ফাইল লোড করে। srcset (এবং sizes) যোগ করলে সেই একই img একটি রেসপনসিভ ইমেজে পরিণত হয় যা একাধিক ফাইলের মধ্যে বেছে নিতে পারে। আপনি একটি বা অন্যটি বেছে নিচ্ছেন না — srcset হলো আপনি ইতিমধ্যে ব্যবহার করা img ট্যাগের একটি আপগ্রেড।
w ডেসক্রিপ্টর এবং x ডেসক্রিপ্টরের মধ্যে পার্থক্য কী?
w ডেসক্রিপ্টর প্রতিটি ফাইলের আসল প্রস্থ পিক্সেলে বর্ণনা করে — image-640.jpg 640w — এবং এটি sizes-এর সাথে জোড়া লাগাতে হয়; তারপর ব্রাউজার যেকোনো স্ক্রিনের জন্য গণিতটি করে। x ডেসক্রিপ্টর শুধু পিক্সেল ডেনসিটি বর্ণনা করে — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — এবং একটি লোগোর মতো নির্দিষ্ট-আকারের ইমেজের জন্য উপযুক্ত যেটির শুধু রেটিনা স্ক্রিনে স্পষ্ট দেখানো দরকার। ফ্লুইড, লেআউট-চালিত ইমেজের জন্য w এবং নির্দিষ্ট-মাত্রার জন্য x ব্যবহার করুন। ওপরের ডেসক্রিপ্টর টগল দিয়ে এদের মধ্যে পরিবর্তন করুন।
sizes অ্যাট্রিবিউট কীভাবে লিখব?
sizes হলো 'মিডিয়া-কন্ডিশন স্লট-প্রস্থ' জোড়ার একটি কমা-বিভক্ত তালিকা, যা একটি খালি ডিফল্ট দিয়ে শেষ হয়। মোবাইলে পূর্ণ প্রস্থ এবং ডেস্কটপে একটি নির্দিষ্ট ৬০০px ইমেজের জন্য: (max-width: 600px) 100vw, 600px। প্রস্থ vw, px, em, বা calc() হতে পারে। ব্রাউজার প্রথম মিলে যাওয়া কন্ডিশনটি ব্যবহার করে, তাই সবচেয়ে ছোট স্ক্রিন থেকে সবচেয়ে বড় পর্যন্ত ক্রমে সাজান। ওপরের sizes বিল্ডার সাধারণ সারিগুলোকে স্বয়ংক্রিয়ভাবে এই স্ট্রিংয়ে রূপান্তর করে।
WebP এবং AVIF কীভাবে একটি fallback সহ পরিবেশন করব?
প্রতিটি আধুনিক ফরম্যাটের জন্য একটি source এবং fallback হিসেবে একটি সাধারণ img সহ picture ব্যবহার করুন: source type="image/avif" srcset="…", তারপর source type="image/webp" srcset="…", তারপর img src="hero.jpg" …। ব্রাউজার প্রথম যে ফরম্যাটটি সাপোর্ট করে সেটি ব্যবহার করে এবং কোনোটাই না বুঝলে JPEG বা PNG img-এ fallback করে — তাই পুরনো ব্রাউজারও একটি ইমেজ পায়। picture মোডে AVIF এবং WebP চালু করুন আর এই টুলটি পুরো ব্লকটি, ডেসক্রিপ্টরসহ, লিখে দেবে।
আমার কোন ইমেজ প্রস্থগুলো তৈরি করা উচিত?
একটি ভালো সাধারণ-উদ্দেশ্যের সেট হলো ৩২০, ৬৪০, ৯৬০, ১২৮০ এবং ১৯২০ — ছোট ফোন থেকে বড় রেটিনা স্ক্রিন পর্যন্ত কভার করে — প্রতিটি ধাপে মোটামুটি দ্বিগুণ করে। ফুল-ব্লিড হিরো ইমেজের জন্য ২৫৬০ যোগ করুন; যে কন্টেন্ট কখনো, ধরুন, ৮০০px-এর বেশি চওড়া হয় না, তার জন্য প্রায় ১৬০০-এর (রেটিনার জন্য ৮০০ × ২) বেশি চওড়া কিছুর দরকার নেই। এত বেশি তৈরি করবেন না যে ধাপগুলো অর্থহীন হয়ে যায়; চার থেকে ছয়টি প্রস্থই সাধারণত যথেষ্ট। ওপরের ব্রেকপয়েন্ট চিপগুলো এক ক্লিকে এই সাধারণ প্রস্থগুলো যোগ করে।
আমার srcset কেন কাজ করছে না?
সাধারণ কারণগুলো: (১) আপনি এমন একটি স্ক্রিনে টেস্ট করছেন যেখানে ব্রাউজার সঠিকভাবেই সিদ্ধান্ত নিয়েছে সবচেয়ে বড় ফাইলটির দরকার নেই — সুইচিং দেখতে উইন্ডো রিসাইজ করুন বা ধীর সংযোগে থ্রটল করুন; (২) sizes অনুপস্থিত বা ভুল, তাই ব্রাউজার ১০০vw ধরে নেয় এবং একটি বড় ফাইল নেয়; (৩) তালিকাভুক্ত ফাইলগুলো আসলে সেই পাথে নেই (Network ট্যাবে 404 চেক করুন); (৪) ক্যাশিং ইতিমধ্যে ডাউনলোড করা একটি সাইজ পরিবেশন করছে। srcset একটি ইঙ্গিত, আর ব্রাউজারের একটি বড়, ক্যাশ করা ইমেজ বেছে নেওয়ার অনুমতি আছে — এটি ইচ্ছাকৃতভাবে করা হয়েছে।
image-set() কীভাবে ব্যবহার করব?
image-set() হলো ব্যাকগ্রাউন্ড ইমেজের জন্য srcset-এর CSS সমতুল্য। background: url(bg.jpg)-এর বদলে, আপনি লেখেন background-image: image-set("bg.webp" type("image/webp") 1x, "bg@2x.webp" type("image/webp") 2x)। এটি CSS ব্যাকগ্রাউন্ডকে রেজোলিউশন ও ফরম্যাট অনুযায়ী বেছে নিতে দেয় ঠিক যেমন img srcset কন্টেন্ট ইমেজের জন্য করে। এটি সাজসজ্জামূলক ব্যাকগ্রাউন্ডের জন্য ব্যবহার করুন; alt টেক্সট দরকার এমন অর্থবহ কন্টেন্ট ইমেজের জন্য এই টুলের img/picture মার্কআপ ব্যবহার করুন।
রেসপনসিভ ইমেজ কি SEO এবং Core Web Vitals-এ সাহায্য করে?
হ্যাঁ — সরাসরি। একটি বিশাল ফাইলের বদলে সঠিক-আকারের ইমেজ পরিবেশন করলে বাইট কমে এবং Largest Contentful Paint (LCP) দ্রুত হয়, যা একটি Core Web Vital যা Google র্যাঙ্কিংয়ের জন্য ব্যবহার করে। width এবং height যোগ করলে লেআউট শিফট (CLS) প্রতিরোধ হয়। দ্রুত পেজ ক্রল দক্ষতা এবং এনগেজমেন্টও উন্নত করে। রেসপনসিভ srcset/sizes মার্কআপ এবং WebP ও AVIF-এর মতো আধুনিক ফরম্যাটের সমন্বয় হলো আপনি যে সবচেয়ে বেশি-প্রভাবশালী, সবচেয়ে কম-পরিশ্রমের পেজ-স্পিড জয়গুলোর একটি করতে পারেন।
রেসপনসিভ ইমেজ কীভাবে লেজি-লোড করব, এবং এই টুলটি কি প্রাইভেট?
loading="lazy" যোগ করুন যাতে স্ক্রিনের বাইরের ইমেজ শুধু ব্যবহারকারী স্ক্রল করলেই লোড হয়, এবং decoding="async" যোগ করুন যাতে ডিকোডিং রেন্ডারিং ব্লক না করে — এখানে দুটোই ডিফল্টভাবে চালু থাকে (আপনার উপরের-ফোল্ডের হিরোর জন্য lazy বন্ধ রাখুন আর তার বদলে fetchpriority="high" যোগ করুন)। প্রাইভেসির ব্যাপারে: এই srcset জেনারেটরটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে। আপনার ফাইলের নাম, সেটিংস, এবং রিসাইজ করতে যেকোনো ইমেজ কখনো আপনার ডিভাইস ছেড়ে যায় না — একবার পেজ লোড হয়ে গেলে এটি অফলাইনেও কাজ করে।
এটি Squoosh বা Responsivebreakpoints.com-এর সাথে কীভাবে তুলনীয়?
Google-এর Squoosh একক-ইমেজ কম্প্রেশন ও ফরম্যাট রূপান্তরের জন্য দারুণ কিন্তু srcset মার্কআপ তৈরি করে না বা একটি পূর্ণ রেসপনসিভ ইমেজ ট্যাগও তৈরি করে না। Cloudinary-র Responsivebreakpoints.com sizes তৈরি করতে আপনার ইমেজ Cloudinary-র সার্ভারে আপলোড করে — আপনি যদি ইতিমধ্যে Cloudinary ব্যবহার করেন তাহলে উপযোগী, কিন্তু আপনার ইমেজ আপনার মেশিন ছেড়ে যায়। UtiloKit-এর srcset জেনারেটর সম্পূর্ণ মার্কআপ তৈরি করে এবং কোনো আপলোড ছাড়াই ব্রাউজারে স্থানীয়ভাবে ইমেজ রিসাইজ করতে পারে। কোনো অ্যাকাউন্ট নেই, কোনো সার্ভার নেই, কোনো ফাইল-সাইজ সীমা নেই।
Related tools
সব টুল দেখুন
নতুন JSON Escape / Unescape
কাঁচা টেক্সটকে JSON-নিরাপদ স্ট্রিংয়ে escape করুন এবং আবার unescape করুন।
নতুন HTTP স্ট্যাটাস কোড
সহজ ভাষায় অর্থ সহ HTTP স্ট্যাটাস কোডের অনুসন্ধানযোগ্য রেফারেন্স।
নতুন Regex চিটশিট
regular expression টোকেন ও ফ্ল্যাগের অনুসন্ধানযোগ্য রেফারেন্স।
নতুন ASCII টেবিল
দশমিক, hex, অক্টাল ও বাইনারিতে অনুসন্ধানযোগ্য অক্ষর কোড।
নতুন PX থেকে REM কনভার্টার
একটি root font size-এর বিপরীতে px, rem, em ও pt-এর মধ্যে রূপান্তর করুন।
নতুন স্প্রেডশিট কলাম কনভার্টার
একটি স্প্রেডশিট কলাম নম্বরকে তার অক্ষরে (1 → A) ও আবার ফিরিয়ে রূপান্তর করুন।