দ্রুত লোড সময় এবং আরো জন্য চিত্র নীতি

আপনার সাইট সেরা পারফরম্যান্স ইমেজ ব্যবহার করছে তা নিশ্চিত করতে অপ্টিমাইজ করা ছবি নীতি ব্যবহার করুন।

Luna Lu

চিত্রগুলি প্রায়শই একটি উল্লেখযোগ্য পরিমাণ ভিজ্যুয়াল স্থান নেয় এবং একটি ওয়েবসাইটে ডাউনলোড করা বাইটের সংখ্যাগরিষ্ঠ অংশ তৈরি করে৷ ইমেজ অপ্টিমাইজ করা লোডিং কর্মক্ষমতা উন্নত করতে পারে এবং নেটওয়ার্ক ট্রাফিক কমাতে পারে।

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

আপনি জিজ্ঞাসা করতে পারেন, আমি কীভাবে জানব যে আমার ছবিগুলি অপ্টিমাইজ করা হয়েছে এবং আমি কীভাবে সেগুলিকে অপ্টিমাইজ করব? আমরা ইমেজ অপ্টিমাইজেশানের জন্য বৈশিষ্ট্য নীতির একটি নতুন সেট নিয়ে পরীক্ষা-নিরীক্ষা করছি: oversized-images , unoptimized-lossy-images , unoptimized-lossless-images , এবং unoptimized-lossless-images-strict । সবই এখন মূল পরীক্ষার জন্য উপলব্ধ।

অপ্টিমাইজ করা ছবি নীতি

অনুমতি নীতি ছবিগুলির উপর একটি নতুন সেট সীমাবদ্ধতা প্রবর্তন করছে যা উন্নয়ন-সময় প্রয়োগের সাথে প্রয়োগ করা যেতে পারে। যে কোনও বিধিনিষেধ লঙ্ঘন করে এমন চিত্রগুলিকে স্থানধারক চিত্র হিসাবে রেন্ডার করা হবে, যা সনাক্ত করা এবং ঠিক করা সহজ। এই নীতিগুলি শুধুমাত্র-রিপোর্ট মোডে নির্দিষ্ট করা যেতে পারে যেখানে প্রতিবেদনের মাধ্যমে লঙ্ঘন পরিলক্ষিত হওয়ার সময় চিত্রগুলি প্রয়োগ না করেই সাধারণত রেন্ডার হবে৷ (বিশদ বিবরণের জন্য নীচে, বন্যে শুধুমাত্র-প্রতিবেদন মোড দেখুন।)

বড় আকারের ছবি

oversized-images অনুমতি নীতি একটি ছবির অন্তর্নিহিত মাত্রাগুলিকে তার কন্টেইনার আকারের সাথে সীমাবদ্ধ করে।

যখন একটি ডকুমেন্ট oversized-images নীতি ব্যবহার করে, যে কোনো <img> উপাদান যার অন্তর্নিহিত রেজোলিউশন যেকোনও ডাইমেনশনের কনটেইনার সাইজের চেয়ে X গুণ বেশি বড় একটি স্থানধারক ইমেজ দিয়ে প্রতিস্থাপিত হবে।

কেন?

দেখার ডিভাইস যা রেন্ডার করতে পারে তার চেয়ে বড় ছবি পরিবেশন করা—উদাহরণস্বরূপ, মোবাইল প্রসঙ্গে ডেস্কটপ ছবি পরিবেশন করা, অথবা কম-পিক্সেল-ঘনত্বের ডিভাইসে উচ্চ-পিক্সেল-ঘনত্বের ছবি পরিবেশন করা—নেটওয়ার্ক ট্র্যাফিক এবং ডিভাইসের মেমরি নষ্ট করছে। সঠিক মাত্রা সহ সার্ভ ইমেজ পড়ুন এবং আপনার ইমেজ অপ্টিমাইজ করার তথ্যের জন্য প্রতিক্রিয়াশীল ছবি পরিবেশন করুন ।

উদাহরণ

