Wann sollte man IMG vs. CSS-Hintergrundbild verwenden?

Question

In welchen Situationen ist es sinnvoller, eine HTML IMG Tag, um ein Bild anzuzeigen, im Gegensatz zu einem CSS background-image und andersherum?

Zu den Faktoren können Zugänglichkeit, Browserunterstützung, dynamische Inhalte oder jede Art von technischen Beschränkungen oder Usability-Prinzipien gehören.

Answer 1

Richtige Verwendung der IMG

1. Verwenden Sie IMG wenn Sie beabsichtigen Menschen Ihre Seite drucken und Sie möchten, dass das Bild standardmäßig aufgenommen wird. - JayTee
2. Verwenden Sie IMG (mit alt Text), wenn das Bild eine wichtige semantische Bedeutung hat, wie z. B. ein Warnsymbol . Dadurch wird sichergestellt, dass die Bedeutung des Bildes in allen Benutzer-Agenten, einschließlich Screenreadern, vermittelt werden kann.

Pragmatische Verwendungen des IMG

1. Verwenden Sie IMG plus alt-Attribut, wenn das Bild ist Teil des Inhalts wie z. B. ein Logo, ein Diagramm oder eine Person (eine echte Person, keine Stockfoto-Person). - sanchothefat
2. Verwenden Sie IMG wenn Sie sich auf die Skalierung des Browsers verlassen, um ein Bild im Verhältnis zur Textgröße darzustellen.
3. Verwenden Sie IMG für mehrere Overlay-Bilder im IE6 .
4. Verwenden Sie IMG con un z-index in der Reihenfolge auf ein Hintergrundbild strecken um sein gesamtes Fenster zu füllen.
   Beachten Sie, dass dies mit CSS3 background-size nicht mehr zutrifft; siehe #6 unten.
5. 使用方法 img anstelle von background-image kann die Leistung von Animationen vor einem Hintergrund erheblich verbessern.

Wann Sie CSS background-image verwenden sollten

1. Verwenden Sie CSS-Hintergrundbilder, wenn die Bild ist nicht Teil des Inhalts . - sanchothefat
2. Verwenden Sie CSS-Hintergrundbilder, wenn bei Bild-Ersatz von Text z. B. Absätze/Kopfzeilen. - sanchothefat
3. Verwenden Sie background-image wenn Sie beabsichtigen Menschen Ihre Seite drucken und Sie nicht möchten, dass das Bild standardmäßig aufgenommen wird. - JayTee
4. Verwenden Sie background-image wenn Sie die Downloadzeiten verbessern müssen, wie mit CSS-Sprites .
5. Verwenden Sie background-image wenn nur ein Teil des Bildes sichtbar sein soll, wie bei CSS-Sprites.
6. Verwenden Sie background-image con background-size:cover um ein Hintergrundbild so zu strecken, dass es das gesamte Fenster ausfüllt.

Answer 2

Für mich ist das eine Schwarz-Weiß-Entscheidung. Wenn das Bild Teil des Inhalts ist, z. B. ein Logo, ein Diagramm oder eine Person (eine echte Person, keine Stockfoto-Leute), dann verwenden Sie die <img /> Tag plus alt-Attribut. Für alles andere gibt es CSS-Hintergrundbilder.

Ein weiterer Grund für die Verwendung von CSS-Hintergrundbildern ist die Ersetzung von Text durch Bilder, z. B. in Absätzen oder Überschriften.

Answer 3

Ich bin überrascht, dass das noch niemand erwähnt hat: CSS-Übergänge .

Sie können nativ einen Übergang von div Hintergrundbildes:

#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);
}

Damit wird jede Art von JavaScript- oder jQuery-Animation zum Einblenden eines <img/> 's src .

Weitere Informationen über Übergänge auf MDN .

Answer 4

Die obigen Antworten berücksichtigen nur den Design-Aspekt. Ich führe sie unter SEO-Aspekten auf.

Wann zu verwenden <img />

1. Wenn Ihr Image sein muss von der Suchmaschine indiziert
2. Wenn es einen Bezug zum Inhalt hat, einschließlich Karten (Klickbereiche), aber nicht mit dem Design zusammenhängt. Das Design ist hier wahrscheinlich am schwierigsten zu analysieren, denn es geht nur um das Design. Ich würde sagen, vielleicht funktionales Design (Karten, Thumbnails, Profilbilder, Dinge, die man anklicken kann) im Gegensatz zu ästhetischem Design, das meist für die Attraktivität von Websites verwendet wird.
3. Posten auflisten
4. Wenn Ihr Bild nicht zu klein ist (keine ikonischen Bilder).
5. Bilder, die Sie hinzufügen können alt et title Attribut.
6. Bilder von einer Webseite, die Sie mit print media css drucken möchten

Wann wird CSS verwendet? background-image

1. Bilder, die ausschließlich der Gestaltung dienen.
2. Kein Bezug zum Inhalt.
3. Kleine Bilder, die wir mit CSS3 spielen können.
4. Sich wiederholende Bilder (im Blog Autorensymbol, Datumssymbol wird für jeden Artikel wiederholt usw.,).

Ich werde sie aus den genannten Gründen verwenden. Dies sind gute Praktiken der Suchmaschinenoptimierung von Bildern.

Answer 5

Browser sind nicht immer so eingestellt, dass Hintergrundbilder standardmäßig gedruckt werden; wenn Sie beabsichtigen, dass die Leute Ihre Seite ausdrucken :)