متى تستخدم IMG مقابل.صورة خلفية CSS؟

StackOverflow https://stackoverflow.com/questions/492809

سؤال

في أي المواقف يكون استخدام HTML أكثر ملاءمة؟ IMG علامة لعرض صورة، بدلاً من CSS background-image, ، والعكس صحيح؟

قد تشمل العوامل إمكانية الوصول، أو دعم المتصفح، أو المحتوى الديناميكي، أو أي نوع من الحدود التقنية أو مبادئ سهولة الاستخدام.

هل كانت مفيدة؟

المحلول

الاستخدامات الصحيحة لـ IMG

  1. يستخدم IMG إذا كنت تنوي أن يكون لديك الناس طباعة صفحتك وتريد تضمين الصورة بشكل افتراضي.—جايتي
  2. يستخدم IMG (مع alt text) عندما يكون للصورة معنى دلالي مهم، مثل أيقونة تحذير.ويضمن ذلك إمكانية توصيل معنى الصورة إلى جميع وكلاء المستخدم، بما في ذلك برامج قراءة الشاشة.

الاستخدامات العملية لـ IMG

  1. يستخدم IMG بالإضافة إلى سمة alt إذا كانت الصورة جزء من المحتوى مثل شعار أو رسم تخطيطي أو شخص (شخص حقيقي، وليس أشخاصًا مصورين).—com.sanchothefat
  2. يستخدم IMG إذا كنت تعتمد على تحجيم المتصفح لعرض الصورة بما يتناسب مع حجم النص.
  3. يستخدم IMG ل صور تراكب متعددة في IE6.
  4. يستخدم IMG مع z-index بغرض تمتد صورة الخلفية لملء نافذته بأكملها.
    لاحظ أن هذا لم يعد صحيحًا مع حجم خلفية CSS3؛انظر رقم 6 أدناه.
  5. استخدام img بدلاً من background-image يمكن أن يحسن بشكل كبير أداء الرسوم المتحركة على الخلفية.

متى تستخدم صورة الخلفية CSS

  1. استخدم صور خلفية CSS إذا كانت الصورة ليس جزءًا من المحتوى. —com.sanchothefat
  2. استخدم صور خلفية CSS عند القيام بذلك استبدال الصورة للنص على سبيل المثال.الفقرات/العناوين.—com.sanchothefat
  3. يستخدم background-image إذا كنت تنوي أن يكون لديك الناس طباعة صفحتك ولا تريد تضمين الصورة بشكل افتراضي.—جايتي
  4. يستخدم background-image إذا كنت بحاجة إلى تحسين أوقات التنزيل ، كما هو الحال مع العفاريت CSS.
  5. يستخدم background-image إذا كنت تريد أن يكون جزء فقط من الصورة مرئيًا، كما هو الحال مع الكائنات CSS.
  6. يستخدم background-image مع background-size:cover من أجل تمديد صورة الخلفية لملء نافذتها بأكملها.

نصائح أخرى

وانه قرار أبيض وأسود بالنسبة لي. إذا كانت الصورة هي جزء من المحتوى مثل شعار أو رسم بياني أو شخص (شخص حقيقي، وليس ألبوم الصور نسمة) ثم استخدام علامة <img /> بالإضافة إلى السمة بديل. لكل شيء آخر هناك صور الخلفية CSS.

والساعة الآخر لاستخدام الصور الخلفية CSS هو عند القيام صورة استبدال نص على سبيل المثال. الفقرات / رؤوس.

أنا مندهش أنه لم يذكر أحد هذا بعد: انتقالات CSS.

يمكنك الانتقال أصلاً إلى 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);
}

يؤدي هذا إلى حفظ أي نوع من الرسوم المتحركة لـ JavaScript أو jQuery لتتلاشى <img/>'س src.

مزيد من المعلومات حول التحولات على MDN.

الإجابات أعلاه تأخذ بعين الاعتبار جانب التصميم فقط.أنا أدرجه في جوانب تحسين محركات البحث.

