Wann verwendet IMG vs. CSS background-image?

https://stackoverflow.com/questions/492809

20-08-2019
|

Frage

In welchen Situationen ist es sinnvoll, einen HTML IMG-Tag zu verwenden, um ein Bild anzuzeigen, wie zu einem CSS background-image dagegen, und umgekehrt?

Faktoren können Zugänglichkeit, Browser-Unterstützung, dynamische Inhalte oder jede Art von technischen Grenzen oder Usability-Prinzipien.

Lösung

Die richtige Verwendung von IMG

Verwenden Sie IMG wenn Sie beabsichtigen, haben Menschen drucken Sie Ihre Seite und Sie will das Bild standardmäßig enthalten sein. - JayTee
Verwenden Sie IMG (mit alt Text), wenn das Bild hat eine wichtige semantische Bedeutung, wie ein Warnsymbol . Dadurch wird sichergestellt, dass die Bedeutung des Bildes in allen User-Agents mitgeteilt werden, einschließlich Screenreadern.

Pragmatische Anwendungen von IMG

Verwenden Sie IMG und alt-Attribut, wenn das Bild Teil des Inhalts solchen als logo oder ein Diagramm oder eine Person (reale Person, nicht stock photo Menschen). - sanchothefat
Verwenden Sie IMG, wenn Sie auf Browser Skalierung verlassen ein Bild im Verhältnis zur Textgröße zu machen.
Verwenden Sie IMG für rel="noreferrer">.

~~Verwenden IMG mit einem z-index um zum~~ ~~ein Hintergrundbild strecken ihre gesamte Fenster zu füllen.~~
Hinweis, ist dies nicht mehr mit CSS3 Hintergrund-Größe true; siehe # 6 unten.
Verwenden img statt background-image dramatisch Leistung von Animationen über einen Hintergrund verbessern.

Wenn CSS Hintergrund-Bild verwenden

Verwenden Sie CSS Hintergrundbilder, wenn die Bild ist nicht Teil des Inhalts . - sanchothefat
Verwenden Sie CSS Hintergrundbilder, wenn tun Bild-Ersatz von Text z.B. Absätze / Header. - sanchothefat
Verwenden Sie background-image wenn Sie beabsichtigen, haben Menschen drucken Sie Ihre Seite und Sie nicht das Bild will standardmäßig enthalten sein. - JayTee
Verwenden Sie background-image wenn Sie Download-Zeiten zu verbessern, wie mit CSS-Sprites .
Verwenden Sie background-image wenn Sie nur einen Teil des Bildes sichtbar zu sein, wie mit CSS-Sprites.
Verwenden Sie background-image mit background-size:cover, um ein Hintergrundbild zu strecken ihre gesamte Fenster zu füllen.

Andere Tipps

Es ist eine Schwarz-Weiß-Entscheidung für mich. Wenn das Bild eines Teil des Inhalts, wie ein Logo oder ein Diagramm oder eine Person (reale Person, nicht stock photo Menschen), dann verwenden Sie den <img /> Tag und alt-Attribut ist. Für alles andere gibt es Bilder Hintergrund CSS.

Die andere Zeit CSS Hintergrundbilder zu verwenden ist, wenn Bild-Ersatz von Text zB tun. Absätze / headers.

Ich bin überrascht, die niemand erwähnte dies noch. CSS-Übergänge

Sie können nativ ein div des Hintergrundbildes Übergang:

#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 eines <img/> des src zu verblassen.

Weitere Informationen über Übergänge auf MDN .

Vor Antworten berücksichtigt nur Design-Aspekt. Ich bezeichne es in SEO Aspekte.

Wenn <img /> verwenden

Wenn Sie Ihr Bild braucht werden von Suchmaschinen indiziert
Wenn es hat Bezug zum Inhalt nicht zu entwerfen.
Wenn Ihr Bild nicht zu klein ist (nicht ikonische Bilder).
Bilder, wo Sie alt und title Attribut hinzufügen können.
Bilder von einer Webseite, die Sie verwenden möchten Printmedien CSS drucken