কয়েকটি উদাহরণ এটি ব্যাখ্যা করে। একটি চিত্রের প্রদর্শনের আকার অর্ধেক কাটার সময় নিম্নলিখিতটি ডিফল্ট আচরণ দেখায়।

যদি আমি নিম্নলিখিত অনুমতি নীতি প্রয়োগ করি, তাহলে আমি পরিবর্তে একটি স্থানধারক চিত্র পাব।

Permissions-Policy: oversized-images *(2);

আমি যদি শুধুমাত্র প্রস্থ বা উচ্চতা কম করি তবে আমি অনুরূপ ফলাফল পাই।

কিভাবে ব্যবহার করে

সংক্ষিপ্ত করার জন্য, oversized-images নীতি যে কোনোটির মাধ্যমে নির্দিষ্ট করা যেতে পারে:

• Permissions-Policy HTTP হেডার
• <iframe> অ্যাট্রিবিউটের allow

oversized-images নীতি ঘোষণা করতে, আপনাকে প্রদান করতে হবে:

• বৈশিষ্ট্যের নাম, oversized-images (প্রয়োজনীয়)
• উত্সের একটি তালিকা (ঐচ্ছিক)
• থ্রেশহোল্ড মান (অর্থাৎ, ডাউনস্কেলিং অনুপাত X) উত্সের জন্য, বন্ধনীতে নির্দিষ্ট করা হয়েছে (ঐচ্ছিক)

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

আরো উদাহরণ

Permissions-Policy: oversized-images *(2.0)

নীতিটি 2.0 এর থ্রেশহোল্ড মান সহ সমস্ত উত্সগুলিতে প্রয়োগ করা হয়৷ যে কোনো <img> একটি ইমেজ সহ উপাদান যার ডাউনস্কেলিং অনুপাত 2.0-এর বেশি তা অননুমোদিত এবং একটি স্থানধারক চিত্র দিয়ে প্রতিস্থাপিত হবে।

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

নীতিটি 1.5 এর থ্রেশহোল্ড মান সহ সাইটের উত্সে প্রয়োগ করা হয়৷ <img> টপ-লেভেল ব্রাউজিং কনটেক্সট এবং একই অরিজিন নেস্টেড ব্রাউজিং কনটেক্সট এলিমেন্ট সাধারণত রেন্ডার হবে যদি ডাউনস্কেলিং রেশিও 1.5 এর কম বা সমান হয়। <img> উপাদান অন্য সব জায়গায় স্বাভাবিকভাবে রেন্ডার হবে।

অপ্টিমাইজ করা-{ক্ষতিহীন, ক্ষতিহীন}-ছবি

unoptimized-lossy-images , unoptimized-lossless-images , unoptimized-lossless-images-strict বৈশিষ্ট্য নীতিগুলি একটি ছবির ফাইলের আকারকে তার অন্তর্নিহিত রেজোলিউশনের সাথে সীমাবদ্ধ করে:

unoptimized-lossy-images

ক্ষতিকারক ফর্ম্যাটগুলি একটি নির্দিষ্ট 1KB ওভারহেড অ্যালাউন্স সহ X এর বাইট-প্রতি-পিক্সেল অনুপাতের বেশি হওয়া উচিত নয়। একটি W x H চিত্রের জন্য, ফাইলের আকার থ্রেশহোল্ড W x H x X + 1024 হিসাবে গণনা করা হয়।

unoptimized-lossless-images

লসলেস ফরম্যাটগুলি একটি নির্দিষ্ট 10KB ওভারহেড ভাতা সহ X এর বাইট-প্রতি-পিক্সেল অনুপাতের বেশি হওয়া উচিত নয়। একটি W x H চিত্রের জন্য, ফাইলের আকার থ্রেশহোল্ড W x H x X + 10240 হিসাবে গণনা করা হয়।

unoptimized-lossless-images-strict

লসলেস ফরম্যাটগুলি একটি নির্দিষ্ট 1KB ওভারহেড ভাতা সহ X এর বাইট-প্রতি-পিক্সেল অনুপাতের বেশি হওয়া উচিত নয়। একটি W x H চিত্রের জন্য, ফাইলের আকার থ্রেশহোল্ড W x H x X + 1024 হিসাবে গণনা করা হয়।