متى يجب استخدام <img />

  1. عندما تحتاج صورتك إلى أن تكون مفهرسة بواسطة محرك البحث
  2. إذا كان الأمر يتعلق بالمحتوى وليس بالتصميم.
  3. إذا لم تكن صورتك صغيرة جدًا (ليست صورًا مميزة).
  4. الصور حيث يمكنك إضافة alt و title يصف.
  5. صور من صفحة ويب تريد طباعتها باستخدام وسائط الطباعة CSS

متى تستخدم CSS background-image

  1. الصور تستخدم بحتة للتصميم.
  2. لا علاقة مع المحتوى.
  3. الصور الصغيرة التي يمكننا تشغيلها باستخدام CSS3.
  4. تكرار الصور (في أيقونة مؤلف المدونة، سيتم تكرار أيقونة التاريخ لكل مقالة وما إلى ذلك).

لأنني سأستخدمها بناءً على هذه الأسباب.هذه هي الممارسات الجيدة لتحسين محرك البحث للصور.

لا يتم دوما تعيين

والمتصفحات لطباعة الصور الخلفية بشكل افتراضي؛ إذا كنت تنوي أن يكون هناك أناس طباعة الصفحة الخاصة بك:)

إذا كان لديك CSS الخاص بك في ملف خارجي، فإنه في كثير من الأحيان ملائمة لعرض صورة الذي يتم استخدامه في كثير من الأحيان عبر الموقع (مثل صورة رأس) كصورة خلفية، لأن ثم لديك المرونة اللازمة لتغيير الصورة في وقت لاحق .

وعلى سبيل المثال، ويقول لديك HTML التالية: 

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

... وCSS: 

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

وبعد بضعة أيام، قمت بتغيير موقع الصورة. كل ما عليك القيام به هو تحديث CSS: 

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

وعلى خلاف ذلك، وكنت قد لتحديث السمة src العلامة <img> المناسبة في كل ملف HTML (على افتراض كنت لا تستخدم لغة البرمجة النصية من جانب الخادم أو <وأ href = "HTTP: //en.wikipedia. غزاله / ويكي / Content_management_system "يختلط =" noreferrer "> CMS لأتمتة عملية).

وأيضا خلفية الصور هي مفيدة إذا كنت لا تريد للمستخدم لتكون قادرة على حفظ الصورة (على الرغم من أنني لا حاجة من أي وقت مضى للقيام بذلك).

بعض الإجابات تزيد من تعقيد السيناريو هنا.هذا هو الوضع البسيط الميت.

ما عليك سوى الإجابة على هذا السؤال في كل مرة تريد فيها وضع صورة:

هل هذا جزء من المحتوى أم جزء من التصميم؟

إذا لم تتمكن من الإجابة على هذا السؤال، فمن المحتمل أنك لا تعرف ماذا تفعل أو ماذا تريد أن تفعل!

أيضًا، لا تفكر في الأسلوبين، فقط لأنك ترغب في أن تكون "صديقًا للطباعة" أم لا.لا تقم أيضًا بإخفاء المحتوى من وجهة نظر تحسين محركات البحث (SEO) باستخدام CSS.إذا وجدت نفسك تدير المحتوى الخاص بك في ملفات CSS، فقد أطلقت النار على ساقك.هذا مجرد قرار تافه بشأن ما هو المحتوى أم لا.وينبغي تجاهل كل جانب آخر.

أود أن أضيف حجتين أخريين:

ويرتبط أحد أكثر فائدة من استخدام العلامة لكبار المسئولين الاقتصاديين - أي يمكنك تقديم معلومات إضافية حول الصورة في سمة ALT للعلامة الصورة، في حين ليس هناك طريقة لتوفير هذه المعلومات عند تحديد صورة من خلال CSS وفي هذه الحالة يمكن فهرستها فقط اسم ملف الصورة عن طريق محركات البحث. السمة ALT بالتأكيد يعطي العلامة SEO ميزة على نهج CSS. هذا هو السبب وفقا للي أنه من الأفضل لتحديد الصور التي تريد مرتبة جيدة في نتائج البحث عن الصور (مثل البحث عن الصور) باستخدام علامة .

