ছবির সঠিক সাইজ নির্ধারণের সহজ নিয়ম

ছবিটি সবচেয়ে বড় যে সাইজে রেন্ডার হয় তা পরিমাপ করুন, হাই ডেনসিটি স্ক্রিনের জন্য এটি দ্বিগুণ করুন এবং আপনার লাইব্রেরির ছবিগুলোর সাইজ সেই সংখ্যায় পরিবর্তন করুন। একটি 800 পিক্সেলের স্লটে 4000 পিক্সেলের ছবি ব্যবহার করার অর্থ হলো ব্রাউজারটি ডিসপ্লে করার ক্ষমতার চেয়ে প্রায় 25 গুণ বেশি পিক্সেল ডেটা ডাউনলোড করে এবং বাকিটা ফেলে দেয়।

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

কেন অতিরিক্ত বড় সাইজের ছবি এত ক্ষতিকর

ফাইলের সাইজ পিক্সেল সংখ্যার ওপর নির্ভর করে, তাই প্রস্থ এবং উচ্চতা অর্ধেক করলে প্রায় 75 শতাংশ ডেটা কমে যায়। এদের সম্পর্কটি সরলৈখিক না হয়ে দ্বিঘাত (quadratic), যে কারণে ডেটার অপচয় খুব দ্রুত বৃদ্ধি পায়।

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

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

আপনার লাইভ পেজের ছবিতে রাইট ক্লিক করুন, Inspect নির্বাচন করুন এবং মূল সাইজের বদলে প্রদর্শিত সাইজটি দেখুন। ব্রাউজার উভয় সাইজই দেখায়, এবং এদের মধ্যকার পার্থক্যই হলো অপচয়।

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

হাই ডেনসিটি স্ক্রিনের জন্য দ্বিগুণ করার নিয়ম

ডিসপ্লে প্রস্থকে 2 দিয়ে গুণ করুন এবং সেখানেই থামুন, কারণ এর চেয়ে বেশি ডেনসিটির স্ক্রিনে যে পরিবর্তন হয় তা কারও চোখে পড়ে না। 700 পিক্সেলে প্রদর্শিত একটি ছবি 1400 পিক্সেলে এক্সপোর্ট করা উচিত।

তিন গুণ করার পরামর্শ মাঝেমধ্যে দেওয়া হলেও তা খুব কমই যুক্তিযুক্ত। সাধারণ দেখার দূরত্ব থেকে 2 গুণ এবং 3 গুণ ডেনসিটির পার্থক্য ধরা অসম্ভব, অথচ ফাইলের সাইজ অর্ধেকেরও বেশি বেড়ে যায়। 3 গুণ ডেনসিটিতে হালকা কম্প্রেস করার চেয়ে 2 গুণ ডেনসিটিতে বেশি কম্প্রেস করলে ভালো ফলাফল পাওয়া যায়, কারণ অতিরিক্ত পিক্সেলগুলো কম্প্রেসনের দাগ লুকিয়ে ফেলে।

সাইজ পরিবর্তনের জন্য সাধারণ কিছু ডিসপ্লে উইডথ

• আর্টিকেলের ভেতরের ছবি: প্রদর্শিত হয় প্রায় 700 px, এক্সপোর্ট করুন 1400 px এ।
• ফুল-উইডথ হিরো ইমেজ: প্রদর্শিত হয় 1920 px পর্যন্ত, এক্সপোর্ট করুন 1920 px এ এবং বেশি কম্প্রেস করুন।
• হাফ-উইডথ ফিচার ইমেজ: প্রদর্শিত হয় প্রায় 600 px, এক্সপোর্ট করুন 1200 px এ।
• প্রোডাক্ট গ্রিড থাম্বনেইল: প্রদর্শিত হয় প্রায় 300 px, এক্সপোর্ট করুন 600 px এ।
• লেখক বা প্রোফাইল ছবি: প্রদর্শিত হয় প্রায় 80 px, এক্সপোর্ট করুন 160 px এ।
• হেডারের লোগো: প্রদর্শিত হয় প্রায় 180 px, এক্সপোর্ট করুন 360 px এ অথবা ভেক্টর গ্রাফিক্স ব্যবহার করুন।

কেন ফুল-উইডথ ছবিগুলোর ক্ষেত্রে নিয়ম আলাদা

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