যখন একটি নথি এই নীতিগুলির যে কোনও একটি ব্যবহার করে, সীমাবদ্ধতা লঙ্ঘন করে এমন কোনও <img> উপাদান একটি স্থানধারক চিত্র দিয়ে প্রতিস্থাপিত হবে।

কেন?

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

উদাহরণ

নিম্নলিখিত ডিফল্ট ব্রাউজার আচরণ দেখায়. অনুমতি নীতি ব্যতীত একটি অপ্টিমাইজ করা ক্ষতিকারক চিত্রটি একটি অপ্টিমাইজ করা চিত্রের মতোই প্রদর্শিত হতে পারে।

যদি আমি নিম্নলিখিত অনুমতি নীতি প্রয়োগ করি, তাহলে আমি পরিবর্তে একটি স্থানধারক চিত্র পাব।

Permissions-Policy: unoptimized-lossy-images *(0.5);

কিভাবে ব্যবহার করে

আপনি যদি অনুমতি নীতিতে নতুন হন, অনুগ্রহ করে আরও বিশদ বিবরণের জন্য অনুমতি নীতির ভূমিকা দেখুন।

সংক্ষেপে বলা যায়, unoptimized-{lossy,lossless}-images নীতিগুলি এর মাধ্যমে নির্দিষ্ট করা যেতে পারে:

• Permissions-Policy HTTP হেডার
• <iframe> অ্যাট্রিবিউটের allow

একটি unoptimized-{lossy,lossless}-images নীতি ঘোষণা করতে, আপনাকে প্রদান করতে হবে:

• বৈশিষ্ট্যের নাম, উদাহরণস্বরূপ, unoptimized-lossy-images (প্রয়োজনীয়)
• উত্সের একটি তালিকা (ঐচ্ছিক)
• থ্রেশহোল্ড মান (অর্থাৎ, বাইট-প্রতি-পিক্সেল অনুপাত X) উৎসের জন্য, বন্ধনীতে নির্দিষ্ট করা হয়েছে (ঐচ্ছিক)

আমরা unoptimized-lossy-images জন্য বাইট-প্রতি-পিক্সেল অনুপাত 0.5 বা তার কম এবং unoptimized-lossless-images এবং unoptimized-lossless-images-strict জন্য বাইট-প্রতি-পিক্সেল অনুপাত 1 বা তার কম সুপারিশ করি।

WebP ফরম্যাটের অন্যান্য ফরম্যাটের তুলনায় ভাল কম্প্রেশন অনুপাত আছে। আপনি যদি পারেন WebP ক্ষতিকারক ফর্ম্যাটে আপনার সমস্ত ছবি পরিবেশন করুন। যদি তা যথেষ্ট না হয়, WebP লসলেস ফর্ম্যাট ব্যবহার করে দেখুন। WebP ফর্ম্যাট সমর্থন করে না এমন ব্রাউজারগুলিতে JPEG ব্যবহার করুন৷ PNG ব্যবহার করুন যদি এই ফরম্যাটের কোনোটিই কাজ না করে।

আপনি যদি WebP ফরম্যাট ব্যবহার করেন, তাহলে কঠোর থ্রেশহোল্ডের সাথে চেষ্টা করুন:

• WEBPV8 এর জন্য 0.2
• WEBPL-এর জন্য 0.5

আরো উদাহরণ

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

এই নীতিটি 0.5 (ক্ষতিকর বিন্যাসের জন্য) এবং 1 (ক্ষতিহীন বিন্যাসের জন্য) থ্রেশহোল্ড মান সহ সমস্ত উত্সের উপর প্রয়োগ করা হয়৷ যে কোনো <img> এলিমেন্ট যার ইমেজ বাইট-প্রতি-পিক্সেল অনুপাত সীমাবদ্ধতা ছাড়িয়ে গেছে তা অননুমোদিত এবং একটি স্থানধারক চিত্র দিয়ে প্রতিস্থাপিত হবে।

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

