আধুনিক স্ক্রিনে ছবি অপটিমাইজেশনের কৌশল

 আধুনিক স্ক্রিনে ছবি অপটিমাইজেশনের কৌশল

আজকালকার স্মার্টফোন, ট্যাবলেট এবং কম্পিউটারের স্ক্রিনগুলো আর আগের মতো সাধারণ রেজোলিউশনের নয়। বর্তমানে বেশিরভাগ ডিভাইসে রেটিনা ডিসপ্লে বা উচ্চ পিক্সেল ডেনসিটি সম্পন্ন স্ক্রিন রয়েছে। এই আধুনিক স্ক্রিনগুলো ২x, ৩x এমনকি ৪x পর্যন্ত পিক্সেল ডেনসিটি প্রদান করে, যার ফলে ছবিগুলো অসাধারণ স্পষ্টতা এবং বিস্তারিত তথ্যসহ প্রদর্শিত হয়।^[1][2][3][4]

Comparison of iPhone screen points and pixels with Retina and higher density display scaling from original iPhone to iPhone X

পিক্সেল ডেনসিটি কী এবং কেন গুরুত্বপূর্ণ

পিক্সেল ডেনসিটি বলতে প্রতি ইঞ্চিতে কতগুলো পিক্সেল রয়েছে তা বোঝায়, যা PPI (Pixels Per Inch) দিয়ে পরিমাপ করা হয়। স্ট্যান্ডার্ড স্ক্রিনে ১x ডেনসিটি থাকে, যেখানে ১টি CSS পিক্সেল = ১টি ফিজিক্যাল পিক্সেল। কিন্তু রেটিনা বা হাই-ডিপিআই স্ক্রিনে:^[1][5][6][7]

· ২x ডেনসিটি: ১টি CSS পিক্সেল = ৪টি ফিজিক্যাল পিক্সেল (২×২)

· ৩x ডেনসিটি: ১টি CSS পিক্সেল = ৯টি ফিজিক্যাল পিক্সেল (৩×৩)

· ৪x ডেনসিটি: ১টি CSS পিক্সেল = ১৬টি ফিজিক্যাল পিক্সেল (৪×৪)

বর্তমানে আইফোনের রেটিনা ডিসপ্লেতে ৪০০+ PPI এবং ৪K মনিটরে (২৭ ইঞ্চি) প্রায় ১৬০-১৭০ PPI রয়েছে। ৩০০ PPI এর উপরে যেকোনো ডিসপ্লেকে হাই-ডেনসিটি বলে গণ্য করা হয়।^[5][6]

ছবি অপটিমাইজেশনের চ্যালেঞ্জ

যদি আপনি একটি ১০০×১০০ পিক্সেলের ছবি ২x ডেনসিটির স্ক্রিনে দেখান, তাহলে সেটি ঝাপসা দেখাবে কারণ প্রতিটি মূল পিক্সেল ৪টি ফিজিক্যাল পিক্সেল জুড়ে প্রসারিত হবে। এই সমস্যা ৩x বা ৪x ডেনসিটিতে আরও গুরুতর হয়ে ওঠে।^[8]

তবে সব ডিভাইসে সর্বোচ্চ মানের ছবি পরিবেশন করাও সমাধান নয়, কারণ এতে:^[9][10]

· অতিরিক্ত ব্যান্ডউইথ খরচ হয়

· পেজ লোডিং স্লো হয়

· মোবাইল ডেটা অপচয় হয়

HTML দিয়ে রেসপন্সিভ ইমেজ তৈরি

Srcset অ্যাট্রিবিউট ব্যবহার

বিভিন্ন স্ক্রিন ডেনসিটির জন্য আলাদা ছবি পরিবেশন করতে srcset অ্যাট্রিবিউট ব্যবহার করুন:^[3][9]

<img src=”ছবি.jpg”
srcset=”ছবি.jpg 1x,
ছবি-2x.jpg 2x,
ছবি-3x.jpg 3x”
alt=”রেসপন্সিভ ছবি”>

এখানে ব্রাউজার স্বয়ংক্রিয়ভাবে ডিভাইসের পিক্সেল ডেনসিটি অনুযায়ী উপযুক্ত ছবি নির্বাচন করবে।^[9][11]

স্ক্রিন সাইজ অনুযায়ী ছবি

বিভিন্ন স্ক্রিন সাইজের জন্য আলাদা ছবি পরিবেশন করতে:^[3][12]

<img src=”ছবি-৮০০.jpg”
srcset=”ছবি-৪০০.jpg 400w,
ছবি-৮০০.jpg 800w,
ছবি-১২০০.jpg 1200w”
sizes=”(max-width: 600px) 100vw,
(max-width: 1024px) 80vw,
1200px”
alt=”রেসপন্সিভ ছবি”>

এই পদ্ধতিতে:^[9][12]

· ৬০০px বা তার কম প্রস্থের ভিউপোর্টে ৪০০px চওড়া ছবি লোড হবে

· ৬০০-১০২৪px ভিউপোর্টে ৮০০px চওড়া ছবি লোড হবে

· ১০২৪px এর বড় ভিউপোর্টে ১২০০px চওড়া ছবি লোড হবে

উন্নত অপটিমাইজেশন কৌশল

ছবির ফরম্যাট নির্বাচন

বিভিন্ন ধরনের ছবির জন্য উপযুক্ত ফরম্যাট ব্যবহার করুন:^[3][13]

· JPEG: ফটোগ্রাফ ও রঙিন ছবির জন্য আদর্শ

· PNG: লোগো, আইকন ও স্বচ্ছ ব্যাকগ্রাউন্ডের জন্য উত্তম