Wenn CSS background-image verwenden

Bilder Rein zur Gestaltung.
Keine Beziehung mit Inhalt.
Kleine Bilder, die wir mit CSS3 spielen können.
Wiederholen von Bildern (im Blog-Autor Symbol, Datum Symbol wird für jeden Artikel usw. wiederholt werden.,).

Als ich werde sie nutzen auf der Grundlage dieser Gründe. Dies sind gute Praxis der Suchmaschinen-Optimierung der Bilder.

Browser ist nicht immer gesetzt Hintergrundbilder standardmäßig drucken; wenn Sie beabsichtigen, die Menschen Ihre Seite drucken haben:)

Wenn Sie Ihre CSS in einer externen Datei haben, dann ist es oft bequem, um ein Bild anzuzeigen, die häufig über die Website (wie eine Header-Bild) als Hintergrundbild verwendet wird, weil dann Sie haben die Flexibilität, später das Bild zu ändern .

Zum Beispiel, sagen Sie die folgenden HTML haben:

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

... und CSS:

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

Ein paar Tage später, können Sie die Position des Bildes ändern. Alles was Sie tun müssen, ist die CSS aktualisieren:

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

Ansonsten würden Sie das src Attribut des entsprechenden <img>-Tag in jeder HTML-Datei aktualisieren müssen (vorausgesetzt, Sie sind nicht eine serverseitige Skriptsprache oder CMS den Prozess zu automatisieren).

Auch sind Hintergrundbilder nützlich, wenn der Benutzer nicht möchte in der Lage sein, das Bild zu speichern (obwohl ich immer dies nicht tun musste).

Über die gleiche wie sanchothefat Antwort , aber aus einem anderen Aspekt. Ich frage mich immer: wenn ich vollständig die Stylesheets von der Website entfernen würde, haben die übrigen Elemente nur zum Inhalt gehört? Wenn ja, ich habe meine Arbeit gut.

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

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

Ist das ein Teil des Inhalts oder eines Teils des Designs?

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

Bedenken Sie auch NICHT neben den beiden Technik, nur weil Sie „Drucker“ zu sein, würde mir wünschen oder nicht. Auch nicht verstecken Inhalt von einer SEO Sicht mit CSS. Wenn Sie sich die Verwaltung Ihrer Inhalte in CSS-Dateien finden, schossen Sie sich in das Bein. Dies ist nur eine triviale Entscheidung, was ist der Inhalt oder nicht. Jeder anderer Aspekt außer Acht gelassen werden soll.

Ich möchte hinzufügen, zwei weitere Argumente:

Ein img Tag ist gut, wenn Sie auf müssen Resize , um das Bild. Z.B. wenn das Originalbild 100px von 100 Pixel ist, und Sie wollen es von 80px 80px werden, können Sie die CSS Breite und Höhe des img-Tag gesetzt. ~~Ich weiß nicht, von jedem guten Weg, um diese mit Hintergrund-Bild zu tun~~ EDIT:. Dies kann nun auch mit einem Hintergrundbild durchgeführt werden, mit der background-size CSS3-Attribut.
Mit background-image ist gut, wenn Sie brauchen, um dynamisch Schalter zwischen Sprites . Z.B. wenn Sie auf eine Schaltfläche Bild haben, und Sie möchten ein separates Bild angezeigt, wenn der Cursor über das Element schwebt, können Sie ein Hintergrundbild verwenden, um sowohl die normale und schweben Sprites enthält, und dynamisch die Hintergrund-Position ändern.

