কিভাবে বিভিন্ন উপায়ে html এ একটি ছবির সাইজ সামঞ্জস্য করা যায়

আপনি কি আপনার ওয়েব পৃষ্ঠায় একটি ছবি সন্নিবেশ করতে চান, কিন্তু আপনি জানেন না কিভাবে ডিজাইনের সাথে মানানসই এর আকার সামঞ্জস্য করা যায়? আপনি কি একটি চিত্রের প্রস্থ এবং উচ্চতা পরিবর্তন করতে HTML ট্যাগ এবং বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তা শিখতে চান? আপনি কি প্রতিটি পদ্ধতির সুবিধা এবং অসুবিধাগুলি জানেন? উত্তর যদি হ্যাঁ হয়, তাহলে এই নিবন্ধটি আপনার জন্য।

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

এইচটিএমএল-এ একটি চিত্র কী এবং এটি কীভাবে সন্নিবেশ করা যায়

এইচটিএমএল-এ একটি চিত্র হল একটি উপাদান যা আপনাকে প্রদর্শন করতে দেয় একটি বস্তুর একটি চাক্ষুষ উপস্থাপনা, একজন ব্যক্তি, একটি ল্যান্ডস্কেপ বা অন্য কিছু। html এ একটি ছবি সন্নিবেশ করতে ট্যাগ ব্যবহার করা হয় , যা একটি খালি ট্যাগ, যেমন যে কোন বন্ধ আছে.

লেবেল এর বেশ কয়েকটি বৈশিষ্ট্য রয়েছে যা আপনাকে চিত্রের তথ্য এবং বৈশিষ্ট্যগুলি নির্দিষ্ট করতে দেয়। সবচেয়ে গুরুত্বপূর্ণ হল:

• src: ইমেজ ফাইলের পাথ বা ঠিকানা নির্দেশ করে এমন বৈশিষ্ট্য। এটি একটি আপেক্ষিক পথ হতে পারে (একই ওয়েবসাইটের মধ্যে) বা একটি পরম পথ (অন্য ওয়েবসাইটে)। উদাহরণ স্বরূপ: হয় .
• Alt: এটি এমন একটি বৈশিষ্ট্য যা চিত্রের বিকল্প পাঠকে নির্দেশ করে, অর্থাৎ, চিত্রটি লোড করা যায় না বা একটি স্ক্রিন রিডার ব্যবহার করা হলে যে পাঠ্যটি প্রদর্শিত হয়। এটি একটি বাধ্যতামূলক বৈশিষ্ট্য এবং ছবির বিষয়বস্তু বা ফাংশন বর্ণনা করতে হবে। উদাহরণ স্বরূপ:.
• খেতাব: ইমেজ শিরোনাম নির্দেশ করে যে বৈশিষ্ট্য, অর্থাৎ, কার্সার ঘোরালে পাঠ্য প্রদর্শিত হয় ইমেজ সম্পর্কে। এটি একটি ঐচ্ছিক বৈশিষ্ট্য এবং Alt টেক্সট থেকে ভিন্ন হতে পারে। উদাহরণ স্বরূপ: .

প্রস্থ এবং উচ্চতা বৈশিষ্ট্য ব্যবহার করে আকার সামঞ্জস্য কিভাবে

এইচটিএমএলে একটি চিত্রের আকার সামঞ্জস্য করার সবচেয়ে সহজ উপায়গুলির মধ্যে একটি প্রস্থ এবং উচ্চতা বৈশিষ্ট্য ব্যবহার করা হয়) যা আপনাকে পিক্সেলে ছবির প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে দেয়। উদাহরণ স্বরূপ:

এই বৈশিষ্ট্যগুলির কিছু সুবিধা এবং অসুবিধা রয়েছে:

• Ventajas:
  • এগুলি ব্যবহার করা সহজ এবং কোনও অতিরিক্ত জ্ঞানের প্রয়োজন নেই।
  • তারা আপনাকে ছবিটি লোড করার আগে প্রয়োজনীয় স্থান সংরক্ষণ করার অনুমতি দেয়, যা লোড করার সময় পৃষ্ঠাটিকে লাফানো বা পরিবর্তন হতে বাধা দেয়।
  • আপনাকে এর বিকল্প দেয় নকশার সাথে ছবির আকার মানিয়ে নিন মূল ফাইলটি পরিবর্তন না করেই পৃষ্ঠার।
• অসুবিধেও:
  • আসল আকার ছাড়া অন্য মান ব্যবহার করা হলে তারা চিত্রের আকৃতির অনুপাত বা গুণমানকে বিকৃত করতে পারে।
  • এটি ব্যবহারকারীর স্ক্রীন বা ডিভাইসের আকার অনুযায়ী চিত্রের আকার সামঞ্জস্য করার অনুমতি দেয় না।
  • তারা প্রভাব প্রয়োগ করার অনুমতি দেয় না বা ছবিতে অতিরিক্ত শৈলী।

কিভাবে CSS ব্যবহার করে html এ একটি ইমেজ রিসাইজ করা যায়

অন্য উপায় আরো উন্নত এবং নমনীয় HTML এ একটি চিত্রের আকার সামঞ্জস্য করার জন্য CSS (ক্যাসকেডিং স্টাইল শীট) ব্যবহার করা, যা এমন একটি ভাষা যা আপনাকে এইচটিএমএল উপাদানগুলিতে শৈলীগুলি সংজ্ঞায়িত করতে এবং প্রয়োগ করতে দেয়৷ CSS ব্যবহার করতে আপনি ট্যাগ ব্যবহার করতে পারেন html ডকুমেন্টের ভিতরে, একটি .css এক্সটেনশন সহ একটি বহিরাগত ফাইল। উদাহরণ স্বরূপ:

