Wann soll IMG vs. CSS Hintergrundbild verwendet werden?

In welchen Situationen ist es besser, ein HTML- IMGTag zum Anzeigen eines Bildes zu verwenden, als ein CSS background-imageund umgekehrt?

Zu den Faktoren können Zugänglichkeit, Browserunterstützung, dynamischer Inhalt oder technische Einschränkungen oder Usability-Prinzipien gehören.

Richtige Verwendung von IMG

1. Verwenden IMGSie diese Option, wenn Personen Ihre Seite drucken sollen und das Bild standardmäßig enthalten sein soll. - JayTee
2. Verwenden Sie IMG(mit altText), wenn das Bild eine wichtige semantische Bedeutung hat, z. B. ein Warnsymbol . Dies stellt sicher, dass die Bedeutung des Bildes in allen Benutzeragenten, einschließlich Bildschirmleseprogrammen, kommuniziert werden kann.

Pragmatische Verwendung von IMG

1. Verwenden Sie das IMGPlus-Alt-Attribut, wenn das Bild Teil des Inhalts ist, z. B. ein Logo, ein Diagramm oder eine Person (reale Person, keine Personen mit Bildmaterial ). - Sanchothefat
2. Verwenden IMGSie diese Option, wenn Sie sich auf die Browser-Skalierung verlassen, um ein Bild proportional zur Textgröße zu rendern.
3. Verwendung IMG für mehrere Overlay-Bilder in IE6 .
4. Verwenden IMGmit einem z-indexum ein Hintergrundbild zu strecken seine gesamten Fenster zu füllen.
   Beachten Sie, dass dies bei der CSS3-Hintergrundgröße nicht mehr der Fall ist. siehe # 6 unten.
5. Die Verwendung von imganstelle von background-imagekann die Leistung von Animationen im Hintergrund erheblich verbessern.

Wann wird das CSS-Hintergrundbild verwendet?

1. Verwenden Sie CSS-Hintergrundbilder, wenn das Bild nicht Teil des Inhalts ist . - Sanchothefat
2. Verwenden Sie CSS-Hintergrundbilder, wenn Sie Text ersetzen, z. Absätze / Überschriften. - Sanchothefat
3. Verwenden background-imageSie diese Option, wenn Personen Ihre Seite drucken sollen und das Bild nicht standardmäßig enthalten sein soll. - JayTee
4. Verwenden background-imageSie diese Option, wenn Sie die Downloadzeiten wie bei CSS-Sprites verbessern müssen .
5. Verwenden background-imageSie diese Option, wenn nur ein Teil des Bildes sichtbar sein soll, wie bei CSS-Sprites.
6. Verwenden background-imagemit , background-size:coverum ein Hintergrundbild zu strecken seine gesamten Fenster zu füllen.

Es ist eine Schwarz-Weiß-Entscheidung für mich. Wenn das Bild Teil des Inhalts ist, z. B. ein Logo, ein Diagramm oder eine Person (reale Person, keine Stock-Foto-Personen), verwenden Sie das <img />Attribut tag plus alt. Für alles andere gibt es CSS-Hintergrundbilder.

Die andere Zeit, um CSS-Hintergrundbilder zu verwenden, ist das Ersetzen von Text durch Bilder, z. Absätze / Überschriften.

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

Sie können das divHintergrundbild von a nativ ändern :

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

Das spart jede Art von JavaScript oder jQuery Animation ein verblasst <img/>‚s src.

Weitere Informationen zu Übergängen in MDN .

Die obigen Antworten berücksichtigen nur den Designaspekt. Ich liste es in SEO-Aspekten auf.

Wann zu verwenden <img />

1. Wenn Ihr Bild von einer Suchmaschine indiziert werden muss
2. Wenn es in Bezug auf Inhalt steht, nicht auf Design.
3. Wenn Ihr Bild nicht zu klein ist (keine ikonischen Bilder).
4. Bilder, die Sie hinzufügen altund titlezuordnen können.
5. Bilder von einer Webseite, die Sie mit Printmedien-CSS drucken möchten