Ein weiterer Vorteil aus der Verwendung des -Tags im Zusammenhang mit SEO ist - dh Sie können zusätzliche Informationen über das Bild in der ALT-Attribut des Image-Tag zur Verfügung stellen kann, während es keine Möglichkeit gibt, diese Informationen bereitzustellen, wenn das Bild durch CSS Angabe und in diesem Fall nur der Bilddateiname kann von Suchmaschinen indiziert werden. Das ALT-Attribut gibt auf jeden Fall den Tag SEO Vorteil gegenüber dem CSS-Ansatz. Deshalb ich nach ist es besser, die Bilder geben Sie gut in den Bildsuchergebnissen (zum Beispiel Google Image Search) mit dem Tag Rang wollen.

Vordergrund = img.

Hintergrund = CSS Hintergrund.

nur Hintergrundbilder verwenden, wenn notwendig, zum Beispiel mit Bild Behälter, die Fliesen.

Eine der wichtigsten PROS mithilfe von IMAGES ist, dass es ist besser für SEO .

ein Hintergrundbild verwenden, müssen Sie unbedingt die Maße angeben. Dies kann ein schwerwiegendes Problem sein, wenn Sie nicht wirklich sie im Voraus wissen, oder kann sie nicht bestimmen.

Ein großes Problem mit <img /> ist Overlays. Was passiert, wenn ich auf dem Bild ein CSS inneren Schatten wollen (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? In diesem Fall, da <img /> nicht untergeordnete Elemente haben können, müssen Sie Positionierung verwenden und leere Elemente hinzuzufügen, die nutzlos Markup entspricht.

Abschließend ist es durchaus situationsabhängig.

Ein paar andere Szenarien, in denen background-image verwendet werden soll:

Wenn Sie das Bild zu ändern, wenn die Maus auf sie schwebt wird.
~~Wenn Sie abgerundete Ecken auf das Bild hinzufügen möchten. Wenn Sie img, das Bild Lecks aus den abgerundeten Ecken.~~

Verwenden Sie CSS Hintergrund-Bild in einem Fall von mehreren Fellen oder Versionen des Designs. Javascript dynamisch verwendet werden, um eine Klasse eines Elements zu ändern, die sie zwingen wird, ein anderes Bild zu machen. Mit einem IMG-Tag, kann es schwierig sein.

Hier ist eine technische Überlegung: das Bild wird dynamisch generiert werden? Es neigt dazu, viel einfacher zu sein, den <img>-Tag in HTML zu erzeugen, als dynamisch, um zu versuchen, um eine CSS-Eigenschaft zu bearbeiten.

Was ist mit der Größe des Bildes? Wenn ich das img-Tag verwenden, skaliert der Browser das Bild. Wenn ich CSS-Hintergrund verwenden, schneidet der Browser nur ein Stück aus dem größeren Bild.

In Bezug auf Animieren Bilder CSS TranslateX mit / Y (Der richtige Weg, html zu animieren) - Wenn Sie eine Chrome-Timeline Aufnahme von CSS Hintergrund-Bildern tun animiert werden vs IMG-Tags animiert werden Sie die Farbe Zeiten drastisch kürzer sehen für die CSS Hintergrund-Bilder.

Es gibt einen anderen Grund! Wenn Sie einen Responsive Design und wollen Verwendung von niedrig, mittel spalten und hochauflösende Bilder für Geräte durch Medienanfragen, sollten Sie Hintergründe als auch verwendet werden.

Auch habe ich eine Galerie Abschnitt, uneinheitliches Bild hat Größen so, obwohl diese Bilder offenbar als Inhalt, verwende ich Hintergrundbilder und zentrieren sie mit einer festgelegten Größe in divs. Dies ist ähnlich zu dem, was Facebook tut in ihren Alben ..

img ist ein HTML-Tag für einen Grund, deshalb sollte sie verwendet werden. Zur Referenzierung oder Dinge zu veranschaulichen, die Menschen z. In Artikeln

Auch wenn das Bild hat eine Bedeutung oder hat anklickbare ein img sein, ist besser als ein CSS Hintergrund . Für alle andere Situation, glaube ich, ein CSS Hintergrund verwendet werden.

Obwohl es ein Thema, das diskutiert werden muss, immer und immer wieder.

Web: Student aus Paris, Frankreich

Nur ein kleiner hinzuzufügen, sollten Sie den img-Tag verwenden, wenn Benutzer in der Lage sein zu ‚Rechtsklick‘ und ‚save-Bildes‘ / ‚save-Bild‘, also, wenn Sie beabsichtigen, das Bild zu schaffen, wie eine Ressource für andere.

Hintergrundbild verwenden wird (soweit ich das auf den meisten Browsern bewusst bin), um die Option zu deaktivieren, um direkt das Bild zu speichern.

Ein kleiner Eingang, Ich habe Probleme gehabt mit ansprechenden Bildern die Wiedergabe für bis zu einer Minute auf iphone zu verlangsamen, auch bei kleinen Bildern:

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

Wenn aber auf die Verwendung von Hintergrundbildern das Problem wegging Schalten, das ist nur lebensfähig, wenn neuere Browser-Targeting.

IMG Last zuerst, weil der src in der HTML-Datei selbst, während im Fall von background-image die Quelle in Sheet so die Bild Lasten erwähnt wird, nachdem der Sheet geladen, um das Laden der Web-Seite verzögert wird.

HTML ist für den Inhalt und CSS ist für das Design. Ist das Bild notwendig und muss es von Screenreadern abgeholt werden? Wenn die Antwort ja ist, dann setzen Sie das Bild in der HTML. Wenn es rein für Styling ist, dann können Sie die Eigenschaft background-image in CSS verwenden, um das Bild zu injizieren. Genau wie viele Leute hier haben bereits erwähnt, können Sie dann ein Pseudoelement auf das Bild verwenden, wenn Sie möchten.

Beachten Sie auch, dass die meisten Suchmaschinen nicht Index CSS Hintergrunds Bilder daher werden die Hintergrundbilder ignoriert und Sie werden in der Lage zu jedem Verkehr von Suchmaschinen (SEO keinen Nutzen kurz) nicht.

Wo, wie alle Bilder mit Tags definiert werden indiziert (es sei denn, manuell ausgeschlossen) und in Verkehr von Suchmaschinen bringen können, wenn ihre Titel / Alt Attribute und Dateinamen richtig optimiert werden (w.r.t einige Keyword).

Sie können die IMG-Tags verwenden, wenn Sie die Bilder wollen Flüssigkeit und Maßstab zu unterschiedlichen Bildschirmgrößen sein. Für mich sind diese Bilder meist ein Teil des Inhalts. Für die meisten Elemente, die nicht Teil des Inhalts sind, verwende ich CSS-Sprites die Downloadgröße minimal zu halten, wenn ich wirklich etc Symbole animieren möchten.

Ich verwende Bild anstelle des Hintergrund-Bildes, wenn ich sie zu 100% dehnbar machen wollen, die in den meisten Browsern unterstützt.

Wenn Sie ein Bild hinzufügen nur für den speziellen Inhalt auf der Seite oder nur für eine Seite die Sie sollten IMG verwenden Tag und wenn Sie Bild setzen wollen auf mehr als einer Seite, dann sollten Sie CSS Hintergrundbild verwenden.

Ein weiterer Hintergrund-Bild PRO: Hintergrund-Bilder für <ul> / <ol> Listen

Hintergrundbilder verwenden, wenn sie Teil des Gesamt-Designs und sind auf mehreren Seiten wiederholt. Vorzugsweise im Hintergrund Sprit Form für die Optimierung.

Verwenden Sie Tags für alle Bilder, die nicht Teil des Gesamtkonzepts sind und werden höchstwahrscheinlich einmal, wie bestimmte Bilder für Artikel, Menschen gestellt und wichtige Bilder, die hinzugefügt werden verdienen Google Bilder.

** Das einzige wiederholte Bild, das ich in einem <img>-Tag umschließen ist das Website / Firmenlogo. Weil die Menschen neigen dazu, es zu klicken, um zur Homepage zu gehen, so wickeln Sie es mit einem <a>-Tag.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow