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