· WebP/AVIF: আধুনিক ফরম্যাট যা ভালো কম্প্রেশন প্রদান করে^[10]

হাই-ডেনসিটি স্ক্রিনের জন্য কম্প্রেশন

হাই-ডেনসিটি স্ক্রিনের জন্য ছবি তৈরি করার সময় একটি চমৎকার কৌশল হলো কম্প্রেশন কোয়ালিটি কমিয়ে দেওয়া। কারণ উচ্চ পিক্সেল ডেনসিটিতে মানুষের চোখ কম্প্রেশন আর্টিফ্যাক্ট তেমন ভালো ধরতে পারে না।^[14]

উদাহরণস্বরূপ:^[14]

· ১x ইমেজ: ১৪.৯ KB (কোয়ালিটি ৮০)

· ২x ইমেজ: ২১.২ KB (কোয়ালিটি ৫০-৬০)

এভাবে ফাইল সাইজ খুব বেশি না বাড়িয়েই উচ্চ মানের ভিজুয়াল পাওয়া যায়।

ব্যবহারিক উদাহরণ

মোবাইল-ফার্স্ট অ্যাপ্রোচ

আধুনিক ওয়েবসাইটের ৫০% এর বেশি ট্রাফিক মোবাইল থেকে আসে। তাই মোবাইল ডিভাইসের জন্য অপটিমাইজড ছবি পরিবেশন করা অত্যন্ত গুরুত্বপূর্ণ।^[10]

CSS মিডিয়া কোয়েরি

CSS দিয়ে বিভিন্ন স্ক্রিন সাইজের জন্য আলাদা ছবি সেট করতে পারেন:^[3]

@media screen and (max-width: 600px) {
.responsive-image {
background-image: url(’ছোট-ছবি.jpg’);
}
}

@media screen and (min-width: 601px) and (max-width: 1200px) {
.responsive-image {
background-image: url(’মাঝারি-ছবি.jpg’);
}
}

@media screen and (min-width: 1201px) {
.responsive-image {
background-image: url(’বড়-ছবি.jpg’);
}
}

পারফরমেন্স উন্নতির টিপস

Lazy Loading

গুরুত্বপূর্ণ নয় এমন ছবিগুলোর জন্য lazy loading ব্যবহার করুন:^[15]

<img src=”ছবি.jpg” loading=”lazy” alt=”বর্ণনা”>

ছবির ডাইমেনশন নির্ধারণ

Layout shift এড়াতে সবসময় ছবির width ও height নির্দিষ্ট করুন:^[15][12]

<img src=”ছবি.jpg” width=”800” height=”600” alt=”বর্ণনা”>

সাধারণ স্ক্রিন রেজোলিউশন

বর্তমানে সবচেয়ে জনপ্রিয় স্ক্রিন রেজোলিউশনগুলো হলো:^[16]

ডেস্কটপ:

· ১৯২০×১০৮০

· ১৫৩৬×৮৬৪

· ১৩৬৬×৭৬৮

মোবাইল:

· ৩৬০×৮০০

· ৩৯০×৮৪৪

· ৩৯৩×৮৭৩

ট্যাবলেট:

· ৭৬৮×১০২৪

· ৮১০×১০৮০

· ৮২০×১১৮০

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

⁂

1. https://en.wikipedia.org/wiki/Retina_display

2. http://web.simmons.edu/~grovesd/comm328/modules/responsive-media/overview

3. https://moldstud.com/articles/p-responsive-images-how-to-optimize-images-for-different-screen-resolutions

4. https://www.eizoglobal.com/library/basics/pixel_density_4k/index.html

5. https://www.portotheme.com/what-is-pixel-density-and-why-it-matters-in-theme-design/

6. https://help.fabrik.io/en/articles/99670-retina-and-hi-dpi-images

7. https://en.wikipedia.org/wiki/Pixel_density

8. https://imagekit.io/glossary/what-is-device-pixel-ratio/

9. https://uploadcare.com/blog/srcset-images/

10. https://onenine.com/how-to-optimize-website-images/

11. https://cloudfour.com/thinks/responsive-images-101-part-3-srcset-display-density/

12. https://onenine.com/10-responsive-image-techniques-for-faster-websites/

13. https://angulardive.com/blog/how-to-optimize-images-for-different-screen-resolutions-and-retina-displays/

14. https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/

15. https://www.speedcurve.com/web-performance-guide/best-practices-for-optimizing-images/

16. https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design

17. https://bluegiftdigital.com/multiple-screen-resolutions-affect-web-design/

18. https://web.dev/articles/high-dpi

19. https://www.reddit.com/r/Monitors/comments/113qry1/understanding_hidpi_retina_display/

20. https://belovdigital.agency/blog/designing-for-different-screen-sizes-best-practices/

21. https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images

22. https://www.browserstack.com/guide/dpi-and-screen-resolution

23. https://web.dev/learn/design/responsive-images

24. https://doc.qt.io/qt-6/highdpi.html

25. https://teamtreehouse.com/community/what-does-designing-at-1x-2x-3x-mean-how-does-it-factor-into-photoshop-and-sketch-for-example

26.

27.

28. https://blog.prototypr.io/making-sense-of-device-resolution-pixel-density-40922aeb8a6

29.

30. https://pixboost.com/blog/optimising-images-for-high-dpi-displays/

31.

32. https://developer.apple.com/design/human-interface-guidelines/images

33.

34. https://developer.android.com/training/multiscreen/screendensities

35. https://www.browserstack.com/guide/strategies-for-optimizing-images-for-mobile

36.

37. https://help.blocsapp.com/knowledge-base/multi-resolution-images/