আইএমজি বনাম সিএসএস ব্যাকগ্রাউন্ড-চিত্র কখন ব্যবহার করবেন?

Question

কোন পরিস্থিতিতে IMGকোনও সিএসএসের বিপরীতে চিত্র প্রদর্শন করতে এইচটিএমএল ট্যাগ ব্যবহার করা আরও উপযুক্ত background-image, এবং বিপরীতে?

উপাদানগুলির মধ্যে অ্যাক্সেসযোগ্যতা, ব্রাউজার সমর্থন, গতিশীল সামগ্রী বা কোনও ধরণের প্রযুক্তিগত সীমা বা ব্যবহারযোগ্যতার নীতি অন্তর্ভুক্ত থাকতে পারে।

Comments

জায়গা নেওয়ার জন্য আপনার কি চিত্রটির দরকার বা আপনি এটিতে লিখতে চান?

— geowa4

আপডেট হিসাবে, যেহেতু এটি গুগলে বেশ উচ্চ স্তরের, তাই ব্রাউজারের স্কেলিং এবং চিত্র ব্যাকগ্রাউন্ড-চিত্রের জন্য প্রসারিত এখন সম্ভব, এবং বেশ ব্যাপকভাবে সমর্থিত (আই 8 এবং নীচে, অবশ্যই ব্যতিক্রম), আইটেমগুলি 4 এবং 7 টির ক্ষেত্রে রেন্ডারিং করে এটি আই 88 এবং নীচে এর জন্য একটি ফলব্যাক বা এ জাতীয় প্রভাব উপেক্ষা করার অনুমতি দিতে পারে। caniuse.com/#search=background-image

— শাওনা

দুর্দান্ত এবং দরকারী পোস্ট, আমি তুলনা করার জন্য একটি প্রশ্ন যুক্ত করব, CSS এর সুবিধাটি কি হোভার ইফেক্টস? এটি ইমগ ট্যাগ ব্যবহার করে প্রতিলিপি করা যেতে পারে?

— এরিকসগ

আমি সাধারণত সমস্ত সামগ্রী চিত্রগুলিতে আলি বৈশিষ্ট্য এবং শিরোনাম বৈশিষ্ট্য উভয়ই জুড়ে থাকি। এটি কি পছন্দনীয় নয়?

— হার্টলেসান

এছাড়াও

— ইমগিতে

Answer 1

আইএমজির সঠিক ব্যবহার

1. ব্যবহার করুন IMGযদি আপনি মানুষ আছে মনস্থ আপনার পৃষ্ঠার প্রিন্ট এবং আপনি ইমেজ ডিফল্টরূপে অন্তর্ভুক্ত করা চাই। - জেটি
2. সতর্কতা আইকনের মতো চিত্রটির একটি গুরুত্বপূর্ণ শব্দার্থ অর্থ থাকা অবস্থায় IMG( altপাঠ্য সহ) ব্যবহার করুন । এটি নিশ্চিত করে যে চিত্রটির অর্থ স্ক্রিন রিডার সহ সমস্ত ব্যবহারকারী-এজেন্টগুলিতে জানানো যেতে পারে।

আইএমজির ব্যবহারিক ব্যবহার

1. IMGছবিটি কোনও লোগো বা চিত্র বা কোনও ব্যক্তি (প্রকৃত ব্যক্তি, স্টক ছবির লোক নয়) এর মতো সামগ্রীর অংশ হলে প্লাস Alt বৈশিষ্ট্যটি ব্যবহার করুন । - স্যানচেথফ্যাট
2. IMGআপনি যদি পাঠ্যের আকারের অনুপাতে কোনও চিত্র রেন্ডার করতে ব্রাউজারের স্কেলিংয়ের উপর নির্ভর করেন তবে ব্যবহার করুন ।
3. আই 6 এ একাধিক ওভারলে চিত্রগুলিরIMG জন্য ব্যবহার করুন ।
4. পুরো উইন্ডোটি পূরণ করার জন্য একটি ব্যাকগ্রাউন্ড চিত্র প্রসারিত করতে IMGএকটি ব্যবহার করুন । z-index
   দ্রষ্টব্য, CSS3 ব্যাকগ্রাউন্ড-আকারের সাথে এটি আর সত্য নয়; নীচে # 6 দেখুন।
5. imgপরিবর্তে ব্যবহার করা background-imageপটভূমিতে অ্যানিমেশনগুলির নাটকীয়ভাবে পারফরম্যান্সকে উন্নত করতে পারে।

সিএসএস ব্যাকগ্রাউন্ড-ইমেজ কখন ব্যবহার করবেন

