Frage Wann man IMG vs. CSS background-image benutzt?


In welchen Situationen ist es besser, einen HTML-Code zu verwenden? IMG um ein Bild anzuzeigen, im Gegensatz zu einem CSS background-image, und umgekehrt?

Zu den Faktoren gehören Barrierefreiheit, Browserunterstützung, dynamischer Inhalt oder jegliche Art von technischen Beschränkungen oder Usability-Prinzipien.


780
2017-09-23 23:58


Ursprung


Antworten:


Richtige Verwendung von IMG

  1. Benutzen IMG wenn du es haben willst Menschen Drucke deine Seite und Sie möchten, dass das Bild standardmäßig eingefügt wird. -JayTee
  2. Benutzen IMG (mit alt Text), wenn das Bild eine wichtige semantische Bedeutung hat, wie z ein Warnsymbol. Dies stellt sicher, dass die Bedeutung des Bildes in allen Benutzeragenten, einschließlich Screenreadern, kommuniziert werden kann.

Pragmatische Verwendung von IMG

  1. Benutzen IMG Plus alt Attribut, wenn das Bild ist Teil des Inhalts wie ein Logo oder ein Diagramm oder eine Person (reale Person, nicht Stockfoto Leute). -Sanchophat
  2. Benutzen IMG wenn Sie sich auf die Browser-Skalierung verlassen, um ein Bild proportional zur Textgröße zu rendern.
  3. Benutzen IMG  zum mehrere Overlay-Bilder in IE6.
  4. Benutzen IMG mit einem z-index in Ordnung zu strecke ein Hintergrundbild um sein gesamtes Fenster zu füllen.
    Beachten Sie, dass dies mit CSS3-Hintergrundgröße nicht mehr zutrifft; Siehe # 6 unten.
  5. Verwenden img Anstatt von background-image kann die Leistung von Animationen vor einem Hintergrund dramatisch verbessern.

Wann man CSS background-image benutzt

  1. Verwenden Sie CSS-Hintergrundbilder, wenn die Bild ist nicht Teil des Inhalts. -Sanchophat
  2. Verwenden Sie CSS-Hintergrundbilder, wenn tun Bild-Ersatz von Text z.B. Absätze / Kopfzeilen. -Sanchophat
  3. Benutzen background-image wenn du es haben willst Menschen Drucke deine Seite und Sie möchten nicht, dass das Bild standardmäßig eingefügt wird. -JayTee
  4. Benutzen background-image wenn Sie die Download-Zeiten verbessern müssen, wie mit CSS-Sprites.
  5. Benutzen background-image wenn Sie nur für einen Teil des Bildes sichtbar sein wollen, wie bei CSS-Sprites.
  6. Benutzen background-image mit background-size:cover um ein Hintergrundbild zu strecken, um sein gesamtes Fenster auszufüllen.

671
2018-01-29 18:31



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

Die andere Zeit, CSS-Hintergrundbilder zu verwenden, ist, wenn man Bildersatz von Text zB macht. Absätze / Kopfzeilen.


271
2018-01-29 18:32



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

Sie können nativ einen Übergang durchführen divHintergrundbild:

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

Dies speichert jede Art von JavaScript oder jQuery-Animation zum Überblenden <img/>ist es src.

Weitere Informationen zu Übergängen finden Sie unter MDN.


96
2018-04-10 06:18



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

Wann zu verwenden <img /> 

  1. Wann dein Bild sein muss indexiert von der Suchmaschine
  2. Wenn es einen Bezug zum Inhalt hat, nicht zu entwerfen.
  3. Wenn Ihr Bild nicht zu klein ist (keine ikonischen Bilder).
  4. Bilder, denen Sie hinzufügen können alt und title Attribut.
  5. Bilder von einer Webseite, die Sie mit Druckmedien CSS drucken möchten

Wann verwende ich CSS? background-image

  1. Bilder, die nur zum Gestalten verwendet werden.
  2. Keine Beziehung mit Inhalt.
  3. Kleine Bilder, die wir mit CSS3 spielen können.
  4. Bilder wiederholen (Im Blog-Autorensymbol wird das Datumssymbol für jeden Artikel usw. wiederholt).

Da ich sie aus diesen Gründen verwenden werde. Dies sind gute Praktiken der Suchmaschinenoptimierung von Bildern.


55
2018-04-20 17:01



Browser sind nicht immer so eingestellt, dass sie Hintergrundbilder standardmäßig drucken. wenn du vorhast, dass Leute deine Seite ausdrucken :)


48
2018-05-22 18:03



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, denn dann haben Sie die Flexibilität, später das Bild 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. Alles, was Sie tun müssen, ist das CSS zu aktualisieren:

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

Andernfalls müssten Sie das Update durchführen 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 möchten, dass der Benutzer das Bild speichern kann (obwohl ich dies nie getan habe).


44
2018-02-13 18:29



Etwa gleich wie Sanchophefats Antwort, aber von einem anderen Aspekt. Ich frage mich immer: Wenn ich die Stylesheets komplett von der Website entfernen würde, mache ich die restlichen Elemente nur gehören zum Inhalt? Wenn ja, habe ich meine Arbeit gut gemacht.


39
2018-02-02 22:30



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

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

Ist das ein Teil des Inhalts oder Teil des Designs?


37
2018-05-22 18:00



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

  • Ein img Tag ist gut, wenn Sie müssen Größe ändern das Bild. Z.B. Wenn das Originalbild 100px mal 100 px ist und Sie möchten, dass es 80px mal 80px ist, können Sie die CSS-Breite und Höhe des img-Tags festlegen. Ich kenne keinen guten Weg, dies mit Hintergrundbildern zu tun. EDIT: Dies kann jetzt auch mit einem Hintergrundbild gemacht werden, mit dem background-size CSS3-Attribut

  • Verwenden Hintergrundbild ist gut, wenn Sie dynamisch sein müssen Wechsel zwischen Sprites. Z.B. wenn Sie auf eine Schaltfläche Bild haben, und Sie mögen ein separates Bild angezeigt, wenn die Cursor über das Element schweben, können Sie ein Hintergrundbild verwenden, die sowohl das normale und Hover-Sprites und dynamisch die Hintergrund-Position ändern.


24



Vordergrund = img.

Hintergrund = CSS-Hintergrund.


15



Verwenden Sie Hintergrundbilder nur bei Bedarf, z. Container mit Bild, das kachelt.

Einer der wichtigsten PROS mit BILDER ist, dass es ist besser für SEO.


13