والمقدمة = IMG.

والخلفية = CSS الخلفية.

استخدم صور الخلفية فقط عند الضرورة، على سبيل المثال.الحاويات مع الصورة التي البلاط.

واحدة من PROS الرئيسية باستخدام صور هو أنه كذلك أفضل لكبار المسئولين الاقتصاديين.

<ع> استخدام صورة خلفية، تحتاج إلى تحديد تماما أبعاد. هذا يمكن أن يكون مشكلة كبيرة إذا كنت لا تعرف فعلا لهم مقدما أو لا يمكن تحديد لهم.

وهناك مشكلة كبيرة مع <img /> هي تراكب. ماذا لو أردت الظل الداخلي CSS على الصورة الخاصة بي (box-shadow:inset 0 0 5px rgb(0,0,0,.5))؟ في هذه الحالة، منذ <img /> لا يمكن أن يكون عناصر تابعة، تحتاج إلى استخدام المواقع وإضافة العناصر الفارغة وهو ما يعادل العلامات عديمة الفائدة.

في الختام، انها الظرفية تماما.

بضعة سيناريوهات أخرى حيث background-image يجب أن تستخدم:

  • عندما تريد أن تتغير الصورة عند تحريك الماوس عليها.
  • عندما تريد إضافة زوايا مستديرة للصورة.إذا كنت تستخدم img, ، تتسرب الصورة من الزوايا الدائرية.

استخدم CSS خلفية الصورة في حالة من جلود أو الإصدارات من تصميم متعددة. جافا سكريبت يمكن استخدامها لتغيير حيوي فئة من عنصر، والتي سوف إجبارها على تقديم صورة مختلفة. مع علامة IMG، قد يكون أكثر صعبة.

وهنا اعتبار الفني: سيتم إنشاء صورة حيوي؟ أنه يميل إلى أن يكون أسهل كثيرا لتوليد العلامة <img> في HTML من محاولة تعديل خاصية CSS بشكل حيوي.

وماذا عن حجم الصورة؟ إذا كنت تستخدم العلامة img المتصفح موازين الصورة. إذا كنت تستخدم خلفية المغلق، والمتصفح فقط يقطع جزءا من صورة أكبر.

في ما يخص صور موحية باستخدام CSS TranslateX / Y (الطريقة الصحيحة لتحريك أتش تي أم أل) - إذا كنت تفعل في تسجيل كروم الجدول الزمني للCSS خلفية الصور التي الرسوم المتحركة مقابل علامات IMG يجري الرسوم المتحركة سترى مرات الطلاء هي أقصر بشكل كبير لCSS خلفية الصور.

وهناك سبب آخر! إذا كان لديك تصميم استجابة وتريد تقسيم استخدام المنخفض والمتوسط، وصور عالية الدقة للأجهزة من خلال استفسارات وسائل الإعلام، يجب عليك استخدام الخلفيات كذلك.

وأيضا، لدي قسم معرض الذي لديه صورة غير متناسقة الأحجام ذلك على الرغم من تلك الصور تعتبر من الواضح المحتوى، وأنا استخدم خلفية الصور ومركز لهم في عناصر div مع حجم مجموعة. هذا على غرار ما يفعل الفيسبوك في ألبوماتهم ..

img هي علامة HTML لسبب ما، لذلك يجب استخدامها.للإشارة إلى الأشياء أو لتوضيحها، الأشخاص على سبيل المثال:في المقالات.

كذلك إذا كانت الصورة له معنى أو يجب أن تكون قابلة للنقر عليها img أفضل من أ خلفية المغلق.بالنسبة لجميع المواقف الأخرى، أعتقد أن أ خلفية المغلق ممكن استخدامه.

على الرغم من أنه موضوع يجب مناقشته مرارًا وتكرارًا.

طالب ويب من باريس، فرنسا