1. চিত্রটি সামগ্রীর অংশ না হলে সিএসএস ব্যাকগ্রাউন্ড চিত্রগুলি ব্যবহার করুন । - স্যানচেথফ্যাট
2. যেমন পাঠ্য প্রতিস্থাপনের সময় সিএসএস ব্যাকগ্রাউন্ড চিত্র ব্যবহার করুন । অনুচ্ছেদ / হেডার। - স্যানচেথফ্যাট
3. ব্যবহারের background-imageআপনি মানুষ আছে মনস্থ আপনার পৃষ্ঠার প্রিন্ট এবং আপনি ইমেজ ডিফল্টরূপে অন্তর্ভুক্ত করা চাই না। - জেটি
4. সিএসএস স্প্রাইটেরbackground-image মতো আপনার যদি ডাউনলোডের সময় উন্নত করতে হয় তবে ব্যবহার করুন ।
5. background-imageসিএসএস স্প্রাইটের মতো আপনার যদি চিত্রটির কেবলমাত্র একটি অংশ দৃশ্যমান হয় তবে ব্যবহার করুন ।
6. ব্যবহার করুন background-imageসঙ্গে background-size:coverঅর্ডার পটভূমি চিত্র প্রসারিত তার সমগ্র উইন্ডোর পূরণ হবে।

Comments

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

— স্কট রিড

ব্যাকগ্রাউন্ড চিত্রটির ব্যবহারিক ব্যবহার : আপনি যখন উল্লম্ব কেন্দ্রিক সমস্যাগুলি (উল্লম্ব আকারের চিত্রগুলির চিত্রগুলি) সম্পর্কে চুল আলগা করতে চান না;)

— ফ্রাঙ্ক নোক্ক

হ্যাঁ, উল্লম্ব কেন্দ্রিক সমস্যা - ফ্লেক্সবক্স আনুন!

— ডিন_উইলসন

@ বাইনারিফান্ট - <div class="my-css-page-styles" style="background-image:url(blah.png);"></div>এইভাবে আপনি এটি আপনার সিএসএস স্টাইলশিটে স্টাইল করতে পারবেন তবে পটভূমি চিত্রটি যদি শৈলীর চেয়ে বিষয়বস্তুর প্রশ্ন বেশি হয় তবে আপনি এখনও এটি HTML এর দিক থেকে সম্পাদনা করছেন।

— জিম্বো জনি 14

আইএমজির ব্যবহারিক ব্যবহারের পঞ্চম পয়েন্টে ক্লিকবাট বলে মনে হচ্ছে - প্রসাধনী সম্পর্কে জাপানি ব্লগ পোস্টের দিকে ইঙ্গিত করছে। লিঙ্কটি হ'ল www.ajaxline.com / ব্রাউজার্স-পারফরম্যান্স-ইন-ডিপেন্ডেন্সিলিও- এইচটিএমএল কোডিং [এটি ক্লিক করবেন না]

— উইক

Answer 2

এটা আমার কাছে কালো ও সাদা সিদ্ধান্ত চিত্রটি যদি লোগো বা ডায়াগ্রাম বা ব্যক্তি (প্রকৃত ব্যক্তি, স্টক ছবির লোক নয়) এর মতো সামগ্রীর অংশ হয় তবে <img />ট্যাগ প্লাস Alt বৈশিষ্ট্যটি ব্যবহার করুন । অন্য সব কিছুর জন্য সিএসএসের পটভূমি চিত্র রয়েছে।

সিএসএস ব্যাকগ্রাউন্ড চিত্রগুলি ব্যবহার করার সময় হ'ল পাঠ্য উদাহরণের চিত্র-প্রতিস্থাপন করার সময়। অনুচ্ছেদ / হেডার।

Comments

দুর্দান্ত কেস! কন - পাঠ্যের চিত্র-প্রতিস্থাপন করার সময় পটভূমি-চিত্র ব্যবহার করুন।

— সিস্টেম PAUSE

এটি মোটামুটি বিষয়, তবে অবশ্যই পাঠ্যের চিত্র-প্রতিস্থাপনের (উদাহরণস্বরূপ শিরোনামের জন্য) পর্দার পাঠকদের এটি পড়ার জন্য আপনাকে "Alt" যুক্ত করতে হবে? অথবা চিত্রগুলি প্রদর্শিত না হলে আপনি এখনও শিরোনাম পান? হ্যাঁ, একটি শিরোনাম এবং তারপরে স্টাইল করা আরও ভাল হবে তবে আপনি অবশ্যই পাঠ্যটি চান?

— থিও স্কোলিয়াডিস

@ থিওশোলিয়াডিস ইমেজ প্রতিস্থাপন ব্যবহারের অর্থ পাঠ্যের পরিবর্তে কোনও চিত্র ব্যবহার করা নয়, তবে কোনওভাবে এই পদ্ধতিতে সিএসএস ব্যবহার করে আড়াল করা এবং সিএসএস ব্যবহার করে চিত্রটিকে ব্যাকগ্রাউন্ড হিসাবে সরবরাহ করা। দস্তাবেজটি শব্দার্থবিহীনভাবে রয়ে গেছে।

— রোবরুরকে

ব্যক্তিগতভাবে আমি ঘৃণা করি যখন আমি "পাঠ্য" অনুলিপি করতে পারি না কারণ এটি আসলে একটি চিত্র। আমাকে অলস বলুন কিন্তু আরে ...

— Shaz

