HTML ইমেজের অ্যাডজাস্টমেন্ট ও অপ্টিমাইজেশন
ইমেজের অ্যাডজাস্টমেন্টও অপ্টিমাইজেশন** (রেসপনসিভ ইমেজ) | image adjustment and optimization (responsive image) করার জন্য কোড
নিচে একটি উদাহরণ দেওয়া হলো যেখানে ইমেজকে রেসপনসিভ এবং অপ্টিমাইজড করার জন্য
CSS ব্যবহার করা হয়েছে:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Example</title>
<style>
/* রেসপনসিভ ইমেজ */
.responsive-img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto; /* ইমেজকে সেন্টার করার জন্য */
border-radius: 10px; /* গোলাকার কোণ */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ইমেজে ছায়া যোগ করা */
}
</style>
</head>
<body>
<h1>রেসপনসিভ এবং অপ্টিমাইজড ইমেজ</h1>
<!-- রেসপনসিভ ইমেজ -->
<img src="https://via.placeholder.com/800x400" alt="Responsive Placeholder Image" class="responsive-img">
<p>উপরের ইমেজটি রেসপনসিভ, যা বিভিন্ন ডিভাইসের স্ক্রিন সাইজ অনুযায়ী নিজেকে অ্যাডজাস্ট করবে।</p>
</body>
</html>
ব্যাখ্যা:
-
max-width: 100%;→ ইমেজটি তার প্যারেন্ট কন্টেইনারের সর্বোচ্চ চওড়ায় সীমাবদ্ধ থাকবে, তবে ছোট স্ক্রিনে এটি সংকুচিত হবে। -
height: auto;→ এটি ইমেজের আসল অনুপাত বজায় রাখবে এবং অপ্রয়োজনীয় টান বা সংকোচন এড়াবে। -
display: block; margin: 0 auto;→ ইমেজটিকে সেন্টার করতে ব্যবহৃত হয়। -
border-radius: 10px;→ ইমেজের কোণগুলো গোলাকার করে। -
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);→ ইমেজকে হালকা ছায়া দিয়ে আরও আকর্ষণীয় করে।
রেসপনসিভ ইমেজের জন্য picture ট্যাগ ব্যবহার (ভিন্ন স্ক্রিনের জন্য আলাদা ইমেজ লোড করা)
<picture>
<source srcset="small.jpg" media="(max-width: 600px)">
<source srcset="medium.jpg" media="(max-width: 1024px)">
<img src="large.jpg" alt="Optimized Image" class="responsive-img">
</picture>
<picture> ট্যাগ ব্যবহার করলে:-
ছোট স্ক্রিনে
small.jpgলোড হবে -
মাঝারি স্ক্রিনে
medium.jpgলোড হবে -
বড় স্ক্রিনে
large.jpgলোড হবে
এই কোড কীভাবে সাহায্য করবে?
✅ রেসপনসিভ ডিজাইন
✅ লোড টাইম কমানো
✅ ছোট স্ক্রিনের জন্য ছোট ইমেজ লোড করা
✅ ইউজার এক্সপেরিয়েন্স উন্নত করা
এটি ব্যবহার করে আপনি যেকোনো ওয়েবসাইটে ইমেজের সঠিক অ্যাডজাস্টমেন্ট ও অপ্টিমাইজেশন করতে পারবেন। 🎯🚀