img { width: 500px; height: 600px; } হয়

CSS ব্যবহার করার কিছু সুবিধা এবং অসুবিধা রয়েছে:

• Ventajas:
  • অবজেক্ট-ফিট প্রপার্টি বা calc() ফাংশন ব্যবহার করে আনুপাতিকভাবে ছবির আকার সামঞ্জস্য করতে আপনাকে অনুমতি দেয়।
  • ছবির আকার সামঞ্জস্য করা যাক আপেক্ষিক ইউনিট (%, em, vw, vh) বা মিডিয়া কোয়েরি ব্যবহার করে ব্যবহারকারীর স্ক্রীন বা ডিভাইসের আকারের উপর নির্ভর করে।
  • অতিরিক্ত প্রভাব বা শৈলী চিত্রে প্রয়োগ করা যেতে পারে, যেমন সীমানা, ছায়া, ফিল্টার বা রূপান্তর।
• অসুবিধেও:
  • CSS ভাষার বৃহত্তর জ্ঞান এবং দক্ষতার প্রয়োজন।
  • দ্বন্দ্ব বা অসঙ্গতি তৈরি করতে পারে পৃষ্ঠা বা ছবিতে প্রয়োগ করা অন্যান্য শৈলী সহ।
  • এটি কর্মক্ষমতা বা পৃষ্ঠা লোডিং গতি প্রভাবিত করতে পারে যদি অনেকগুলি শৈলী বা প্রভাব ব্যবহার করা হয়।

একটি বহিরাগত প্রোগ্রাম ব্যবহার করে আকার সামঞ্জস্য কিভাবে

সামঞ্জস্য করার জন্য একটি তৃতীয় বিকল্প html এ একটি ছবির আকার একটি বাহ্যিক প্রোগ্রাম ব্যবহার করা যা আপনাকে পৃষ্ঠায় ঢোকানোর আগে চিত্র ফাইলের আকার পরিবর্তন করতে দেয়। এই প্রোগ্রামগুলির মধ্যে কয়েকটি হল:

• জিআইএমপি: একটি বিনামূল্যের এবং ওপেন সোর্স প্রোগ্রাম যা আপনাকে পেশাগতভাবে ছবি সম্পাদনা করতে এবং ম্যানিপুলেট করতে দেয়৷ GIMP এর সাহায্যে আপনি একটি চিত্রের আকার পরিবর্তন করতে পারেন "স্কেল ইমেজ" বিকল্পটি ব্যবহার করে "ইমেজ" মেনু থেকে। আপনি "ফাইল" মেনুতে "এক্সপোর্ট হিসাবে" বিকল্পটি ব্যবহার করে ছবির ওজন এবং গুণমান অপ্টিমাইজ করতে পারেন। আপনি GIMP এর অফিসিয়াল ওয়েবসাইট থেকে ডাউনলোড করতে পারেন।
• ফটোশপ: একটি প্রদত্ত এবং রেফারেল প্রোগ্রাম যা আপনাকে একটি উন্নত উপায়ে ছবি তৈরি এবং সম্পাদনা করতে দেয়। ফটোশপের সাহায্যে আপনি "ইমেজ" মেনুতে "ইমেজ সাইজ" বিকল্পটি ব্যবহার করে একটি ছবির আকার পরিবর্তন করতে পারেন। আপনি ওজন এবং ছবির গুণমানও অপ্টিমাইজ করতে পারেন "ওয়েবের জন্য সংরক্ষণ করুন" বিকল্পটি ব্যবহার করে৷ "ফাইল" মেনু থেকে। আপনি এর অফিসিয়াল ওয়েবসাইট থেকে ফটোশপ ডাউনলোড করতে পারেন।
• অনলাইন ইমেজ রিসাইজার: একটি বিনামূল্যের অনলাইন টুল যা আপনাকে কোনো প্রোগ্রাম ইনস্টল না করেই একটি ছবির আকার পরিবর্তন করতে দেয়। অনলাইন ইমেজ রিসাইজার দিয়ে আপনি আপনার কম্পিউটার থেকে বা একটি URL থেকে একটি ছবি আপলোড করতে পারেন, পছন্দসই প্রস্থ এবং উচ্চতা চয়ন করুন এবং পরিবর্তিত চিত্রটি ডাউনলোড করুন। আপনি এর অফিসিয়াল ওয়েবসাইট থেকে অনলাইন ইমেজ রিসাইজার অ্যাক্সেস করতে পারেন।

আপনি যেভাবে চান চিত্রটি সামঞ্জস্য করুন

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

আমরা আশা করি যে এই নিবন্ধটি আপনার জন্য উপযোগী হয়েছে এবং আপনাকে HTML এ একটি চিত্রের আকার সামঞ্জস্য করার জন্য এই বিকল্পগুলি এবং সংস্থানগুলি চেষ্টা করার জন্য উত্সাহিত করা হচ্ছে৷ মনে রাখবেন যে সবচেয়ে গুরুত্বপূর্ণ জিনিস নির্বাচন করা হয় আপনার প্রয়োজন এবং উদ্দেশ্য সবচেয়ে উপযুক্ত যে বিকল্প.

আপনি যদি এই নিবন্ধটি পছন্দ করেন, আপনার বন্ধুদের সাথে শেয়ার করুন. এবং আপনি যদি html এবং অন্যান্য অ্যাপ্লিকেশন সম্পর্কে আরও টিপস এবং কৌশল জানতে চান তবে আমাদের ওয়েবসাইট দেখুন। দেখা হবে!