যখন আপনার এসইও উদ্দেশ্যটির জন্য চিত্রের প্রয়োজন হবে, তারপরে Alt গুণাবলী সহ img ট্যাগ ব্যবহার করুন। অন্যথায় CSS ব্যবহার করে পটভূমিতে চিত্রটি ব্যবহার করুন।

— সুপার মডেল

Answer 3

আমি অবাক হয়ে এখনও কারও এটির উল্লেখ নেই: সিএসএস রূপান্তর ।

আপনি স্থানীয়ভাবে একটি divপটভূমি চিত্র রূপান্তর করতে পারেন :

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

এই জাভাস্ক্রিপ্ট বা jQuery এর অ্যানিমেশন কোন ধরনের একটি বিবর্ণ সংরক্ষণ <img/>এর src।

এমডিএন-এ স্থানান্তর সম্পর্কে আরও তথ্য ।

Comments

এটি একটি ভাল কারণ নয়। : আপনি 2 ওভারলে ইমেজ সঙ্গে একটি div, এবং নিম্নলিখিত CSS থাকতে পারে #some_div { transition: opacity 0.5s; }, #some_div:hover #top_img { opacity: 0; }

— warkentien2

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

— রবার্ট ম্যাককি

Answer 4

উপরের উত্তরগুলি কেবল ডিজাইনের দিক বিবেচনা করে। আমি এটি এসইও দিক তালিকাভুক্ত করছি।

কখন ব্যবহার করতে হবে <img />

1. যখন আপনার ইমেজটি অনুসন্ধান ইঞ্জিন দ্বারা সূচী করা দরকার
2. এটির সাথে যদি বিষয়বস্তুর সাথে নকশা না করার সম্পর্ক থাকে।
3. যদি আপনার চিত্রটি খুব ছোট না হয় (আইকনিক চিত্র নয়)।
4. চিত্রগুলি যেখানে আপনি যুক্ত করতে altএবং titleগুণিত করতে পারেন ।
5. আপনি মুদ্রণ মিডিয়া সিএসএস ব্যবহার করে মুদ্রণ করতে চান এমন কোনও ওয়েবপৃষ্ঠার চিত্র

সিএসএস কখন ব্যবহার করবেন background-image

1. চিত্রগুলি নিখুঁতভাবে ডিজাইন করতে ব্যবহৃত হয়।
2. সামগ্রীর সাথে কোনও সম্পর্ক নেই।
3. ছোট চিত্রগুলি যা আমরা CSS3 এর সাথে খেলতে পারি।
4. চিত্রগুলি পুনরাবৃত্তি করা (ব্লগ লেখকের আইকনে, প্রতিটি নিবন্ধের জন্য তারিখের আইকন পুনরাবৃত্তি করা হবে ইত্যাদি))

যেহেতু আমি এই কারণগুলির ভিত্তিতে সেগুলি ব্যবহার করব। এগুলি অনুসন্ধানের ইঞ্জিন অপ্টিমাইজেশনের ভাল অনুশীলনগুলি।

Answer 5

ব্রাউজারগুলি সর্বদা ডিফল্টরূপে ব্যাকগ্রাউন্ড চিত্র মুদ্রণ করতে সেট করা হয় না; আপনি যদি চান যে লোকেরা আপনার পৃষ্ঠাটি মুদ্রণ করবে :)

Comments

মত শোনায়: প্রো - আপনি ডিফল্টরূপে চিত্রটি মুদ্রণ করতে চান তবে IMG ব্যবহার করুন। কন - যদি আপনি চিত্রটি ডিফল্টরূপে মুদ্রণ করতে না চান তবে ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করুন। সুন্দর!

— সিস্টেম PAUSE

আমি ধারণা করি যে পৃথক প্রিন্ট-কেবল সিএসএস শৈলী থাকা যা চিত্রগুলি লুকিয়ে রাখে বা এগুলি আরও উপযুক্ত কিছুতে পরিবর্তন করে change

— ব্লেজমোনজার

Answer 6

আপনার যদি কোনও বাহ্যিক ফাইলে আপনার সিএসএস থাকে, তবে প্রায়শই এমন একটি চিত্র প্রদর্শিত হবে যা সাইট জুড়ে ঘন ঘন ব্যবহৃত হয় (যেমন শিরোনামের চিত্র হিসাবে) ব্যাকগ্রাউন্ড চিত্র হিসাবে, কারণ আপনার পরে চিত্রটি পরিবর্তন করার নমনীয়তা রয়েছে।

উদাহরণস্বরূপ, বলুন যে আপনার নিম্নলিখিত HTML রয়েছে:

<div id="headerImage"></div>

... এবং সিএসএস:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

কিছু দিন পরে, আপনি চিত্রটির অবস্থান পরিবর্তন করুন। আপনাকে যা করতে হবে তা হ'ল সিএসএস আপডেট করা:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

অন্যথায়, আপনাকে প্রতিটি এইচটিএমএল ফাইলে srcযথাযথ <img>ট্যাগটির বৈশিষ্ট্য আপডেট করতে হবে (ধরে নিবেন যে প্রক্রিয়াটি স্বয়ংক্রিয় করতে আপনি কোনও সার্ভার-সাইড স্ক্রিপ্টিং ভাষা বা সিএমএস ব্যবহার করছেন না )।