Wann wird CSS verwendet? background-image

1. Bilder, die ausschließlich zum Entwerfen verwendet werden.
2. Keine Beziehung zum Inhalt.
3. Kleine Bilder, die wir mit CSS3 spielen können.
4. Wiederholen von Bildern (Im Symbol des Blogautors wird das Datumssymbol für jeden Artikel usw. wiederholt.)

Da ich sie aus diesen Gründen verwenden werde. Dies sind bewährte Methoden zur Suchmaschinenoptimierung von Bildern.

Browser sind nicht immer so eingestellt, dass sie standardmäßig Hintergrundbilder drucken. wenn Sie beabsichtigen, dass Leute Ihre Seite drucken :)

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

Angenommen, Sie haben den folgenden HTML-Code:

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

... und CSS:

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

Einige Tage später ändern Sie den Speicherort des Bildes. Sie müssen lediglich das CSS aktualisieren:

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

Andernfalls müssten Sie das srcAttribut des entsprechenden <img>Tags in jeder HTML-Datei aktualisieren (vorausgesetzt, Sie verwenden keine serverseitige Skriptsprache oder kein CMS, um den Prozess zu automatisieren).

Hintergrundbilder sind auch nützlich, wenn Sie nicht möchten, dass der Benutzer das Bild speichern kann (obwohl ich dies noch nie getan habe).

Ungefähr das Gleiche wie die Antwort von Sanchothefat , aber von einem anderen Aspekt. Ich frage mich immer: Wenn ich die Stylesheets vollständig von der Website entfernen würde, gehören die restlichen Elemente nur zum Inhalt? Wenn ja, habe ich meine Arbeit gut gemacht.

Einige Antworten verkomplizieren das Szenario hier. Dies ist eine absolut einfache Situation.

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

Ist dies Teil des Inhalts oder Teil des Designs?

Wenn Sie dies nicht beantworten können, wissen Sie wahrscheinlich nicht, was Sie tun oder was Sie tun möchten!

Denken Sie auch NICHT an die beiden Techniken, nur weil Sie "druckerfreundlich" sein möchten oder nicht. Verstecken Sie Inhalte auch NICHT aus SEO-Sicht mit CSS. Wenn Sie feststellen, dass 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 oder nicht. Jeder andere Aspekt sollte ignoriert werden.

Ich würde zwei weitere Argumente hinzufügen:

• Ein img- Tag ist gut, wenn Sie die Bildgröße ändern müssen . Wenn das Originalbild beispielsweise 100 x 100 Pixel groß ist und 80 x 80 Pixel groß sein soll, können Sie die CSS-Breite und -Höhe des img-Tags festlegen. Ich kenne keinen guten Weg, dies mit Hintergrundbildern zu tun. BEARBEITEN: Dies kann jetzt auch mit einem Hintergrundbild unter Verwendung des background-sizeCSS3-Attributs erfolgen.

• Die Verwendung von Hintergrundbildern ist gut, wenn Sie dynamisch zwischen Sprites wechseln müssen . Wenn Sie beispielsweise ein Schaltflächenbild haben und möchten, dass ein separates Bild angezeigt wird, wenn sich der Cursor über dem Element befindet, können Sie ein Hintergrundbild verwenden, das sowohl die normalen als auch die Hover-Sprites enthält, und die Hintergrundposition dynamisch ändern.

Ein weiterer Vorteil der Verwendung des <IMG> -Tags hängt mit der Suchmaschinenoptimierung zusammen. Sie können also zusätzliche Informationen zum Bild im ALT-Attribut des Bild-Tags bereitstellen, während es keine Möglichkeit gibt, solche Informationen bereitzustellen, wenn Sie das Bild über CSS angeben In diesem Fall kann nur der Name der Bilddatei von Suchmaschinen indiziert werden. Das ALT-Attribut bietet definitiv den SEO-Vorteil des <IMG> -Tags gegenüber dem CSS-Ansatz. Aus diesem Grund ist es meiner Meinung nach besser, die Bilder, die Sie in den Bildsuchergebnissen (z. B. Google Image Search) gut einordnen möchten, mit dem <IMG> -Tag anzugeben.