ব্যানার সাধারণত দূর থেকে দেখা হয় এবং প্রোডাক্ট ফটোর চেয়ে এতে সূক্ষ্ম ডিটেইল কম থাকে, যার অর্থ এতে বেশি কম্প্রেস করলেও তা চোখে পড়ে না। WebP ফরম্যাটে 70 কোয়ালিটির একটি 1920 পিক্সেলের ব্যানার সাধারণত 200 KB এর নিচে থাকে এবং প্রতিটি স্ক্রিনেই দারুণ দেখায়, যেখানে 3840 পিক্সেলের ভার্সনটি 4 গুণ ভারী হয়েও কোনো বাড়তি সুবিধা দেয় না।

পুরো লাইব্রেরির সাইজ যেভাবে ঠিক করবেন

একটি বিদ্যমান সাইটের সমস্ত ছবির সাইজ সঠিকভাবে পরিবর্তন করতে এই 6টি ধাপ অনুসরণ করুন।

1. আপনার ডিজাইনের ছবির স্লটগুলোর তালিকা তৈরি করুন, যা সাধারণত ডজন ডজন না হয়ে 4 থেকে 6টি নির্দিষ্ট সাইজের হয়ে থাকে।
2. লাইভ পেজে ব্রাউজার ইন্সপেক্টর ব্যবহার করে প্রতিটি স্লটের ডিসপ্লে উইডথ মাপুন।
3. আপনার এক্সপোর্ট সাইজ পেতে প্রতিটি প্রস্থকে দ্বিগুণ করুন।
4. লাইব্রেরির ছবিগুলোকে স্লট অনুযায়ী ফোল্ডারে ভাগ করুন, কারণ একটি ব্যাচ একটি ফোল্ডারের সব ফাইলে একটি সাইজই প্রয়োগ করে।
5. প্রতিটি ফোল্ডারের ফাইলগুলোকে টার্গেট সাইজে পরিবর্তন করুন, তারপর একই সাথে কম্প্রেস এবং কনভার্ট করুন।
6. একই নাম বজায় রেখে ফাইলগুলো রিপ্লেস করুন যাতে বিদ্যমান পেজগুলো ঠিকভাবে কাজ করতে থাকে।

ফোল্ডারে ভাগ করার ধাপটিই এই কাজটি একটি ব্যাচ প্রসেসে পরিণত করে। অধিকাংশ সাইট যতগুলো আলাদা সাইজের ছবি মনে করে, তার চেয়ে অনেক কম সাইজ ব্যবহার করে। তাই স্লট অনুযায়ী গ্রুপ করলে প্রতিটি ফাইল আলাদাভাবে প্রসেস করার প্রয়োজন হয় না।

রেসপন্সিভ ইমেজ এবং srcset অ্যাট্রিবিউট

বিভিন্ন সাইজ প্রদান করতে srcset ব্যবহার করুন এবং ব্রাউজারকে প্রতিটি ডিভাইসের জন্য উপযুক্ত সাইজটি বেছে নিতে দিন। এর ফলে একই কোড থেকে একটি ফোন 400 পিক্সেলের ফাইল ডাউনলোড করে এবং একটি ডেস্কটপ 1400 পিক্সেলের ফাইল ডাউনলোড করে।

প্রতিটি ছবির জন্য 3টি উইডথ তৈরি করুন, সাধারণত 400, 800 এবং 1600 পিক্সেল, এবং পিক্সেল উইডথসহ সেগুলোর তালিকা দিন যাতে ব্রাউজার সঠিকটি বেছে নিতে পারে। অধিকাংশ কন্টেন্ট সিস্টেম আপলোড করার সময় এটি স্বয়ংক্রিয়ভাবে তৈরি করে, তাই আপনার প্ল্যাটফর্ম কী করে তা পরীক্ষা করে দেখুন। যেখানে এটি ইতিমধ্যেই কাজ করে, সেখানে সঠিক সাইজের মূল ছবি আপলোড করলে তা প্রতিটি ভ্যারিয়েন্টের মান উন্নত করে।

সবসময় কম্প্রেস করার আগে সাইজ পরিবর্তন করুন

প্রথমে সাইজ কমানোর অর্থ হলো কম্প্রেস করার সময় কম কাজ করতে হয়, ফলে ফাইলের সাইজ ছোট থাকার পরও গুণমান বজায় থাকে। প্রথমে কম্প্রেস করে পরে সাইজ কমালে ডিটেইল নষ্ট হয় যা আপনি পরেই ফেলে দিচ্ছেন।

এই ক্রমটি আউটপুট কেমন দেখাবে তার ওপরও প্রভাব ফেলে। ফুল সাইজে কম্প্রেস করা একটি ছবিতে কিছু ত্রুটি (artefacts) থেকে যায়, যা পরে সাইজ ছোট করলে আরও স্পষ্ট হয়ে ওঠে। প্রথমে সাইজ পরিবর্তন করলে এনকোডারের জন্য একটি পরিষ্কার সোর্স পাওয়া যায় এবং একই ফাইল সাইজে লক্ষণীয়ভাবে ভালো ফলাফল পাওয়া যায়।