এছাড়াও ব্যাকগ্রাউন্ড চিত্রগুলি দরকারী যদি আপনি না চান যে ব্যবহারকারী চিত্রটি সংরক্ষণ করতে সক্ষম হন (যদিও আমার এটি করার আগে কখনও প্রয়োজন হয়নি)।

Comments

ব্যাকগ্রাউন্ড চিত্রগুলি অবশ্যই কোনও নূন্যতম দর্শনের উত্সের সাহায্যে সংরক্ষণ করা যায়, কেবল কোনও চিত্রের উপর ডান ক্লিক করার মতো নয়।

— মাইকেল হ্যাকার 16

ফায়ারফক্স। সঠিক পছন্দ. "পটভূমি চিত্র দেখুন"। এতটা কঠিন নয়।

— ট্রিগ

@TRiG যদি না স্বচ্ছ ওভারলে বা পৃষ্ঠা-নির্দিষ্ট কনটেক্সট মেনু সংশোধন না করে থাকে যা আপনাকে এটি থেকে বিরত রাখে। আমি এটি আগে দেখেছি, এবং আমার মতে এটি বেশ নির্বোধ কারণ আপনার উত্সটিও স্পেলিং করার দরকার নেই, যদি পৃষ্ঠাটি পুরোপুরি লোড হয়ে থাকে তবে ফায়ারফক্সে অন্তত আপনি সরঞ্জাম> পৃষ্ঠা তথ্য / Alt + t ক্লিক করতে পারেন, i / রাইট-ক্লিক করুন এবং পৃষ্ঠা তথ্য দেখুন নির্বাচন করুন, মিডিয়া বিভাগে ব্রাউজ করুন এবং তালিকা থেকে আপনার পছন্দসই সমস্ত আইটেম সংরক্ষণ করুন। অবশ্যই, এটি প্রতিরোধেরও উপায় রয়েছে, যেমন কোনও ফ্ল্যাশ ফাইল বা অন্যান্য উদ্ভট কৌশলগুলিতে চিত্র এম্বেড করা, তবে এমনকি সেগুলিও বাইপাস করা বা তার জন্য অ্যাকাউন্ট করা যেতে পারে।

— জাব

আমি মনে করি ব্যাকগ্রাউন্ড কৌশলটি কোনও ব্যবহারকারী চিত্রটি সংরক্ষণ করতে অস্বীকার করেছেন ...

— এনকিউবিকা

Answer 7

স্যানোচোফেটের উত্তর হিসাবে একই , তবে ভিন্ন দিক থেকে। আমি সর্বদা নিজেকে জিজ্ঞাসা করি: আমি যদি ওয়েবসাইট থেকে সম্পূর্ণ স্টাইলশিটগুলি সরিয়ে ফেলতাম, তবে কী বাকি উপাদানগুলি কেবল সামগ্রীর অন্তর্ভুক্ত? যদি তা হয় তবে আমি আমার কাজটি ভালভাবে করেছিলাম।

Answer 8

কিছু উত্তর এখানে দৃশ্যের ছড়িয়ে পড়ে। এটি একটি মৃত সাধারণ পরিস্থিতি।

আপনি যখনই কোনও ছবি রাখতে চান কেবল এই প্রশ্নের উত্তর দিন:

এটি কি সামগ্রীর অংশ বা ডিজাইনের অংশ?

আপনি যদি এর উত্তর দিতে না পারেন তবে আপনি সম্ভবত জানেন না আপনি কী করছেন বা আপনি কী করতে চান!

এছাড়াও, দুটি কৌশলটির পাশে বিবেচনা করবেন না, কারণ আপনি "মুদ্রক বান্ধব" হতে চান বা না চান। সিএসএসের সাথে কোনও এসইও দৃষ্টিকোণ থেকে সামগ্রী আড়াল করবেন না। আপনি যদি নিজের সামগ্রীগুলি সিএসএস ফাইলগুলিতে পরিচালনা করতে দেখেন তবে আপনি নিজেকে পায়ে গুলি করেছিলেন। এটি কি বিষয়বস্তু বা না কী এটি একটি তুচ্ছ সিদ্ধান্ত। অন্য সমস্ত দিক উপেক্ষা করা উচিত।

Comments

আমি এই উত্তর পছন্দ। এটা খুব পরিষ্কার। প্রিন্টার বান্ধব বা এসইও এর মতো বাকি বিষয়গুলি প্রতিটি দৃশ্যে স্বতন্ত্রভাবে বিবেচনা করা উচিত।

— হুয়ান হেরেরা

Answer 9

আমি আরও দুটি যুক্তি যুক্ত করব:

• আপনার যদি ইমেজটির আকার পরিবর্তন করতে হয় তবে একটি ইমগ ট্যাগ ভাল । উদাহরণস্বরূপ যদি আসল চিত্রটি 100px বাই 100 পিক্স হয় এবং আপনি এটি 80px দ্বারা 80px হতে চান তবে আপনি সিএমএসের প্রস্থ এবং ইমগ ট্যাগের উচ্চতা নির্ধারণ করতে পারেন। ব্যাকগ্রাউন্ড-ইমেজ ব্যবহার করে এটি করার কোনও ভাল উপায় আমি জানি না। সম্পাদনা: এটি এখন CSS3 বৈশিষ্ট্য ব্যবহার করে একটি পটভূমি-চিত্রের সাহায্যেও করা যেতে পারে ।background-size

• ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করা ভাল যখন আপনার স্প্রিটগুলির মধ্যে গতিশীল পরিবর্তন করতে হবে । উদাহরণস্বরূপ, যদি আপনার বোতামের চিত্র থাকে এবং কার্সারটি উপাদানটির উপর দিয়ে ঘুরে দেখা যায় তখন আপনি একটি পৃথক চিত্র প্রদর্শন করতে চান, আপনি স্বাভাবিক এবং হোভার স্প্রাইট উভয় সমন্বিত একটি ব্যাকগ্রাউন্ড চিত্র ব্যবহার করতে পারেন এবং গতিশীলভাবে ব্যাকগ্রাউন্ড-অবস্থান পরিবর্তন করতে পারেন।

Comments

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

— দুদেওয়াদ

এটি background-size: 80px 80px;

— কেরেম

আপনাকে ধন্যবাদ ক্যারিম আমি দেখতে পাচ্ছি যে এটি সিএসএস 3 এর সাথে প্রবর্তিত হয়েছিল, যা মূলত উত্তর দেওয়ার পরে এখনও উপস্থিত ছিল না। এটি প্রতিফলিত করার জন্য আমি আমার উত্তর সম্পাদনা করেছি।

— এন্ডার্স রাবো থর্বেক

আমি মনে করি এটি নোট করা জরুরী মনে করি যে ফটোগুলি পুনরায় আকার দেওয়া পিক্সেলাইজেশন বা ইন্টারপোলেশন হিসাবে জটিল হতে পারে। যখন সম্ভব হবে, আমি 40% এরও বেশি আকার পরিবর্তন করব না (এবং এটি প্রসারিত - 20% প্রমিত) আপনার ছবিটি কোনও ফটো ইমেজিং সফ্টওয়্যারটিতে না নিয়েই মান না হারিয়ে সঠিকভাবে পুনরায় আকার দিতে হবে। বরাদ্দকৃত পরিমাণ পিক্সেল প্রসারিত এবং পূরণ করার জন্য পর্যাপ্ত তথ্য না থাকলে ডিপিআই গুণমান এখানে গুরুত্বপূর্ণ হতে পারে।

— ডেল ল্যান্ড্রি

Answer 10

<আইএমজি> ট্যাগটি ব্যবহার করে আরও একটি উপকারিতা এসইও সম্পর্কিত - অর্থাৎ আপনি চিত্র ট্যাগের ALT বৈশিষ্ট্যে চিত্র সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করতে পারেন, যখন সিএসএসের মাধ্যমে চিত্র নির্দিষ্ট করার সময় এই জাতীয় তথ্য দেওয়ার কোনও উপায় নেই এবং এতে কেবলমাত্র চিত্র ফাইলের নাম অনুসন্ধান ইঞ্জিন দ্বারা সূচিযুক্ত হতে পারে। ALT বৈশিষ্ট্যটি অবশ্যই সিএসএস পদ্ধতির উপর <IMG> ট্যাগ এসইও সুবিধা দেয়। সে কারণেই আমার মতে <আইএমজি> ট্যাগ ব্যবহার করে আপনি চিত্র অনুসন্ধান ফলাফলগুলিতে (যেমন গুগল চিত্র অনুসন্ধান) ভাল র‌্যাঙ্ক করতে চান সেই চিত্রগুলি নির্দিষ্ট করা ভাল।

Comments

পটভূমি-চিত্রসমূহ ALT মানগুলি সাইটম্যাপে সংজ্ঞায়িত করা যায়। google.com/schemas/sitemap-image/1.1

— কারিম

Answer 11

অগ্রভূমি = img।

পটভূমি = সিএসএস পটভূমি।

Comments

অবশ্যই, তবে "মেনু" বোতামের পাশের ছোট ডাউন-তীর সূচকটি বা অন্যান্য জাতীয় উপাদানগুলির কী what আপনি কীভাবে সেই অগ্রভাগ বা পটভূমিটিকে শ্রেণিবদ্ধ করেন?

— দুদেওয়াদ

@ দেউদওয়াদ আমি অগ্রভাগ হিসাবে বলব, কারণ তারা পৃষ্ঠার "শীর্ষ" স্তরটিতে (দৃষ্টিভঙ্গি), অন্যান্য উপাদানগুলিতে সুপারপোজড।

— জে কেদেব

Answer 12

ব্যাকগ্রাউন্ড ইমেজগুলি কেবল যখন প্রয়োজন তখন উদাহরণস্বরূপ পাতাগুলি ব্যবহার করুন