এই নীতিটি 0.3 (ক্ষতিকর বিন্যাসের জন্য) এবং 0.8 (ক্ষতিহীন বিন্যাসের জন্য) থ্রেশহোল্ড মান সহ সাইটের উত্সে প্রয়োগ করা হয়৷ টপ-লেভেল ব্রাউজিং কনটেক্সট এবং একই অরিজিন নেস্টেড ব্রাউজিং কনটেক্সটগুলির <img> উপাদানগুলি শুধুমাত্র তখনই সাধারনভাবে রেন্ডার হবে যদি বাইট-প্রতি-পিক্সেল অনুপাত এই সীমাবদ্ধতাগুলি পূরণ করে। অন্য সব জায়গায় <img> উপাদানগুলি স্বাভাবিকভাবে রেন্ডার হবে।

বন্য মধ্যে শুধুমাত্র রিপোর্ট মোড

স্থানধারক ইমেজ সহ একটি সাইট প্রকাশ করা আপনি যা চান তা নাও হতে পারে। আপনি বিকাশ এবং স্টেজিংয়ের সময় এনফোর্সমেন্ট মোডে নীতিগুলি ব্যবহার করতে পারেন (প্লেসহোল্ডার ইমেজ হিসাবে রেন্ডার করা অঅপ্টিমাইজ করা ছবি সহ) এবং উৎপাদনে শুধুমাত্র রিপোর্ট মোড ব্যবহার করতে পারেন। (আরো বিশদ বিবরণের জন্য অনুমতি নীতি রিপোর্টিং দেখুন।) Permissions-Policy HTTP শিরোনামের অনুরূপ, Permissions-Policy-Report-Only হেডার আপনাকে কোনো প্রয়োগ ছাড়াই বন্যের মধ্যে লঙ্ঘন প্রতিবেদনগুলি পর্যবেক্ষণ করতে দেয়।

সীমাবদ্ধতা

ইমেজ নীতিগুলি শুধুমাত্র HTML ইমেজ এলিমেন্টে কাজ করে ( <img> , <source> , ইত্যাদি) এবং এখনও ব্যাকগ্রাউন্ড ইমেজ বা জেনারেট করা কন্টেন্টে সমর্থিত নয়। আপনি যদি বিস্তৃত বিষয়বস্তুতে নীতিগুলি সমর্থিত করতে চান, তাহলে অনুগ্রহ করে আমাদের জানান।

আপনার ছবি অপ্টিমাইজ করা

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

• ইমেজ অপ্টিমাইজ করা
• সঠিক মাত্রা সহ ছবি পরিবেশন করুন

আমাদের মতামত দিন

আশা করি এই নিবন্ধটি আপনাকে চিত্র নীতিগুলি সম্পর্কে ভাল ধারণা দিয়েছে এবং আপনাকে উত্তেজিত করেছে। আপনি নীতিগুলি পরীক্ষা করে দেখতে এবং আমাদের প্রতিক্রিয়া জানাতে আমরা সত্যিই পছন্দ করব৷

আপনি এই নিবন্ধে উল্লিখিত প্রতিটি বৈশিষ্ট্যের জন্য আমাদের মেইলিং তালিকায় প্রতিক্রিয়া জানাতে পারেন: feature-control@chromium.org ।

আমরা জানতে চাই যে আপনি কোন থ্রেশহোল্ড মানগুলি ব্যবহার করেছেন এবং দরকারী বলে মনে করেছেন৷ আমরা unoptimized-lossless-images বা unoptimized-lossless-images-strict আরও স্বজ্ঞাত এবং ব্যবহার করা সহজ কিনা তা জানতে চাই, অথবা এর পরিবর্তে আমাদের একটি পার্থক্য ওভারহেড ভাতা ব্যবহার করা উচিত কিনা। আমরা ট্রায়ালের শেষের কাছাকাছি একটি সমীক্ষা পাঠাব। সাথে থাকুন!