প্রকাশিত: 8 অক্টোবর, 2025
ইমেজ ডাউনলোডের সময় কমিয়ে পৃষ্ঠা এবং LCP এর অনুভূত লোড সময় উন্নত করতে পারে।
কিভাবে অন্তর্দৃষ্টি ব্যর্থ হয়
অন্তর্দৃষ্টি অপ্রয়োজনীয়ভাবে বড় ডাউনলোড আকার আছে এমন ছবিগুলিকে হাইলাইট করবে৷ আনুমানিক বাইট সঞ্চয় চিত্র বিন্যাসের জন্য একটি দক্ষ বাইট/পিক্সেল অনুপাতের সাথে চিত্রের ডাউনলোড আকারের তুলনা করে গণনা করা হয়।
কিভাবে ইমেজ ডাউনলোডের সময় উন্নত করা যায়
চিত্রের প্রদর্শিত আকার এবং ফাইল বিন্যাসের উপর নির্ভর করে চিত্র ডাউনলোডের সময় উন্নত করার জন্য এই অন্তর্দৃষ্টি দ্বারা প্রস্তাবিত বেশ কয়েকটি কৌশল রয়েছে। একটি চিত্র CDN স্থাপন করা এই সমস্ত কৌশলগুলির জন্য অত্যন্ত সহায়ক হতে পারে।
ইমেজ কম্প্রেশন ফ্যাক্টর বৃদ্ধি
বেশিরভাগ ইমেজ ফরম্যাট একটি কম্প্রেশন লেভেল সমর্থন করে যেটি ছবির মানের খরচে ইমেজ ফাইল সাইজ উন্নত করতে টিউন করা যেতে পারে। আপনি ইমেজ কম্প্রেশন ফ্যাক্টর অপ্টিমাইজ করতে ImageOptim , Squosh এবং Imagemin এর মত ইমেজ টুল ব্যবহার করতে পারেন।
আধুনিক চিত্র বিন্যাস ব্যবহার করুন
AVIF এবং WebP হল ইমেজ ফরম্যাট যা তাদের পুরানো JPEG এবং PNG পার্টনারের তুলনায় উচ্চতর কম্প্রেশন এবং মানের বৈশিষ্ট্য রয়েছে। এই নতুন ফরম্যাটে আপনার ছবিগুলিকে এনকোড করা ছবিগুলির ডাউনলোড আকার কমাতে একটি ভাল কৌশল৷
AVIF সমস্ত প্রধান ব্রাউজারগুলির সর্বশেষ সংস্করণে সমর্থিত এবং একই মানের সেটিংস সহ অন্যান্য বিন্যাসের তুলনায় ছোট ফাইলের আকার অফার করে। AVIF সম্পর্কে আরও জানতে AVIF ইমেজ কোডল্যাব পরিবেশন করা দেখুন।
WebP সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত এবং ওয়েবে ছবিগুলির জন্য আরও ভাল ক্ষতিকর এবং ক্ষতিহীন কম্প্রেশন প্রদান করে। WebP-এ আরও জানতে WebP ছবি ব্যবহার করুন দেখুন।
অ্যানিমেটেড কন্টেন্টের জন্য ভিডিও ফরম্যাট ব্যবহার করুন
ভিডিওর তুলনায় অ্যানিমেটেড কন্টেন্ট প্রদানের জন্য বড় GIF গুলি অদক্ষ। নেটওয়ার্ক বাইট সংরক্ষণ করতে GIF এর পরিবর্তে অ্যানিমেশনের জন্য MPEG4/WebM ভিডিও এবং স্ট্যাটিক ছবির জন্য PNG/WebP ব্যবহার করার কথা বিবেচনা করুন।
কিভাবে ভিডিওর সাথে GIF ছবি প্রতিস্থাপন করতে হয় তা শিখতে দ্রুত পৃষ্ঠা লোডের জন্য ভিডিওর সাথে অ্যানিমেটেড GIFs প্রতিস্থাপন দেখুন।
প্রতিক্রিয়াশীল আকারের সাথে ছবি পরিবেশন করুন
আদর্শভাবে, আপনার পৃষ্ঠাটি কখনই ব্যবহারকারীর স্ক্রিনে রেন্ডার করা সংস্করণের চেয়ে বড় চিত্রগুলি পরিবেশন করা উচিত নয়। এর থেকে বড় যেকোন কিছুর ফলে বাইট নষ্ট হয় এবং পৃষ্ঠা লোডের সময় কমে যায়।
একটি কৌশল হল ভেক্টর-ভিত্তিক ইমেজ ফরম্যাট ব্যবহার করা, যেমন SVG। একটি সীমিত পরিমাণ কোড সহ, একটি SVG চিত্র যেকোন আকারে স্কেল করতে পারে। আরও জানতে SVG দিয়ে জটিল আইকন প্রতিস্থাপন দেখুন।
যদি ভেক্টর-ভিত্তিক চিত্রগুলি একটি বিকল্প না হয় তবে "প্রতিক্রিয়াশীল" চিত্রগুলি পরিবেশন করা ভাল। প্রতিক্রিয়াশীল চিত্রগুলির সাথে, আপনি প্রতিটি চিত্রের একাধিক সংস্করণ তৈরি করেন এবং তারপরে মিডিয়া ক্যোয়ারী, ভিউপোর্টের মাত্রা ইত্যাদি ব্যবহার করে আপনার HTML বা CSS-এ কোন সংস্করণ ব্যবহার করবেন তা নির্দিষ্ট করুন৷
উদাহরণস্বরূপ, <img> উপাদানটিতে srcset এবং sizes বৈশিষ্ট্য রয়েছে যা বিভিন্ন আকারের জন্য চিত্র URL নির্দিষ্ট করতে পারে:
আপনি যদি ছবিটি সম্পূর্ণভাবে পরিবর্তন করতে চান তাহলে আপনি <picture> উপাদানটি ব্যবহার করতে পারেন:
আরও জানতে প্রতিক্রিয়াশীল ছবি এবং ছবির উপাদান দেখুন।
স্ট্যাক-নির্দিষ্ট নির্দেশিকা
এই অন্তর্দৃষ্টি নিম্নলিখিত প্রযুক্তিগুলি ব্যবহার করে পৃষ্ঠাগুলির জন্য স্ট্যাক-নির্দিষ্ট নির্দেশিকাও অফার করে:
এএমপি
- অন্যান্য ব্রাউজারগুলির জন্য একটি উপযুক্ত ফলব্যাক নির্দিষ্ট করার সময় WebP ফর্ম্যাটে সমস্ত
amp-imgউপাদানগুলি প্রদর্শন করার কথা বিবেচনা করুন৷ - অ্যানিমেটেড কন্টেন্টের জন্য, কন্টেন্ট অফস্ক্রিন হলে CPU ব্যবহার কমাতে
amp-animব্যবহার করুন।
ড্রুপাল
- একটি মডিউল ব্যবহার করার কথা বিবেচনা করুন যা স্বয়ংক্রিয়ভাবে অপ্টিমাইজ করে এবং গুণমান বজায় রেখে সাইটের মাধ্যমে আপলোড করা চিত্রগুলির আকার হ্রাস করে৷
- সাইটে রেন্ডার করা সমস্ত ছবির জন্য আপনি Drupal থেকে প্রদত্ত বিল্ট-ইন রেসপন্সিভ ইমেজ স্টাইল ব্যবহার করছেন তা নিশ্চিত করুন।
জুমলা
একটি প্লাগইন বা পরিষেবা ব্যবহার করার কথা বিবেচনা করুন যা স্বয়ংক্রিয়ভাবে আপনার আপলোড করা ছবিগুলিকে সর্বোত্তম ফর্ম্যাটে রূপান্তর করবে৷
ম্যাজেন্টো
একটি তৃতীয় পক্ষের Magento এক্সটেনশন ব্যবহার করার কথা বিবেচনা করুন যা ছবিগুলিকে অপ্টিমাইজ করে ৷
ওয়ার্ডপ্রেস
একটি ইমেজ অপ্টিমাইজেশান ওয়ার্ডপ্রেস প্লাগইন ব্যবহার করার কথা বিবেচনা করুন যা গুণমান বজায় রেখে আপনার ছবিগুলিকে সংকুচিত করে।