ব্যবহার করে প্রধান অনুকূল ওয়ান চিত্রগুলি এটি হল এসইও জন্য ভালো ।

Comments

সম্ভবত আপনি Alt বৈশিষ্ট্যটি ব্যবহার করতে পারেন বলে।

— ডেভিড

আপনি কি সেই নির্দিষ্ট চিত্রটির জন্য এসইও চান তা নির্ভর করে না? আপনি দেখতে পাচ্ছেন না যে আপনি কোনও চিত্রের SEO এর জন্য যা যা পৃষ্ঠার স্টাইলিংয়ের অংশ, সামগ্রী নয় (যেমন আপনার যোগাযোগ পৃষ্ঠায় ইমেল আইকন)। সুতরাং আসলে, আমি বরং আপনার বক্তব্য ঘুরিয়ে চাই। শুধুমাত্র যখন প্রয়োজন হয় তখনই চিত্রগুলি ব্যবহার করুন (এটি সামগ্রী সম্পর্কিত, মুদ্রণ সম্পর্কিত এবং / অথবা এসইও সম্পর্কিত)।

— ভোলজি

Answer 13

একটি পটভূমি চিত্র ব্যবহার করে, আপনাকে পুরোপুরি মাত্রা নির্দিষ্ট করতে হবে। আপনি যদি এগুলিকে আগেভাগে না জানেন বা তাদের নির্ধারণ করতে না পারেন তবে এটি একটি উল্লেখযোগ্য সমস্যা হতে পারে।

<img />ওভারলেগুলির সাথে একটি বড় সমস্যা । আমি যদি আমার ছবিতে ( box-shadow:inset 0 0 5px rgb(0,0,0,.5)) এর সিএসএসের অভ্যন্তরীণ ছায়া চাই ? এই ক্ষেত্রে, যেহেতু <img />সন্তানের উপাদান থাকতে পারে না, তাই আপনাকে অবস্থান ব্যবহার করতে হবে এবং খালি উপাদানগুলি যুক্ত করতে হবে যা অকেজো মার্কআপের সমান হয়।

উপসংহারে, এটি বেশ পরিস্থিতিগত।

Answer 14

কয়েকটি অন্যান্য পরিস্থিতি যেখানে background-imageব্যবহার করা উচিত:

• যখন আপনি ইমেজটি পরিবর্তন করতে চান যখন এটির উপর মাউস লাগানো থাকে।
• আপনি যখন ইমেজটিতে বৃত্তাকার কোণগুলি যুক্ত করতে চান। আপনি যদি ব্যবহার imgকরেন তবে গোলাকার কোণগুলি থেকে চিত্রটি ফুটো হয়ে যায়।

Comments

আপনি আসলে করতে পারেন:img { border-radius: 10px; }

— রাফফ

@ রাফসিওকোয়ালস্কি আপনি সঠিক আছেন ঠিক কোন অবস্থাতে border-radiusকাজ করা হয়নি তা মনে করতে পারছি না ।

— বেহরং সাইদজাদেহে

Answer 15

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

Comments

আপনি গতিশীলভাবে কোনও চিত্র ট্যাগের

— এসসিআর

@ সানচোথফ্যাট, সত্য, তবে এই ক্ষেত্রে চিত্রের উত্সটি সিএসএসের পরিবর্তে জেএসে রাখা দরকার। আইএমও সিএসএস ফাইল ফাইলের নাম রাখা আরও উপযুক্ত হবে।

— এমকে_দেভ

Answer 16

এখানে একটি প্রযুক্তিগত বিবেচনা রয়েছে: চিত্রটি কি গতিময়ভাবে উত্পন্ন হবে? <img>কোনও CSS সম্পত্তি গতিশীলভাবে সম্পাদনা করার চেষ্টা করার চেয়ে এইচটিএমএলটিতে ট্যাগ তৈরি করা অনেক সহজ হয়ে যায় ।

Comments

এবং ইনলাইন শৈলী সম্পর্কে কি? এই প্রশ্নটি অবশ্যই এই ধারণার দ্বারা সিদ্ধান্ত নেওয়া উচিত নয়।

— viam0Zah

হতে পারে আমার এই বাক্যাংশটি এইভাবে হওয়া উচিত: আপনি বরং কোনও ডিওএম উপাদান বা কোনও উপাদান বৈশিষ্ট্যের সাথে কাজ করবেন?

— ব্রায়ান এম।

'09-এ ব্যাকল বিবেচনা করার উপযুক্ত, তবে jQuery সহ এটি খুব কমই সমস্যা। উপাদানগুলিতে স্যুইচিংয়ের চেয়ে কোনও উপাদানটিতে সিএসএস বা ক্লাস স্যুইচ করা আরও সহজ এবং আরও তরল।

— dfherr

Answer 17

ছবির আকার সম্পর্কে কি? আমি যদি img ট্যাগ ব্যবহার করি তবে ব্রাউজারটি চিত্রটি স্কেল করে। আমি যদি সিএসএস ব্যাকগ্রাউন্ড ব্যবহার করি তবে ব্রাউজারটি কেবল বৃহত্তর চিত্র থেকে কিছুটা অংশ কেটে দেয়।