ومجرد واحدة صغيرة لإضافة، يجب عليك استخدام علامة img إذا كنت تريد للمستخدمين أن تكون قادرة على "انقر على الحق" و "حفظ صورة '/' حفظ-الصورة، لذلك إذا كنت تنوي تقديم الصورة كما موردا للآخرين.

<ع> استخدام صورة خلفية و(بقدر ما أنا على علم على معظم المتصفحات) تعطيل خيار حفظ الصورة مباشرة.

وهناك مدخل صغير، لقد كان لي مشاكل مع الصور تستجيب تباطؤ التقديم على اي فون لمدة تصل إلى دقيقة، حتى مع الصور الصغيرة: 

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

ولكن عند التحول إلى استخدام الصور الخلفية ذهبت المشكلة بعيدا، وهذا هو قابل للحياة إلا إذا تستهدف متصفحات جديدة.

وتحميل IMG أولا لأن src في ملف HTML نفسها في حين أنه في حالة background-image وذكر مصدر في ورقة الأنماط بحيث يتم تحميل الصورة بعد الأنماط تحميل، وتأخير تحميل صفحات الويب.

وHTML غير للمحتوى وCSS هو للتصميم. هي صورة ضروري وأنها لا تحتاج أن يتم انتقاؤها من قبل القراء الشاشة؟ إذا كان الجواب نعم، ثم وضع الصورة في HTML. إذا كان لمجرد التصميم، ثم يمكنك استخدام خاصية background-الصورة في CSS لحقن الصورة. وكما أن الكثير من الناس هنا والتي سبق ذكرها، يمكنك بعد ذلك استخدام عنصر الزائفة على الصورة إذا أردت.

ونلاحظ أيضا أن معظم عناكب محركات البحث لا خلفية الصور مؤشر CSS سيتم تجاهل بالتالي فإن الصور الخلفية، وأنك لن تكون قادرة على الحصول على أي حركة المرور من محركات البحث (SEO أي فائدة في القصير).

وحيث كما يتم فهرسة كافة الصور المحددة مع به (إلا إذا المستبعدة يدويا) ويمكن أن تحقق في حركة المرور من محركات البحث اذا هي الأمثل عنوان / الصفات البديلة وأسماء بشكل صحيح (w.r.t بعض الكلمة).

ويمكنك استخدام العلامات IMG إذا كنت تريد الصور لتكون السوائل وعلى نطاق وأحجام مختلفة للشاشة. بالنسبة لي هذه الصور هي في معظمها جزء من المحتوى. بالنسبة لمعظم العناصر التي ليست جزءا من المحتوى، وأنا استخدم العفاريت CSS للحفاظ على حجم التنزيل أدنى إلا إذا كنت حقا ترغب في تحريك الرموز وما إلى ذلك.

وأنا استخدم صورة بدلا من خلفية الصورة عندما أريد لجعلها 100٪ لمط الذي أيد في معظم المتصفحات.

إذا كنت ترغب في إضافة صورة فقط عن محتوى خاص على الصفحة أو صفحة واحدة فقط يجب عليك استخدام العلامة IMG وإذا كنت ترغب في وضع الصورة على صفحات أكثر من واحد ثم يجب عليك استخدام CSS صورة الخلفية.

PRO آخر لصورة الخلفية:صور الخلفية ل <ul>/<ol> القوائم.

استخدم صور الخلفية إذا كانت جزءًا من التصميم العام ومتكررة على صفحات متعددة.ويفضل أن يكون ذلك في شكل صورة متحركة في الخلفية للتحسين.

استخدم العلامات لجميع الصور التي لا تشكل جزءًا من التصميم العام، وعلى الأرجح يتم وضعها مرة واحدة، مثل صور محددة للمقالات والأشخاص والصور المهمة التي تستحق الإضافة إليها صور Google.

** الصورة المتكررة الوحيدة التي أرفقها في ملف <img> العلامة هي شعار الموقع/الشركة.نظرًا لأن الأشخاص يميلون إلى النقر عليه للانتقال إلى الصفحة الرئيسية، فإنك تقوم بتغليفه بـ <a> بطاقة شعار.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top