Images are often the heaviest and most prevalent resource on the web. As a result, optimizing images can significantly improve performance on your website. In most cases, optimizing images means reducing the network time by sending fewer bytes, but you can also optimize the amount of bytes sent to the user by serving images that are properly sized for the user's device.
Images can be added to a page using the <img> or <picture> elements , or the CSS background-image property .
ছবির আকার
ইমেজ রিসোর্স ব্যবহার করার সময় আপনি প্রথমে যে অপ্টিমাইজেশনটি করতে পারেন তা হল সঠিক আকারে ছবি প্রদর্শন করা—এই ক্ষেত্রে, সাইজ শব্দটি একটি ছবির মাত্রা বোঝায়। অন্য কোনও ভেরিয়েবল বিবেচনা না করে, ৫০০ পিক্সেল বাই ৫০০ পিক্সেল কন্টেইনারে প্রদর্শিত একটি ছবি ৫০০ পিক্সেল বাই ৫০০ পিক্সেলের সর্বোত্তম আকারের হবে। উদাহরণস্বরূপ, একটি বর্গাকার ১০০০ পিক্সেল ছবি ব্যবহার করার অর্থ হল ছবিটি প্রয়োজনের দ্বিগুণ বড়।
However, there are many variables involved in choosing the proper image size, making the task of choosing the proper image size in every case to be quite complicated. In 2010, when the iPhone 4 was released, the screen resolution (640x960) was double that of the iPhone 3 (320x480). However, the physical size of the iPhone 4's screen remained roughly the same as the iPhone 3.
Displaying everything at the higher resolution would have made text and images significantly smaller—half their previous size to be exact. Instead, 1 pixel became 2 device pixels . This is called the device pixel ratio (DPR) . The iPhone 4 (and many iPhone models released after) had a DPR of 2.
Revisiting the earlier example, if the device has a DPR of 2 and the image is displayed in a 500 pixel by 500 pixel container, then a square 1000 pixel image (referred to as the intrinsic size ) is now the optimal size. Similarly, if the device has a DPR of 3, then a square 1500 pixel image would be the optimal size.
srcset
The <img> element supports the srcset attribute, which lets you specify a list of possible image sources the browser may use. Each image source specified must include the image URL, and a width or pixel density descriptor.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
পূর্ববর্তী HTML স্নিপেটটি পিক্সেল ঘনত্বের বর্ণনাকারী ব্যবহার করে ব্রাউজারকে ইঙ্গিত দেয় যে, ১ ডিপিআরযুক্ত ডিভাইসে image-500.png , ২ ডিপিআরযুক্ত ডিভাইসে image-1000.jpg এবং ৩ ডিপিআরযুক্ত ডিভাইসে image-1500.jpg ব্যবহার করা উচিত।
While this all may seem cut and dry, a screen's DPR is not the only consideration in choosing the optimal image for a given page. The page's layout is yet another consideration.
sizes
The previous solution only works if you display the image at the same CSS pixel size on all viewports. In many cases, the layout of a page—and the container's size with it—changes depending on the user's device.
The sizes attribute lets you specify a set of source sizes, where each source size consists of a media condition and a value. The sizes attribute describes the intended display size of the image in CSS pixels. When combined with the srcset width descriptors, the browser can choose which image source is best for the user's device.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
পূর্ববর্তী HTML স্নিপেটে, srcset অ্যাট্রিবিউটটি ব্রাউজার যে ইমেজ ক্যান্ডিডেটগুলি থেকে বেছে নিতে পারে তার একটি তালিকা নির্দিষ্ট করে, কমা দ্বারা পৃথক করে। তালিকার প্রতিটি ক্যান্ডিডেট ছবির URL নিয়ে গঠিত, তারপরে একটি সিনট্যাক্স থাকে যা ছবির অভ্যন্তরীণ প্রস্থ নির্দেশ করে। একটি ছবির অভ্যন্তরীণ আকার হল এর মাত্রা। উদাহরণস্বরূপ, 1000w এর বর্ণনাকারী নির্দেশ করে যে ছবির অভ্যন্তরীণ প্রস্থ 1000 পিক্সেল প্রস্থ।
Using this information, the browser evaluates the media condition in the sizes attribute, and—in this case—is instructed that if the device's viewport width exceeds 768 pixels, the image is displayed at a width of 500 pixels. On smaller devices, the image is displayed at 100vw —or the full viewport width.
ব্রাউজারটি তখন এই তথ্য srcset ছবির উৎসের তালিকার সাথে একত্রিত করে সর্বোত্তম ছবি খুঁজে পেতে পারে। উদাহরণস্বরূপ, যদি ব্যবহারকারী এমন একটি মোবাইল ডিভাইস ব্যবহার করেন যার স্ক্রিন প্রস্থ 320 পিক্সেল এবং DPR 3, তাহলে ছবিটি 320 CSS pixels x 3 DPR = 960 device pixels এ প্রদর্শিত হবে। এই উদাহরণে, সবচেয়ে কাছের আকারের ছবিটি হবে image-1000.jpg যার অভ্যন্তরীণ প্রস্থ 1000 পিক্সেল ( 1000w )।
ফাইল ফর্ম্যাট
Browsers support several different image file formats. Modern image formats like WebP and AVIF may provide better compression than PNG or JPEG, making your image file size smaller and therefore taking less time to download. By serving images in modern formats, you can reduce a resource's load time , which may result in a lower Largest Contentful Paint (LCP) .
WebP is a widely supported format that works on all modern browsers. WebP often has better compression than JPEG, PNG, or GIF, offering both lossy and lossless compression . WebP also supports alpha channel transparency even when using lossy compression—a feature the JPEG codec doesn't offer.
AVIF is a newer image format, and while it isn't as widely supported as WebP, it does enjoy reasonably decent support across browsers . AVIF supports both lossy and lossless compression, and tests have shown greater than 50% savings when compared to JPEG in some cases. AVIF also offers Wide Color Gamut (WCG) and High Dynamic Range (HDR) features.
সংকোচন
Where images are concerned, there are two types of compression:
কোয়ান্টাইজেশনের মাধ্যমে ছবির নির্ভুলতা হ্রাস করে লসি কম্প্রেশন কাজ করে এবং ক্রোমা সাবস্যাম্পলিং ব্যবহার করে অতিরিক্ত রঙের তথ্য বাতিল করা যেতে পারে। প্রচুর শব্দ এবং রঙের উচ্চ-ঘনত্বের ছবিতে লসি কম্প্রেশন সবচেয়ে কার্যকর - সাধারণত একই রকম বিষয়বস্তু সহ ছবি বা চিত্রাবলী। এর কারণ হল লসি কম্প্রেশন দ্বারা উৎপাদিত শিল্পকর্মগুলি এই ধরনের বিস্তারিত ছবিতে লক্ষ্য করার সম্ভাবনা অনেক কম। তবে, লাইন আর্ট, একইভাবে স্পষ্ট বিবরণ বা পাঠ্যের মতো ধারালো প্রান্তযুক্ত চিত্রাবলীর ক্ষেত্রে লসি কম্প্রেশন কম কার্যকর হতে পারে। লসি কম্প্রেশন JPEG, WebP এবং AVIF ছবিতে প্রয়োগ করা যেতে পারে।
লসলেস কম্প্রেশন কোনও ডেটা ক্ষতি ছাড়াই একটি ছবি সংকুচিত করে ফাইলের আকার হ্রাস করে। লসলেস কম্প্রেশন একটি পিক্সেলকে তার পার্শ্ববর্তী পিক্সেল থেকে পার্থক্যের উপর ভিত্তি করে বর্ণনা করে। লসলেস কম্প্রেশন GIF, PNG, WebP, এবং AVIF ইমেজ ফর্ম্যাটের জন্য ব্যবহৃত হয়।
আপনি Squoosh , ImageOptim , অথবা কোন ইমেজ অপ্টিমাইজেশন পরিষেবা ব্যবহার করে আপনার ছবিগুলি সংকুচিত করতে পারেন। কম্প্রেস করার সময়, সকল ক্ষেত্রে উপযুক্ত একটি সার্বজনীন সেটিং থাকে না। প্রস্তাবিত পদ্ধতি হল বিভিন্ন কম্প্রেশন স্তর নিয়ে পরীক্ষা করা যতক্ষণ না আপনি ছবির মান এবং ফাইলের আকারের মধ্যে একটি ভাল আপস খুঁজে পান। কিছু উন্নত ইমেজ অপ্টিমাইজেশন পরিষেবা আপনার জন্য স্বয়ংক্রিয়ভাবে এটি করতে পারে, তবে সমস্ত ব্যবহারকারীর জন্য আর্থিকভাবে কার্যকর নাও হতে পারে।
<picture> উপাদান
The <picture> element gives you greater flexibility in specifying multiple image candidates:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg">
</picture>
যখন আপনি <picture> এলিমেন্টের মধ্যে <source> এলিমেন্ট(গুলি) ব্যবহার করেন, তখন আপনি AVIF এবং WebP ইমেজের জন্য সাপোর্ট যোগ করতে পারেন, কিন্তু যদি ব্রাউজার আধুনিক ফরম্যাট সমর্থন না করে তবে আরও সামঞ্জস্যপূর্ণ লিগ্যাসি ইমেজ ফরম্যাটে ফিরে যান। এই পদ্ধতির মাধ্যমে, ব্রাউজারটি প্রথম <source> এলিমেন্টটি বেছে নেয় যা মিলে যায়। যদি এটি সেই ফরম্যাটে ইমেজ রেন্ডার করতে পারে, তাহলে এটি সেই ইমেজটি ব্যবহার করে। অন্যথায়, ব্রাউজার পরবর্তী নির্দিষ্ট <source> এলিমেন্টে চলে যায়। পূর্ববর্তী HTML স্নিপেটে, WebP ফরম্যাটের চেয়ে AVIF ফরম্যাট অগ্রাধিকার পায়, যদি AVIF বা WebP কোনটিই সমর্থিত না হয় তবে JPEG ফরম্যাটে ফিরে আসে।
A <picture> element requires an <img> element nested inside of it. The alt , width , and height attributes are defined on the <img> and used regardless of which <source> is selected.
<source> এলিমেন্টটি media , srcset এবং sizes অ্যাট্রিবিউটগুলিকেও সমর্থন করে। একইভাবে পূর্ববর্তী <img> উদাহরণের মতো, এগুলি ব্রাউজারকে বিভিন্ন ভিউপোর্টে কোন ছবিটি নির্বাচন করতে হবে তা নির্দেশ করে।
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw">
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg">
</picture>
media অ্যাট্রিবিউটটি একটি media condition নেয়। পূর্ববর্তী উদাহরণে, ডিভাইসের DPR মিডিয়া কন্ডিশন হিসেবে ব্যবহৃত হয়। 1.5 এর চেয়ে বড় বা সমান DPR সহ যেকোনো ডিভাইস প্রথম <source> উপাদানটি ব্যবহার করবে। <source> উপাদানটি ব্রাউজারকে বলে যে, 768 পিক্সেলের চেয়ে চওড়া ভিউপোর্ট সহ ডিভাইসগুলিতে, নির্বাচিত চিত্র প্রার্থী 500 পিক্সেল প্রস্থে প্রদর্শিত হয়। ছোট ডিভাইসগুলিতে, এটি সম্পূর্ণ ভিউপোর্ট প্রস্থ দখল করে। media এবং srcset অ্যাট্রিবিউটগুলিকে একত্রিত করে, আপনি কোন চিত্রটি ব্যবহার করবেন তার উপর আরও সূক্ষ্ম নিয়ন্ত্রণ পেতে পারেন।
This is illustrated in the following table, where several viewport widths and device pixel ratios are evaluated:
| ভিউপোর্ট প্রস্থ (পিক্সেল) | ১টি ডিপিআর | ১.৫ ডিপিআর | ২ ডিপিআর | ৩টি ডিপিআর |
|---|---|---|---|---|
| ৩২০ | ৫০০.jpg | ৫০০.jpg | ৫০০.jpg | ১০০০.jpg |
| ৪৮০ | ৫০০.jpg | ৫০০.jpg | ১০০০.jpg | ১৫০০.jpg |
| ৫৬০ | ৫০০.jpg | ১০০০.jpg | ১০০০.jpg | ১৫০০.jpg |
| ১০২৪ | ৫০০.jpg | ১০০০.jpg | ১০০০.jpg | ১৫০০.jpg |
| ১৯২০ | ৫০০.jpg | ১০০০.jpg | ১০০০.jpg | ১৫০০.jpg |
১ এর ডিপিআর সহ ডিভাইসগুলি image-500.jpg ছবিটি ডাউনলোড করে, যার মধ্যে বেশিরভাগ ডেস্কটপ ব্যবহারকারীও অন্তর্ভুক্ত - যারা ৫০০ পিক্সেল প্রস্থের বহিরাগত আকারে ছবিটি দেখেন। অন্যদিকে, ৩ এর ডিপিআর সহ মোবাইল ব্যবহারকারীরা সম্ভাব্যভাবে বড় একটি image-1500.jpg ডাউনলোড করেন - একই ছবিটি ৩ এর ডিপিআর সহ ডেস্কটপ ডিভাইসগুলিতে ব্যবহৃত হয়।
<picture>
<source
media="(min-width: 561px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw">
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw">
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg">
</picture>
In this example, the <picture> element is adjusted to include an additional <source> element to use different images for wide devices with a high DPR:
| ভিউপোর্ট প্রস্থ (পিক্সেল) | ১টি ডিপিআর | ১.৫ ডিপিআর | ২ ডিপিআর | ৩টি ডিপিআর |
|---|---|---|---|---|
| ৩২০ | ৫০০.jpg | ৫০০.jpg | ১০০০-এসএম.জেপিজি | ১০০০-এসএম.জেপিজি |
| ৪৮০ | ৫০০.jpg | ৫০০.jpg | ১০০০-এসএম.জেপিজি | ১৫০০-sm.jpg |
| ৫৬০ | ৫০০.jpg | ১০০০-এসএম.জেপিজি | ১০০০-এসএম.জেপিজি | ১৫০০-sm.jpg |
| ১০২৪ | ৫০০.jpg | ১০০০.jpg | ১০০০.jpg | ১৫০০.jpg |
| ১৯২০ | ৫০০.jpg | ১০০০.jpg | ১০০০.jpg | ১৫০০.jpg |
এই অতিরিক্ত কোয়েরির সাহায্যে, আপনি দেখতে পাবেন যে image-1000-sm.jpg এবং image-1500-sm.jpg ছোট ভিউপোর্টে প্রদর্শিত হচ্ছে। এই অতিরিক্ত তথ্য আপনাকে ছবিগুলিকে আরও সংকুচিত করতে দেয়, কারণ কম্প্রেশন আর্টিফ্যাক্টগুলি সেই আকার এবং ঘনত্বে খুব বেশি দৃশ্যমান হয় না, এবং ডেস্কটপ ডিভাইসে ছবির মানের সাথে আপস করে না।
অন্যথায়, srcset এবং media অ্যাট্রিবিউটগুলি সামঞ্জস্য করে, আপনি ছোট ভিউপোর্টগুলিতে বড় ছবি পরিবেশন করা এড়াতে পারেন:
<picture>
<source
media="(min-width: 561px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x">
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x">
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg">
</picture>
পূর্ববর্তী HTML স্নিপেটে, ডিভাইস পিক্সেল অনুপাতের বর্ণনাকারীর পরিবর্তে প্রস্থ বর্ণনাকারীগুলি সরানো হয়েছে। মোবাইল ডিভাইসে পরিবেশিত ছবিগুলি /image-500.jpg বা /image-1000.jpg এর মধ্যে সীমাবদ্ধ, এমনকি 3 এর DPR সহ ডিভাইসগুলিতেও।
জটিলতা পরিচালনা করুন
প্রতিক্রিয়াশীল চিত্রগুলির সাথে কাজ করার সময়, আপনি প্রতিটি চিত্রের জন্য বিভিন্ন আকারের বৈচিত্র্য এবং ফর্ম্যাট খুঁজে পেতে পারেন। পূর্ববর্তী উদাহরণে, প্রতিটি আকারের বৈচিত্র্য ব্যবহার করা হয়েছে, তবে AVIF এবং WebP বাদ দিন। আপনার কতগুলি রূপ থাকা উচিত? অনেক ইঞ্জিনিয়ারিং সমস্যার মতো, উত্তরটি সাধারণত "এটি নির্ভর করে"।
যদিও সেরা ফিট প্রদানের জন্য অনেকগুলি বৈচিত্র্য থাকা লোভনীয় হতে পারে, প্রতিটি অতিরিক্ত চিত্রের বৈচিত্র্যের জন্য একটি খরচ হয় এবং ব্রাউজার ক্যাশের কম দক্ষতার ব্যবহার হয়। শুধুমাত্র একটি বৈচিত্র্যের সাথে, প্রতিটি ব্যবহারকারী একই চিত্র পান, তাই এটি খুব দক্ষতার সাথে ক্যাশ করা যেতে পারে।
অন্যদিকে, যদি অনেকগুলি বৈচিত্র থাকে, তবে প্রতিটি বৈকল্পিকের জন্য আরেকটি ক্যাশে এন্ট্রি প্রয়োজন। যদি বৈকল্পিকের ক্যাশে এন্ট্রির মেয়াদ শেষ হয়ে যায় এবং ছবিটি আবার মূল সার্ভার থেকে আনতে হয় তবে সার্ভারের খরচ বাড়তে পারে এবং কর্মক্ষমতা হ্রাস পেতে পারে।
এছাড়াও, প্রতিটি ভেরিয়েশনের সাথে আপনার HTML ডকুমেন্টের আকার বৃদ্ধি পায়। আপনি প্রতিটি ছবির জন্য একাধিক কিলোবাইট HTML পাঠাতে পারেন।
Accept request হেডারের উপর ভিত্তি করে ছবি পরিবেশন করুন
Accept HTTP অনুরোধ শিরোনাম সার্ভারকে জানায় যে ব্যবহারকারীর ব্রাউজার কোন ধরণের সামগ্রী বোঝে। এই তথ্যটি আপনার সার্ভার আপনার HTML প্রতিক্রিয়াগুলিতে অতিরিক্ত বাইট যোগ না করেই সর্বোত্তম চিত্র বিন্যাস পরিবেশন করতে ব্যবহার করতে পারে।
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
পূর্ববর্তী HTML স্নিপেটটি হল কোডের একটি সরলীকৃত সংস্করণ যা আপনি আপনার সার্ভারের জাভাস্ক্রিপ্ট ব্যাকএন্ডে যোগ করতে পারেন যাতে আপনি সর্বোত্তম চিত্র বিন্যাস নির্বাচন করতে এবং পরিবেশন করতে পারেন। যদি অনুরোধ Accept শিরোনামে image/avif থাকে, তাহলে AVIF চিত্রটি পরিবেশিত হয়। অন্যথায়, যদি Accept শিরোনামে image/webp থাকে, তাহলে WebP চিত্রটি পরিবেশিত হয়। যদি এই শর্তগুলির কোনওটিই সত্য না হয়, তাহলে JPEG চিত্রটি পরিবেশিত হয়।
আপনি প্রায় সব ধরণের ওয়েব সার্ভারে Accept request হেডারের বিষয়বস্তুর উপর ভিত্তি করে প্রতিক্রিয়া পরিবর্তন করতে পারেন—উদাহরণস্বরূপ, আপনি mod_rewrite ব্যবহার করে Accept হেডারের উপর ভিত্তি করে Apache সার্ভারে চিত্র অনুরোধগুলি পুনর্লিখন করতে পারেন।
এটি ইমেজ কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN)- তে আপনি যে আচরণটি পাবেন তার থেকে আলাদা নয়। ইমেজ সিডিএন হল ব্যবহারকারীর ডিভাইস এবং ব্রাউজারের উপর ভিত্তি করে ছবি অপ্টিমাইজ করার এবং সর্বোত্তম ফর্ম্যাট পাঠানোর জন্য চমৎকার সমাধান।
মূল বিষয় হল ভারসাম্য খুঁজে বের করা, যুক্তিসঙ্গত সংখ্যক ছবির প্রার্থী তৈরি করা এবং ব্যবহারকারীর অভিজ্ঞতার উপর প্রভাব পরিমাপ করা। বিভিন্ন ছবি বিভিন্ন ফলাফল দিতে পারে এবং প্রতিটি ছবিতে প্রয়োগ করা অপ্টিমাইজেশন পৃষ্ঠার মধ্যে এর আকার এবং আপনার ব্যবহারকারীরা কোন ডিভাইসগুলি ব্যবহার করছেন তার উপর নির্ভর করে। উদাহরণস্বরূপ, একটি পূর্ণ-প্রস্থের হিরো ছবির জন্য একটি ই-কমার্স পণ্য তালিকা পৃষ্ঠায় থাম্বনেইল ছবির চেয়ে বেশি ভেরিয়েন্টের প্রয়োজন হতে পারে।
অলস লোডিং
loading অ্যাট্রিবিউট ব্যবহার করে ভিউপোর্টে ছবিগুলি উপস্থিত হলে ব্রাউজারকে লেজি লোড করতে বলা সম্ভব। lazy একটি অ্যাট্রিবিউট মান ব্রাউজারকে ভিউপোর্টে (অথবা কাছাকাছি) না থাকা পর্যন্ত ছবিটি ডাউনলোড না করার নির্দেশ দেয়। এটি ব্যান্ডউইথ সাশ্রয় করে, ব্রাউজারকে ভিউপোর্টে ইতিমধ্যেই থাকা গুরুত্বপূর্ণ কন্টেন্ট রেন্ডার করার জন্য প্রয়োজনীয় রিসোর্সগুলিকে অগ্রাধিকার দিতে দেয়।
ডিকোডিং অ্যাট্রিবিউট
decoding অ্যাট্রিবিউট ব্রাউজারকে বলে যে কীভাবে ছবিটি ডিকোড করা উচিত। তিনটি সম্ভাব্য মান রয়েছে:
-
asyncব্রাউজারকে বলে যে ছবিটি অ্যাসিঙ্ক্রোনাসভাবে ডিকোড করা যেতে পারে, যা অন্যান্য কন্টেন্ট রেন্ডার করার সময়কে উন্নত করতে পারে। -
syncব্রাউজারকে বলে যে ছবিটি অন্যান্য সামগ্রীর সাথে একই সময়ে উপস্থাপন করা উচিত। -
auto(ডিফল্ট) ব্রাউজারকে ব্যবহারকারীর জন্য কোনটি সবচেয়ে ভালো তা সিদ্ধান্ত নিতে দেয়।
DOM-এ একটি ছবি সন্নিবেশ করার সময়, আপনি জাভাস্ক্রিপ্টের HTMLImageElement এর একটি উদাহরণে decode পদ্ধতি ব্যবহার করতে পারেন।
ছবির ডেমো
তোমার জ্ঞান পরীক্ষা করো
কোন ইমেজ ফরম্যাট লসলেস কম্প্রেশন সমর্থন করে?
কোন ইমেজ ফরম্যাট লজি কম্প্রেশন সমর্থন করে?
প্রস্থ বর্ণনাকারী (উদাহরণস্বরূপ, 1000w ) ব্রাউজারকে srcset অ্যাট্রিবিউটে নির্দিষ্ট করা একটি চিত্র প্রার্থী সম্পর্কে কী বলে?
sizes অ্যাট্রিবিউট ব্রাউজারকে কোন <img> এলিমেন্টে প্রয়োগ করা হয়েছে তা সম্পর্কে কী বলে?
<img> এলিমেন্টের srcset এ নির্দিষ্ট করা কোন প্রার্থী লোড করা উচিত তা প্রকাশ করে এমন লজিক।<img> এলিমেন্টের srcset অ্যাট্রিবিউট থেকে লোড করা ছবির অভ্যন্তরীণ প্রস্থ।পরবর্তী: ভিডিও পারফর্ম্যান্স
যদিও ছবিগুলি ওয়েবে সবচেয়ে বেশি ব্যবহৃত মিডিয়া টাইপ হতে পারে, পারফরম্যান্সের ক্ষেত্রে এগুলিই একমাত্র মিডিয়া যা আপনার মনে রাখা উচিত নয়। ভিডিও হল ওয়েব জুড়ে ব্যবহৃত আরেকটি সাধারণ ধরণের মিডিয়া, এবং এর নিজস্ব পারফরম্যান্স বিবেচনা রয়েছে। এই কোর্সের পরবর্তী মডিউলে , ভিডিওগুলি অপ্টিমাইজ করার কিছু কৌশল এবং কীভাবে সেগুলি দক্ষতার সাথে লোড করা যায় তা অন্বেষণ করুন।