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

Wenn Sie Ihr CSS in einer externen Datei haben, ist es oft praktisch, ein Bild, das häufig auf der Website verwendet wird (z. B. ein Kopfzeilenbild), als Hintergrundbild anzuzeigen, weil Sie dann die Flexibilität haben, das Bild später zu ändern.

Nehmen wir an, Sie haben den folgenden HTML-Code:

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

...und CSS:

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

Ein paar Tage später ändern Sie den Speicherort des Bildes. Alles, was Sie tun müssen, ist, die CSS zu aktualisieren:

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

Andernfalls müssten Sie die src Attribut des entsprechenden <img> Tag in jeder HTML-Datei (vorausgesetzt, Sie verwenden keine serverseitige Skriptsprache oder CMS um den Prozess zu automatisieren).

Auch Hintergrundbilder sind nützlich, wenn Sie nicht wollen, dass der Benutzer das Bild speichern kann (obwohl ich das noch nie tun musste).

Answer 2

Ungefähr das gleiche wie sanchothefat's Antwort aber unter einem anderen Aspekt. Ich frage mich immer: Wenn ich die Stylesheets komplett von der Website entfernen würde, würden die verbleibenden Elemente nur zum Inhalt gehören? Wenn ja, dann habe ich meine Arbeit gut gemacht.

Answer 3

Einige Antworten machen das Szenario zu kompliziert. Das ist eine ganz einfache Situation.

Beantworten Sie diese Frage einfach jedes Mal, wenn Sie ein Bild einstellen möchten:

Ist dies Teil des Inhalts oder Teil des Designs?

Wenn Sie diese Frage nicht beantworten können, wissen Sie wahrscheinlich nicht, was Sie tun oder was Sie tun wollen!

Überlegen Sie auch NICHT, ob Sie die beiden Techniken nebeneinander verwenden sollten, nur weil Sie "druckerfreundlich" sein wollen oder nicht. Verstecken Sie auch NICHT den Inhalt aus SEO-Sicht mit CSS. Wenn Sie Ihre Inhalte in CSS-Dateien verwalten, haben Sie sich selbst ins Bein geschossen. Dies ist nur eine triviale Entscheidung darüber, was Inhalt ist und was nicht. Jeder andere Aspekt sollte ignoriert werden.

Answer 4

Ich würde noch zwei weitere Argumente hinzufügen:

• Eine img Tag ist gut, wenn Sie Folgendes brauchen Größe ändern das Bild. Wenn das Originalbild z. B. 100 x 100 Pixel groß ist und Sie wollen, dass es 80 x 80 Pixel groß ist, können Sie die CSS-Breite und -Höhe des img-Tags festlegen. Ich kenne keine gute Möglichkeit, dies mit background-image zu tun. EDIT: Dies kann jetzt auch mit einem Hintergrundbild gemacht werden, indem die background-size CSS3-Attribut.

• 使用方法 Hintergrundbild ist gut, wenn Sie dynamisch zwischen Sprites wechseln . Wenn Sie z. B. ein Schaltflächenbild haben und ein separates Bild anzeigen lassen möchten, wenn der Mauszeiger über dem Element schwebt, können Sie ein Hintergrundbild verwenden, das sowohl das normale als auch das Hover-Sprite enthält, und die Hintergrundposition dynamisch ändern.

Answer 5

One more benefit from using the <IMG> tag is related to SEO - i.e. you can provide additional information about the image in the ALT attribute of the image tag, while there's no way to provide such information when specifying the image through CSS and in that case only the image file name may be indexed by search engines. The ALT attribute definitely gives the <IMG> tag SEO advantage over the CSS approach. Deshalb ist es meiner Meinung nach besser, die Bilder, die in den Ergebnissen der Bildersuche (z. B. Google Image Search) gut platziert werden sollen, mit dem <IMG>-Tag anzugeben.