Answer 18

সিএসএস ট্রান্সলেটএক্স / ওয়াই ব্যবহার করে চিত্রগুলি অ্যানিমেট করার ক্ষেত্রে (এইচটিএমএল সঞ্চারিত করার সঠিক উপায়) - আপনি যদি সিএসএস ব্যাকগ্রাউন্ডের চিত্রগুলি অ্যানিমেটেড বনাম আইএমজি ট্যাগগুলির ক্রম টাইমলাইনের রেকর্ডিং করেন তবে আপনি দেখতে পাবেন যে পেইন্টের সময়গুলি সিএসএসের জন্য অত্যন্ত কম are পশ্চাদপট-চিত্র।

Answer 19

এর আর একটি কারণ আছে! আপনার যদি প্রতিক্রিয়াশীল নকশা থাকে এবং মিডিয়া ক্যোয়ারির মাধ্যমে ডিভাইসগুলির জন্য নিম্ন, মাঝারি এবং উচ্চ-প্রতিচ্ছবি চিত্রগুলির ব্যবহারকে বিভক্ত করতে চান তবে আপনার পটভূমিও ব্যবহার করা উচিত।

Comments

মার্টেন, টার্সেলিং পাইপযোগ্য নয় আমি ভিনসেন্ট উইলিয়ামের কাছ থেকে শুনেছি। সুতরাং আপনি কীভাবে এটি পাইমল

— মেহেদি নেলেন

এটি পাইটারপাইটশয়েভ.এনএল

— মার্টেন

@ মার্টিন, আমার ধারণা এখন এটি এইচটিএমএল 5 ছবি এবং উত্স ট্যাগ ব্যবহার করে করা যেতে পারে

— টিক 20

Answer 20

এছাড়াও, আমার কাছে একটি গ্যালারী বিভাগ রয়েছে যা চিত্রের মাপের সাথে সঙ্গতিপূর্ণ নয় যদিও সেই চিত্রগুলি স্পষ্টতই সামগ্রী হিসাবে বিবেচিত হয়, আমি ব্যাকগ্রাউন্ডের চিত্রগুলি ব্যবহার করি এবং সেগুলি সেট আকারের সাথে ডিভগুলিতে রাখি। এটি ফেসবুক তাদের অ্যালবামগুলিতে যা করেছে তার অনুরূপ ..

Answer 21

img একটি কারণে এইচটিএমএল ট্যাগ, সুতরাং এটি ব্যবহার করা উচিত। রেফারেন্সিং বা বিষয়গুলি চিত্রিত করার জন্য, লোকে যেমন: নিবন্ধগুলিতে।

এছাড়াও যদি ইমেজ একটি অর্থ আছে বা যোগ্য হতে হয়েছে একটি চিত্র একটি বেশী ভালো CSS পটভূমি । অন্যান্য সমস্ত পরিস্থিতির জন্য, আমি মনে করি, একটি CSS ব্যাকগ্রাউন্ড ব্যবহার করা যেতে পারে।

যদিও এটি একটি বিষয় যা নিয়ে বারবার আলোচনা করা দরকার।

ফ্রান্সের প্যারিসের ওয়েব ছাত্র

Answer 22

যুক্ত করতে কেবল একটি ছোট্ট, আপনি যদি ব্যবহারকারীদের 'রাইট ক্লিক' এবং 'সেভ-ইমেজ' / 'সেভ-পিকচার' করতে সক্ষম হতে চান তবে আপনার আইএমজি ট্যাগটি ব্যবহার করা উচিত, তাই যদি আপনি চিত্রটি কোনও উত্স হিসাবে সরবরাহ করতে চান অন্যান্য.

ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা (যতক্ষণ না আমি বেশিরভাগ ব্রাউজারগুলিতে সচেতন) সরাসরি চিত্রটি সংরক্ষণ করার বিকল্পটি অক্ষম করে।

Answer 23

একটি ছোট ইনপুট, আমি প্রতিক্রিয়াশীল ইমেজগুলির সাথে আইফোনটিতে রেন্ডারিং এক মিনিট পর্যন্ত কমিয়ে ফেলতে সমস্যা এমনকি ছোট চিত্র সহও সমস্যা পেয়েছি:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

তবে ব্যাকগ্রাউন্ড চিত্রগুলি ব্যবহার করতে গিয়ে সমস্যাটি চলে গেল, নতুন ব্রাউজারগুলিকে লক্ষ্য করে এটাই কেবলমাত্র কার্যকর।

Comments

আপনার এই আচরণের কোনও সমর্থন বা ব্যাখ্যা আছে?

— টড

দুঃখিত, এটি কেন ক্রল পৃষ্ঠাটি ধীর করে দেবে আমার কোনও ধারণা নেই .. আইফোনটিতে ব্রাউজারে পুনরায় প্রবাহের খুব কম সংস্থান আছে।

— winthers

Answer 24