এটি পেজ স্পিডে কী প্রভাব ফেলে

যে সাইটে আগে কখনো ছবির সাইজ ঠিক করা হয়নি, সেখানে সঠিকভাবে ছবির সাইজ নির্ধারণ করলে সাধারণত 60 থেকে 90 শতাংশ ছবির সাইজ কমে যায়। এই উন্নতি ফরম্যাট পরিবর্তনের চেয়েও বড় এবং অন্য যেকোনো অপটিমাইজেশনের সম্মিলিত ফলাফলের চেয়েও বেশি।

এর প্রভাব মোবাইল ভিজিটরদের ওপর সবচেয়ে বেশি পড়ে, যেখানে কানেকশন ধীরগতির এবং ডেটার খরচ রয়েছে। Largest Contentful Paint সরাসরি উন্নত হয়, কারণ এই পরিমাপটি সাধারণত একটি বড় ছবি দ্বারা নির্ধারিত হয়। Lighthouse-এ Properly size images অডিট সমাধান করলে প্রায়শই একই সাথে 2 বা 3টি সম্পর্কিত সতর্কতা দূর হয়ে যায়।

মেলাতে গিয়ে ছবি কখনো বড় করবেন না

ছোট ছবি বড় করলে এমন পিক্সেল যোগ হয় যা ক্যামেরা কখনো ক্যাপচার করেনি, ফলে ছবিটি অস্পষ্ট হয়ে যায় এবং কোনো সুবিধা ছাড়াই ফাইলের সাইজ বাড়ে। সাইজ ছোট করা সবসময় নিরাপদ, তবে সাইজ বড় করা এমন একটি কাজ যা নিশ্চিতভাবেই দেখতে খারাপ লাগে।

যেখানে একটি সোর্স ইমেজ স্লটের চেয়ে ছোট হয়, সেখানে সততার সাথে বিকল্প হলো এটিকে এর আসল সাইজে ব্যবহার করা, এর চারপাশে লেআউট ক্রপ করা অথবা ছবিটি বদলে ফেলা। একটি 600 পিক্সেলের ছবিকে 1600 পিক্সেলে বড় করলে মূল ফাইলের চেয়ে 4 গুণ ভারী একটি ঝাপসা ফাইল তৈরি হয়, যা কোয়ালিটি এবং স্পিড উভয়েই ব্যর্থ হয়।

অতিরিক্ত বড় ছবি রয়েছে কিনা পেজে পরীক্ষা করা

ডেভেলপার টুলস খুলুন, Network ট্যাবে যান, Images দিয়ে ফিল্টার করুন এবং পেজটি রিলোড করুন। তালিকাটি প্রতিটি ছবি ট্রান্সফার সাইজ অনুযায়ী দেখাবে, যেখানে সবচেয়ে বড় ফাইলটি আগে থাকবে।

500 KB এর ওপর যেকোনো একক ছবি পরীক্ষা করে দেখা উচিত, এবং যে কোনো পেজে ছবির মোট সাইজ 2 MB এর বেশি হলে সেখানে সমস্যা রয়েছে। Elements প্যানেলে কোনো ছবির ওপর কার্সার রেখে এর আসল এবং প্রদর্শিত সাইজ পাশাপাশি দেখুন। এই 2টি সংখ্যার মধ্যে বড় ব্যবধানই হলো ভুল সাইজের ছবির লক্ষণ, এবং এটি কয়েক সেকেন্ডেই ধরা পড়ে।

এক ব্যাচে পুরো লাইব্রেরির সাইজ পরিবর্তন করা

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

একবারে 500টি পর্যন্ত ফাইল যুক্ত করুন, অথবা সরাসরি একটি ZIP আর্কাইভ ড্রাগ করে আনুন এবং পুরো সেটের জন্য উইডথ, ফরম্যাট ও কম্প্রেসন টার্গেট সেট করুন। সবকিছু আপনার নিজস্ব প্রসেসরে ব্রাউজারের ভেতরেই চলে, তাই ক্লায়েন্ট সাইট, স্টেজিং অ্যাসেট এবং অপ্রকাশিত গ্যালারি কখনো কোনো সার্ভারে পৌঁছায় না। কিছুই আপলোড হয় না, যার অর্থ নেটওয়ার্কের মাধ্যমে একটি ফাইলও না পাঠিয়ে পুরো লাইব্রেরির সাইজ পরিবর্তন করা সম্ভব।