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




of image (25)

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

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

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


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

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


الاستخدام السليم ل 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 أجل تمديد صورة خلفية لملء نافذة بأكملها.

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

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


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


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


صورة خلفية أخرى للمحترفين: صور الخلفية للقوائم <ul> / <ol> .

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

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

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


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


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


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

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

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


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

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

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

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


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

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

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

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

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


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


المقدمة = img.

Background = CSS background.


إذا كان لديك 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 لأتمتة العملية).

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


مدخلاً صغيرًا ، واجهت مشاكل في الصور المتجاوبة مما أدى إلى إبطاء عملية العرض على الآيفون لمدة تصل إلى دقيقة ، حتى مع الصور الصغيرة:

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

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


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

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


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

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


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


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

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

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

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


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


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


من الجيد معرفة الاختلافات بين margin padding . فيما يلي بعض الاختلافات:

  • الهامش هو الفضاء الخارجي لعنصر ، في حين أن المساحة الداخلية هي عنصر داخلي .

  • الهامش هو المساحة خارج حدود عنصر ما ، بينما المساحة هي المساحة داخل حدودها.

  • يتقبل الهامش قيمة auto: margin: auto ، ولكن لا يمكنك تعيين الحشو إلى تلقائي.

  • يمكن تعيين الهامش على أي رقم ، ولكن يجب أن تكون المساحة غير سالبة.

  • عندما تقوم بنمط عنصر ، ستتأثر الحشوة أيضًا (على سبيل المثال ، لون الخلفية) ، ولكن ليس الهامش.







html css image background-image