ইমেজ অপ্টিমাইজ করুন

এই নিয়মটি ট্রিগার হয় যখন PageSpeed ​​Insights শনাক্ত করে যে পৃষ্ঠার চিত্রগুলি তাদের দৃশ্যমান গুণমানকে উল্লেখযোগ্যভাবে প্রভাবিত না করে তাদের ফাইলের আকার কমাতে অপ্টিমাইজ করা যেতে পারে।

ওভারভিউ

ছবি প্রায়ই একটি পৃষ্ঠায় ডাউনলোড করা বাইটের জন্য দায়ী। ফলস্বরূপ, চিত্রগুলিকে অপ্টিমাইজ করা প্রায়শই সবচেয়ে বড় বাইট সঞ্চয় এবং কর্মক্ষমতার উন্নতি ঘটাতে পারে: ব্রাউজারকে যত কম বাইট ডাউনলোড করতে হবে, ক্লায়েন্টের ব্যান্ডউইথের জন্য কম প্রতিযোগিতা থাকবে এবং ব্রাউজারটি তত দ্রুত স্ক্রীনে সামগ্রী ডাউনলোড এবং রেন্ডার করতে পারবে। .

সুপারিশ

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

সব ধরনের ছবির জন্য অপ্টিমাইজেশান

• প্রতিক্রিয়াশীল ছবি পরিবেশনের জন্য সর্বোত্তম অনুশীলন অনুসরণ করুন
• পৃথক ছবির জন্য ইমেজ অপ্টিমাইজেশান চেকলিস্ট অনুসরণ করুন

GIF, PNG, এবং JPEG ছবির জন্য অপ্টিমাইজেশন

GIF , PNG , এবং JPEG ফর্ম্যাটগুলি সমগ্র ইন্টারনেটের ইমেজ ট্র্যাফিকের 96% তৈরি করে৷ তাদের জনপ্রিয়তার কারণে, PageSpeed ​​Insights নির্দিষ্ট অপ্টিমাইজেশান সুপারিশ প্রদান করে। আপনার সুবিধার জন্য, আপনি সরাসরি PageSpeed ​​Insights থেকে অপ্টিমাইজ করা ছবি ডাউনলোড করতে পারেন (যা modpagespeed.com থেকে ইমেজ অপ্টিমাইজেশান লাইব্রেরি ব্যবহার করছে)।

আপনি ইমেজম্যাজিক দ্বারা তৈরি রূপান্তর বাইনারির মতো সরঞ্জামগুলিও ব্যবহার করতে পারেন যা অনুরূপ অপ্টিমাইজেশন প্রয়োগ করতে পারে - নীচের উদাহরণ নির্দেশাবলী দেখুন।

আপনি যদি তৃতীয় পক্ষের সরঞ্জামগুলি ব্যবহার করেন, অনুগ্রহ করে সচেতন থাকুন যে রূপান্তরটি আপনার ছবিগুলিকে আরও বড় করে তুলতে পারে, যদি আপনারগুলি ইতিমধ্যেই খুব ভালভাবে অপ্টিমাইজ করা থাকে৷ যদি এটি ঘটে, তাহলে আপনার আসল ব্যবহার করুন.

GIF এবং PNG হল ক্ষতিহীন বিন্যাস, যাতে কম্প্রেশন প্রক্রিয়া চিত্রগুলিতে কোন চাক্ষুষ পরিবর্তন করে না। স্থির চিত্রগুলির জন্য, পিএনজি আরও ভাল ভিজ্যুয়াল মানের সাথে আরও ভাল কম্প্রেশন অনুপাত অর্জন করে। অ্যানিমেটেড চিত্রগুলির জন্য, আরও ভাল কম্প্রেশন অর্জনের জন্য, একটি GIF এর পরিবর্তে video উপাদান ব্যবহার করার কথা বিবেচনা করুন।

• সর্বদা GIF কে PNG তে রূপান্তর করুন যদি না আসলটি অ্যানিমেটেড বা ছোট না হয় (কয়েক শত বাইটের কম)।
• GIF এবং PNG উভয়ের জন্য, সমস্ত পিক্সেল অস্বচ্ছ হলে আলফা চ্যানেল সরান৷

উদাহরণস্বরূপ, আপনি নিম্নলিখিত কমান্ডের সাহায্যে আপনার GIF এবং PNG চিত্রগুলিকে অপ্টিমাইজ করতে রূপান্তর বাইনারি ব্যবহার করতে পারেন (বন্ধনীর ভিতরের প্যারামিটারগুলি ঐচ্ছিক):

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png

convert cuppa.png -strip cuppa_converted.png

JPEG একটি ক্ষতিকর বিন্যাস। কম্প্রেশন প্রক্রিয়া চিত্রের ভিজ্যুয়াল বিশদগুলি সরিয়ে দেয়, তবে কম্প্রেশন অনুপাত GIF বা PNG থেকে 10x বড় হতে পারে।

• উচ্চতর হলে গুণমানকে 85-এ কমিয়ে দিন। 85 এর চেয়ে বড় গুণমানের সাথে, চিত্রটি দ্রুত বড় হয়ে যায়, যখন চাক্ষুষ উন্নতি সামান্য।
• ক্রোমা স্যাম্পলিং কমিয়ে 4:2:0 করুন, কারণ মানুষের ভিজ্যুয়াল সিস্টেম উজ্জ্বলতার তুলনায় রঙের প্রতি কম সংবেদনশীল।
• 10k বাইটের বেশি ছবির জন্য প্রগতিশীল বিন্যাস ব্যবহার করুন। প্রগতিশীল JPEG-তে সাধারণত বড় ইমেজের জন্য বেসলাইন JPEG-এর তুলনায় উচ্চ কম্প্রেশন অনুপাত থাকে এবং ক্রমান্বয়ে রেন্ডারিংয়ের সুবিধা রয়েছে।
• চিত্রটি কালো এবং সাদা হলে গ্রেস্কেল রঙের স্থান ব্যবহার করুন।

উদাহরণস্বরূপ, আপনি নিম্নলিখিত কমান্ডের সাহায্যে আপনার JPEG চিত্রগুলি অপ্টিমাইজ করতে রূপান্তর বাইনারি ব্যবহার করতে পারেন (বন্ধনীর ভিতরের পরামিতিগুলি ঐচ্ছিক):

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

প্রতিক্রিয়া

এই পেজটি কি সহায়ক ছিল?