Vordergrund = img.

Hintergrund = CSS-Hintergrund.

Verwenden Sie Hintergrundbilder nur bei Bedarf, z. B. Container mit Kacheln.

Einer der wichtigsten Vorteile von IMAGES ist, dass es besser für SEO ist .

Bei Verwendung eines Hintergrundbilds müssen Sie die Abmessungen unbedingt angeben. Dies kann ein erhebliches Problem sein, wenn Sie sie nicht im Voraus kennen oder nicht bestimmen können.

Ein großes Problem <img />sind Überlagerungen. Was ist, wenn ich einen inneren CSS-Schatten auf meinem Bild haben möchte ( box-shadow:inset 0 0 5px rgb(0,0,0,.5))? In diesem Fall müssen Sie, da <img />keine untergeordneten Elemente vorhanden sein können, die Positionierung verwenden und leere Elemente hinzufügen, was einem nutzlosen Markup entspricht.

Zusammenfassend ist es ziemlich situativ.

Einige andere Szenarien, in denen background-imageverwendet werden sollte:

• Wenn Sie möchten, dass sich das Bild ändert, wenn Sie mit der Maus darüber fahren.
• Wenn Sie dem Bild abgerundete Ecken hinzufügen möchten. Wenn Sie verwenden img, tritt das Bild aus den abgerundeten Ecken aus.

Verwenden Sie das CSS-Hintergrundbild bei mehreren Skins oder Designversionen. Javascript kann verwendet werden, um eine Klasse eines Elements dynamisch zu ändern, wodurch es gezwungen wird, ein anderes Bild zu rendern. Mit einem IMG-Tag kann es schwieriger sein.

Hier eine technische Überlegung: Wird das Bild dynamisch generiert? Es ist in der Regel viel einfacher, das <img>Tag in HTML zu generieren, als zu versuchen, eine CSS-Eigenschaft dynamisch zu bearbeiten.

Was ist mit der Größe des Bildes? Wenn ich das img-Tag verwende, skaliert der Browser das Bild. Wenn ich CSS-Hintergrund verwende, schneidet der Browser nur einen Teil des größeren Bildes aus.

In Bezug auf das Animieren von Bildern mit CSS TranslateX / Y (die richtige Methode zum Animieren von HTML) - Wenn Sie eine Chrome Timeline-Aufzeichnung von animierten CSS-Hintergrundbildern im Vergleich zu animierten IMG-Tags durchführen, werden die Malzeiten für das CSS drastisch kürzer Hintergrundbilder.

Es gibt noch einen anderen Grund! Wenn Sie ein ansprechendes Design haben und die Verwendung von Bildern mit niedriger, mittlerer und hoher Auflösung für Geräte durch Medienabfragen aufteilen möchten, sollten Sie auch Hintergründe verwenden.

Außerdem habe ich einen Galeriebereich mit inkonsistenten Bildgrößen. Obwohl diese Bilder offensichtlich als Inhalt betrachtet werden, verwende ich Hintergrundbilder und zentriere sie in Divs mit einer festgelegten Größe. Dies ist ähnlich wie bei Facebook in ihren Alben.

img ist aus einem bestimmten Grund ein HTML-Tag, daher sollte es verwendet werden. Zum Referenzieren oder zur Veranschaulichung von Dingen, zB: in Artikeln.

Auch wenn das Bild eine Bedeutung hat oder hat sein klickbare ein img ist besser als ein CSS - Hintergrund . Für alle anderen Situationen kann meiner Meinung nach ein CSS-Hintergrund verwendet werden.

Es ist jedoch ein Thema, das immer wieder diskutiert werden muss.

Web Student aus Paris, Frankreich

