কেন চিত্রগুলি অপ্টিমাইজ করা একটি ওয়েবসাইটকে উন্নত করে
ছবি সাধারণত একটি পৃষ্ঠায় ডাউনলোড হওয়া ডেটার বড় অংশ উপস্থাপন করে। একটি বড় ফাইল বিষয়বস্তুর প্রদর্শন দেরি করে, বেশি মোবাইল ডেটা খায় এবং দর্শকের অভিজ্ঞতা খারাপ করতে পারে। অপ্টিমাইজেশন তিনটি সিদ্ধান্তকে মিলিত করে: মাত্রা, ফরম্যাট এবং সংক্ষেপণের স্তর।
সমস্ত ছবির জন্য কোনো নিখুঁত সীমা নেই। একটি থাম্বনেইল পুরো স্ক্রীন দখল করা একটি ছবির তুলনায় অনেক কম ওজনের হওয়া উচিত। লক্ষ্য হল যথেষ্ট পিক্সেল এবং মান সরবরাহ করা, যাতে বাস্তব ব্যবহারের জন্য পর্যাপ্ত হয়, ব্রাউজারকে এমন তথ্য ডাউনলোড করতে না বাধ্য করা যা ব্যবহার করবে না।
প্রস্তাবিত ধাপে ধাপে ধাপে প্রবাহ
- নকশায় চিত্রটি যে সর্বাধিক প্রস্থে উপস্থিত হবে তা সনাক্ত করে।
- সংকুচিত করার আগে ফ্রেমটি ক্রপ করুন যাতে আপনি অপসারণ করা হবে এমন অঞ্চলগুলি না রাখেন।
- বিষয়বস্তু এবং স্বচ্ছতার প্রয়োজনীয়তা অনুসারে ফর্ম্যাটটি চয়ন করুন।
- ফাইলটি খুলুন ইমেজ কম্প্রেসর এবং একটি মাঝারি-উচ্চ মানের পরীক্ষা করে।
- ওজন তুলনা করুন এবং পাঠ্য, সীমানা, মুখ এবং গ্রেডিয়েন্টগুলি পরীক্ষা করুন।
- ফলাফল প্রকাশ করুন এবং মোবাইল এবং ডেস্কটপে পৃষ্ঠাটি পরীক্ষা করুন।
মাত্রা: প্রয়োজনের চেয়ে বেশি পিক্সেল আপলোড করা এড়িয়ে চলুন
যদি একটি কার্ড ৬০০ পিক্সেলের প্রস্থের একটি ছবি প্রদর্শন করে, তাহলে ৫০০০ পিক্সেলের একটি ছবি লোড করা সাধারণত অপচয়। ব্রাউজার এটি ভিজ্যুয়ালি ছোট করে দেখাবে, কিন্তু তার আগে সম্পূর্ণ ফাইলটি ডাউনলোড করতে হবে। ডিজাইনের সর্বাধিক প্রয়োজনীয় আকারের কাছাকাছি একটি সংস্করণ প্রস্তুত করুন।
উচ্চ ঘনত্বের স্ক্রীনের জন্য প্রায় দ্বিগুণ আকারের একটি সংস্করণ প্রদান সহায়ক হতে পারে, তবে আদর্শ হচ্ছে সাইটটি প্রতিক্রিয়াশীল ছবিগুলি ব্যবহার করে। এসআরসিএসইটি y আকার. এভাবে প্রতিটি ডিভাইস একটি উপযুক্ত সংস্করণ ডাউনলোড করে, একই বিশাল ফাইল নয়।
কোন ফর্ম্যাটটি বেছে নেবেন
- JPG: অ-স্বচ্ছ ফটোগ্রাফের জন্য ভাল সামঞ্জস্যতা এবং যুক্তিসঙ্গত আকার।
- WebP: ফটোগ্রাফ এবং ওয়েব গ্রাফিক্সের জন্য উপযুক্ত; এটি স্বচ্ছতা বজায় রাখতে পারে এবং কম্প্যাক্ট ফাইল প্রদান করতে পারে।
- PNG: স্বচ্ছতার জন্য উপযুক্ত, স্পষ্ট টেক্সটসহ স্ক্রিনশট এবং সাধারণ গ্রাফিক্স; ফটোগ্রাফিতে এটি অনেক ভারী হতে পারে।
- এসভিজি: লোগো এবং ভেক্টর আইকনগুলির জন্য আদর্শ যখন ফাইলটি নিরাপদ থাকে এবং নকশাটি একটি ভেক্টর হিসাবে তৈরি করা হয়েছিল।
ফরম্যাট পরিবর্তন করলে অবশ্যই ফাইল ছোট হবে না। সবসময় ফলাফল তুলনা করুন এবং যখন মূল ফরম্যাট সবচেয়ে কার্যকর হয় তখন তা সংরক্ষণ করুন। পরামর্শ দেখুন। JPG, PNG, এবং WebP এর মধ্যে তুলনা যদি আপনি না জানেন যে কোনটি বেছে নিতে হবে।
কীভাবে সংকোচনের গুণমান চয়ন করবেন
একটি সেটিং দিয়ে শুরু করুন যা চেহারাটিকে অগ্রাধিকার দেয় এবং ধীরে ধীরে কমান। ফটো প্রণালীর স্ক্রিনশট, ডায়াগ্রাম এবং ছোট টেক্সটের চেয়ে কম্প্রেশন আরও ভালো সহ্য করে। যদি হ্যালো, ব্লক বা ধূসর প্রান্ত দেখা দেয়, মান বাড়ান বা অন্য ফরম্যাট পরীক্ষা করুন।
ফাইলটি পৃষ্ঠার মধ্যে মূল্যায়ন করুন, কেবলমাত্র বড় ভাব দেখার মধ্যে নয়। 300% এ ছোট একটি পার্থক্য হয়তো স্বাভাবিক আকারে দেখা যাবে না; তবে একটি কার্ডে অমরিক লেখা একটি বাস্তব সমস্যা।
সংকোচন একটি ভাল বাস্তবায়নের বিকল্প নয়
ফাইলটি অপ্টিমাইজ করার পাশাপাশি, এটি বৈশিষ্ট্যগুলির সাথে স্থান সংরক্ষণ করে প্রস্থ y উচ্চতা বিষয়বস্তুর লাফ এড়ানোর জন্য। যে ছবিগুলি প্রথম দৃশ্যমান ব্লকের বাইরে রয়েছে সেগুলিতে লোডিং দেরি ব্যবহার করুন, তবে প্রয়োজনীয় হলে প্রধান ছবি বিলম্ব করবেন না।
নামসহ ভার্সনকৃত ফাইলের জন্য দীর্ঘ ক্যাশে নির্ধারণ করাও সুবিধাজনক এবং CSS ব্যবহার করে একই ছবিকে বিভিন্ন রেজোলিউশনে লোড করা এড়ানো যায়। এই সিদ্ধান্তগুলোর জন্য সাইটে কিছু পরিবর্তন প্রয়োজন, তবে কমপ্রেশনের সময় অর্জিত সঞ্চয়কে সম্পূরক করে।
সাধারণ ভুল
আকার সিদ্ধান্ত নেওয়ার আগে সংকুচিত করুন
এর পরে আকার পরিবর্তন করুন আপনাকে ফাইলটি দু'বার প্রক্রিয়া করতে বাধ্য করে এবং ক্ষতি জমা করতে পারে। প্রথমে ফ্রেমিং এবং মাত্রা সম্পর্কে সিদ্ধান্ত নিন; শেষে সংকুচিত করুন।
নিম্ন মানের স্ক্রিনশটগুলি JPG-এ রূপান্তর করুন
সূক্ষ্ম অক্ষর এবং রেখাগুলি দাগ তৈরি করতে পারে। উচ্চতর মানের PNG বা WebP চেষ্টা করুন এবং ওজনের তুলনা করুন।
শিরোনাম হিসাবে একটি ছোট চিত্র ব্যবহার করুন
বড় করা বিশদ পুনরুদ্ধার করে না। যথেষ্ট বড় উৎস থেকে শুরু করুন এবং সেই সংস্করণ থেকে ছোট ভেরিয়েন্ট তৈরি করুন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
একটি ওয়েব চিত্রের ওজন কত হওয়া উচিত?
এটি এর মাত্রা, গুরুত্ব এবং জটিলতার উপর নির্ভর করে। একটি মানদণ্ড হিসেবে এমন সর্বনিম্ন ওজন ব্যবহার করুন যা চূড়ান্ত আকারে মানসম্মত গুণমান বজায় রাখে, একটি সার্বজনীন সংখ্যার পিছনে না ছুটে।
আমার কি সমস্ত চিত্রকে WebP-এ রূপান্তর করতে হবে?
অগত্যা নয়। WebP দরকারী, তবে একটি সাধারণ PNG বা ইতিমধ্যে অপ্টিমাইজড ফাইলের উন্নতি নাও হতে পারে। একটি নমুনা রূপান্তর করুন, মূলগুলি পরিমাপ করুন এবং সংরক্ষণ করুন।
শুধুমাত্র চিত্র সংকুচিত করা কি অবস্থানের উন্নতি করে?
অভিজ্ঞতা এবং কার্যক্ষমতায় সাহায্য করে, কিন্তু অবস্থান নির্ধারণ প্রয়োজনীয়, ট্র্যাকিং, লিঙ্ক, অনুসন্ধানের উদ্দেশ্য এবং আরও অনেক সংকেতের উপরও নির্ভর করে। কম্প্রেশন একটি ভাল প্রস্তুত ওয়েবের একটি অংশ।
একটি হালকা চিত্র প্রস্তুত করুন
গুণমান সামঞ্জস্য করুন বা একটি লক্ষ্য আকার সেট করুন, ফলাফলের তুলনা করুন এবং আপনার পৃষ্ঠার সর্বোত্তমভাবে ফিট করে এমন সংস্করণটি ডাউনলোড করুন।
ওয়েবের জন্য চিত্র সংকুচিত করুন