IMGপ্রথমে লোড করুন কারণ এটি srcএইচটিএমএল ফাইলের মধ্যেই রয়েছে যেখানে background-imageউত্সের ক্ষেত্রে স্টাইলশিটে উল্লেখ করা হয়েছে তাই স্টাইলশীট লোড হওয়ার পরে চিত্রটি লোড হয় এবং ওয়েবপৃষ্ঠার লোডটি বিলম্বিত করে।

Comments

এছাড়াও কিছু ব্রাউজার (যেমন ফায়ারফক্স ৩৫) background-imageকিছু সময়ের পরে সিএসএস রিফ্রেশ করে বলে মনে হচ্ছে : আপনার যদি কয়েকটি ট্যাব খোলা থাকে, যখন আপনি কিছুক্ষণ পরে আপনার ট্যাবে ফিরে যান তবে কিছু সময়ের জন্য সিএসএস ব্যাকগ্রাউন্ড ফাঁকা থাকে।

— স্কিপি লে গ্র্যান্ড গৌরো

Answer 25

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

Answer 26

এছাড়াও লক্ষ করুন যে সর্বাধিক সার্চ ইঞ্জিন মাকড়সা সিএসএস ব্যাকগ্রাউন্ড চিত্রগুলিকে সূচী করে না তাই পটভূমি চিত্রগুলি উপেক্ষা করা হবে এবং আপনি অনুসন্ধান ইঞ্জিনগুলি থেকে কোনও ট্র্যাফিক পেতে সক্ষম হবেন না (সংক্ষেপে কোনও এসইও সুবিধা পাবেন না)।

যেখানে ট্যাগগুলির সাথে সংজ্ঞায়িত সমস্ত চিত্র যেমন সূচিযুক্ত হয় (ম্যানুয়ালি বাদ না দিয়ে) এবং অনুসন্ধানের ইঞ্জিনগুলি থেকে ট্র্যাফিক আনতে পারে যদি তাদের শিরোনাম / Alt বৈশিষ্ট্য এবং ফাইলের নামগুলি যথাযথভাবে অপ্টিমাইজ করা হয় (কিছু কীওয়ার্ড আর্ট করুন)।

Answer 27

আপনি যদি চিত্রগুলি তরল হতে এবং বিভিন্ন স্ক্রিন আকারে স্কেল করতে চান তবে আপনি আইএমজি ট্যাগ ব্যবহার করতে পারেন। আমার কাছে এই চিত্রগুলি বেশিরভাগ সামগ্রীর অংশ। সামগ্রীর অংশ নয় এমন বেশিরভাগ উপাদানগুলির জন্য, আমি ডাউনলোডের আকারকে ন্যূনতম রাখতে সিএসএস স্প্রাইট ব্যবহার করি যদি না আমি সত্যিই আইকনগুলি অ্যানিমেট করতে চাই না ইত্যাদি etc.

Answer 28

বেশিরভাগ ব্রাউজারগুলিতে সমর্থিত যা আমি তাদের 100% প্রসারিত করতে চাইলে আমি ব্যাকগ্রাউন্ড-চিত্রের পরিবর্তে চিত্র ব্যবহার করি।

Answer 29

আপনি যদি কেবল পৃষ্ঠায় বিশেষ সামগ্রী বা শুধুমাত্র একটি পৃষ্ঠার জন্য একটি চিত্র যুক্ত করতে চান তবে আপনার আইএমজি ট্যাগ ব্যবহার করা উচিত এবং যদি আপনি একাধিক পৃষ্ঠায় চিত্র রাখতে চান তবে আপনার সিএসএস ব্যাকগ্রাউন্ড চিত্র ব্যবহার করা উচিত।

Answer 30

অন্য একটি ব্যাকগ্রাউন্ড-চিত্র প্রো: <ul>/ <ol>তালিকার জন্য পটভূমি-চিত্রসমূহ ।

ব্যাকগ্রাউন্ড চিত্রগুলি ব্যবহার করুন যদি তারা সামগ্রিক ডিজাইনের অংশ হয় এবং একাধিক পৃষ্ঠায় পুনরাবৃত্তি করে। অপ্টিমাইজেশনের জন্য ব্যাকগ্রাউন্ড স্প্রাইট ফর্মটিতে সাধারণত।

সমস্ত চিত্রের জন্য ট্যাগগুলি ব্যবহার করুন যা সামগ্রিক ডিজাইনের অংশ নয় এবং সম্ভবত গুগল চিত্রগুলিতে যুক্ত হওয়ার যোগ্য নিবন্ধ, লোক এবং গুরুত্বপূর্ণ চিত্রগুলির জন্য নির্দিষ্ট চিত্রগুলির মতো একবারে স্থাপন করা হয়।

** কেবলমাত্র পুনরাবৃত্তি চিত্র যা আমি একটি <img>ট্যাগে আবদ্ধ করি তা হ'ল সাইট / সংস্থার লোগো। যেহেতু লোকেরা হোমপৃষ্ঠায় যাওয়ার জন্য এটি ক্লিক করার ঝোঁক রয়েছে, সুতরাং আপনি এটিকে একটি <a>ট্যাগ দিয়ে মুড়ে রাখেন।