html - link - w3school




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

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

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


الاستخدام السليم ل IMG

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

استخدامات براغماتية من IMG

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

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

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

HTML للمحتوى و CSS للتصميم. هل الصورة ضرورية وهل يحتاجها قارئو الشاشة؟ إذا كان الجواب نعم ، فضع الصورة في HTML. إذا كان الغرض فقط هو التصميم ، فيمكنك استخدام خاصية صورة الخلفية في 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 animation لتتلاشى <img/> src .

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


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

  • تعد العلامة img جيدة إذا كنت بحاجة إلى تغيير حجم الصورة. على سبيل المثال ، إذا كانت الصورة الأصلية 100 بكسل × 100 بكسل ، وتريد أن تكون 80 بكسل × 80 بكسل ، فيمكنك تعيين عرض CSS وارتفاعها لعلامة img. لا أعرف أي طريقة جيدة للقيام بذلك باستخدام صورة الخلفية. تعديل: يمكن الآن إجراء ذلك أيضًا باستخدام صورة الخلفية ، باستخدام سمة CSS3 background-size .

  • يعد استخدام صورة الخلفية أمرًا جيدًا عندما تحتاج إلى التبديل بين الصور المتحركة ديناميكيًا. على سبيل المثال ، إذا كانت لديك صورة زر ، وتريد أن يتم عرض صورة منفصلة عندما يحوم المؤشر فوق العنصر ، فيمكنك استخدام صورة خلفية تحتوي على كل من الورق العادي والوحوش المتحركة ، وتغيير موضع الخلفية ديناميكيًا.


إذا كان لديك 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 (على افتراض أنك لا تستخدم لغة برمجة نصية من جانب الخادم أو CMS لأتمتة العملية).

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


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


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


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

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


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

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

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


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

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

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

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

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


حول نفس الجواب sanchothefat ، ولكن من جانب مختلف. أسأل نفسي دائمًا: إذا كنت سأزيل أوراق الأنماط تمامًا من موقع الويب ، فهل تنتمي العناصر المتبقية إلى المحتوى فقط؟ إذا كان الأمر كذلك ، فقد قمت بعملي بشكل جيد.


زوجان من السيناريوهات الأخرى التي ينبغي استخدام background-image فيها:

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

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


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


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

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


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


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


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


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


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

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

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

طالب على شبكة الإنترنت من باريس ، فرنسا





background-image