ওয়েব পেজে ছবি দেখানোর HTML টেকনিক
আধুনিক ওয়েব ডিজাইনে ছবি প্রদর্শন একটি অপরিহার্য উপাদান। HTML-এর <img> ট্যাগ ব্যবহার করে আমরা সহজেই যেকোনো ওয়েবপেজে ছবি যোগ করতে পারি।[1][2][3]
Instructional banner in Bengali explaining how to display images in HTML.
মৌলিক HTML ইমেজ কোড
ওয়েবপেজে ছবি প্রদর্শনের জন্য <img> ট্যাগ ব্যবহার করা হয়। এটি একটি self-closing বা empty element, যার কোন শেষ ট্যাগ থাকে না।[4][2][5]
<img src=”ছবির-নাম.jpg” alt=”ছবির বর্ণনা” width=”৯৬০” height=”৬৪০”>
প্রয়োজনীয় অ্যাট্রিবিউটসমূহ
src অ্যাট্রিবিউট: এই অ্যাট্রিবিউট ছবির ফাইলের পূর্ণ পথ নির্দেশ করে। এটি relative path অথবা absolute path দুভাবেই দেওয়া যায়।[4][6]
alt অ্যাট্রিবিউট: ছবি লোড না হলে এই টেক্সট প্রদর্শিত হয়। এটি accessibility এবং SEO-এর জন্য অত্যন্ত গুরুত্বপূর্ণ।[2][3][6][4]
HTML5 img tag basics with src, alt, width, height in Bengali tutorial.
ছবির আকার নির্ধারণ
width এবং height অ্যাট্রিবিউট: ছবির প্রস্থ ও উচ্চতা পিক্সেলে নির্ধারণ করে। এটি page layout shift প্রতিরোধ করে এবং লোডিং পারফরম্যান্স উন্নত করে।[4][2][3][7][6]
<img src=”nature.jpg” alt=”প্রকৃতির দৃশ্য” width=”৯৬০” height=”৬৪০”>
রেসপন্সিভ ইমেজ তৈরি
আধুনিক ওয়েব ডিজাইনে রেসপন্সিভ ছবি অপরিহার্য। বিভিন্ন ডিভাইসে ছবি সুন্দরভাবে প্রদর্শনের জন্য CSS ব্যবহার করতে হয়।[8][9][10][11]
CSS টেকনিক
.responsive {
width: 100%;
height: auto;
}
অথবা সর্বোচ্চ প্রস্থ নির্ধারণের জন্য:
.responsive {
max-width: 100%;
height: auto;
}
Website news page layout showing a grid system for responsive design and content alignment.
উন্নত রেসপন্সিভ কৌশল
srcset অ্যাট্রিবিউট: বিভিন্ন স্ক্রিন রেজোলিউশনের জন্য আলাদা ছবি সরবরাহ করে। এটি ব্যান্ডউইথ সাশ্রয় করে এবং দ্রুত লোডিং নিশ্চিত করে।[12][13]
picture element: art direction এবং format selection এর জন্য ব্যবহৃত হয়।[13][12]
<picture>
<source media=”(width < 800px)” srcset=”mobile-image.jpg”>
<source media=”(width >= 800px)” srcset=”desktop-image.jpg”>
<img src=”default-image.jpg” alt=”প্রতিক্রিয়াশীল ছবি”>
</picture>
পারফরম্যান্স অপটিমাইজেশন
ছবির ফরম্যাট: WebP এবং AVIF ফরম্যাট ব্যবহার করুন উন্নত কম্প্রেশনের জন্য।[12][10]
Lazy Loading: দৃশ্যমান ছবিগুলো প্রথমে লোড করুন।[14][12]
<img src=”image.jpg” alt=”ছবি” loading=”lazy”>
CDN ব্যবহার: ছবিগুলো দ্রুত ডেলিভারির জন্য Content Delivery Network ব্যবহার করুন।[10][12]
সেরা অনুশীলন
গ্রিড সিস্টেম: Flexbox এবং CSS Grid ব্যবহার করে ছবিগুলো সুন্দরভাবে সাজান।[10][11]
মোবাইল-ফার্স্ট ডিজাইন: প্রথমে মোবাইল ডিভাইসের জন্য ডিজাইন করুন, তারপর বড় স্ক্রিনের জন্য সম্প্রসারিত করুন।[11][10]
SVG ব্যবহার: আইকন এবং লোগোর জন্য স্কেলেবল ভেক্টর গ্রাফিক্স ব্যবহার করুন।[10][11]
ওয়েব ডেভেলপমেন্টে ছবি প্রদর্শন একটি গুরুত্বপূর্ণ দক্ষতা। সঠিক HTML কোড, CSS স্টাইলিং এবং রেসপন্সিভ ডিজাইন কৌশল প্রয়োগ করে আপনি যেকোনো ডিভাইসে নিখুঁত ছবি প্রদর্শন নিশ্চিত করতে পারবেন।
<div style=”text-align: center”>⁂</div>
1.
2. https://www.w3schools.com/tags/tag_img.asp
3. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img
4. https://www.geeksforgeeks.org/html/html-img-tag/
5. https://blog.suhanurrahman.com/html-tutorial-in-bangla/
6. https://www.webcoachbd.com/html-tutorials/html-images
7. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images
8. https://www.w3schools.com/howto/howto_css_image_responsive.asp
9. https://www.w3schools.com/css/css_rwd_images.asp
10. https://www.andacademy.com/resources/blog/ui-ux-design/what-is-responsive-design/
11. https://www.guvi.in/blog/tips-and-tricks-for-responsive-design/
12. https://onenine.com/10-responsive-image-techniques-for-faster-websites/
13. https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images
14. https://www.browserstack.com/guide/responsive-image-gallery-html-css
15. https://www.shutterstock.com/search/web-development
16. https://www.vecteezy.com/free-photos/web-development
17. https://www.freepik.com/free-photos-vectors/web-developer
18. https://www.istockphoto.com/photos/web-development-office
19. https://unsplash.com/s/photos/web-developer
20.
21. https://unsplash.com/s/photos/web-development
22. https://dev.to/mechcloud_academy/5-advanced-css-techniques-for-responsive-web-design-1ii2
23.
24.
25.
26. https://www.linkedin.com/pulse/responsive-web-design-principles-best-practices-cyclobold-tech-avygf
27. https://www.freepik.com/free-photos-vectors/web-development
28. https://www.designstudiouiux.com/blog/responsive-web-design-best-practices/
29. https://www.umztechnologies.com/responsive-design/
30.
31. https://www.infotechwayout.com/responsive-web-design-company-kolkata
32.
33. https://www.designstudiouiux.com/blog/why-responsive-web-design-important/
34. https://www.slideshare.net/slideshow/bangla-html/19930927
Comments
Post a Comment