Nur ein kleines Hinzufügen, sollten Sie das img-Tag verwenden, wenn Benutzer in der Lage sein sollen, mit der rechten Maustaste zu klicken und das Bild zu speichern / das Bild zu speichern. Wenn Sie also das Bild als Ressource für bereitstellen möchten Andere.

Durch die Verwendung eines Hintergrundbilds wird (soweit mir in den meisten Browsern bekannt ist) die Option zum direkten Speichern des Bildes deaktiviert.

Bei einer kleinen Eingabe hatte ich Probleme mit reaktionsschnellen Bildern, die das Rendern auf dem iPhone bis zu einer Minute lang verlangsamten, selbst bei kleinen Bildern:

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

Bei der Umstellung auf Hintergrundbilder ist das Problem jedoch behoben. Dies ist nur möglich, wenn Sie auf neuere Browser abzielen.

IMGLaden Sie zuerst, da sich das srcin der HTML-Datei selbst befindet, während im Fall background-imageder Quelle im Stylesheet erwähnt wird, sodass das Bild nach dem Laden des Stylesheets geladen wird, was das Laden der Webseite verzögert.

HTML ist für Inhalte und CSS ist für Design. Ist das Bild notwendig und muss es von Screenreadern aufgenommen werden? Wenn die Antwort ja ist, fügen Sie das Bild in den HTML-Code ein. Wenn es sich nur um ein Styling handelt, können Sie die Hintergrundbildeigenschaft in CSS verwenden, um das Bild einzufügen. Genau wie viele Leute hier bereits erwähnt haben, können Sie dann ein Pseudoelement auf dem Bild verwenden, wenn Sie möchten.

Beachten Sie auch, dass die meisten Suchmaschinenspinnen keine CSS-Hintergrundbilder indizieren, daher werden die Hintergrundbilder ignoriert und Sie können keinen Traffic von Suchmaschinen erhalten (kurz gesagt, kein SEO-Vorteil).

Wobei alle mit Tags definierten Bilder indiziert werden (sofern nicht manuell ausgeschlossen) und Verkehr von Suchmaschinen einbringen können, wenn ihre Titel- / Alt-Attribute und Dateinamen ordnungsgemäß optimiert sind (z. B. ein Schlüsselwort).

Sie können IMG-Tags verwenden, wenn die Bilder flüssig sein und auf unterschiedliche Bildschirmgrößen skaliert werden sollen. Für mich sind diese Bilder größtenteils Teil des Inhalts. Für die meisten Elemente, die nicht Teil des Inhalts sind, verwende ich CSS-Sprites, um die Downloadgröße minimal zu halten, es sei denn, ich möchte wirklich Symbole usw. animieren.

Ich verwende Bild anstelle von Hintergrundbild, wenn ich sie 100% dehnbar machen möchte, was in den meisten Browsern unterstützt wird.

Wenn Sie ein Bild nur für den speziellen Inhalt der Seite oder nur für eine Seite hinzufügen möchten, sollten Sie das IMG-Tag verwenden. Wenn Sie ein Bild auf mehr als einer Seite platzieren möchten, sollten Sie das CSS-Hintergrundbild verwenden.

Ein weiteres Hintergrundbild PRO: Hintergrundbilder für <ul>/ <ol>Listen.

Verwenden Sie Hintergrundbilder, wenn diese Teil des Gesamtdesigns sind und auf mehreren Seiten wiederholt werden. Zur Optimierung vorzugsweise in Hintergrund-Sprite-Form.

Verwenden Sie Tags für alle Bilder, die nicht Teil des Gesamtdesigns sind und höchstwahrscheinlich einmal platziert werden, z. B. bestimmte Bilder für Artikel, Personen und wichtige Bilder, die es verdienen, zu Google-Bildern hinzugefügt zu werden.

** Das einzige wiederholte Bild, das ich in ein <img>Tag einbinde, ist das Site- / Firmenlogo. Da die Leute dazu neigen, darauf zu klicken, um zur Startseite zu gelangen, umschließen Sie sie mit einem <a>Tag.