it-swarm.com.de

Wann sollte man IMG vs. CSS Hintergrundbild verwenden?

In welchen Situationen ist es sinnvoller, ein HTML IMG -Tag zu verwenden, um ein Bild anzuzeigen, als ein CSS background-image und umgekehrt?

Zu den Faktoren können Barrierefreiheit, Browserunterstützung, dynamischer Inhalt oder jede Art von technischen Einschränkungen oder Usability-Prinzipien gehören.

779
system PAUSE

Bestimmungsgemäße Verwendung von IMG

  1. Verwenden Sie IMG, wenn Sie Personen haben möchten drucken Sie Ihre Seite aus und das Bild standardmäßig einbezogen werden soll. -- JayTee
  2. Verwenden Sie IMG (mit alt-Text), 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 Attribut IMG plus alt, wenn das Bild Teil des Inhalts ist, z. B. ein Logo oder ein Diagramm oder eine Person (reale Person, keine auf Lager befindlichen Personen). -- sanchothefat
  2. Verwenden Sie IMG, wenn Sie sich auf die Browserskalierung verlassen, um ein Bild proportional zur Textgröße zu rendern.
  3. Verwenden Sie IMG für mehrere Overlay-Bilder in IE6 .
  4. Verwenden Sie IMG mit einem z-index, um ein Hintergrundbild zu dehnen das gesamte Fenster auszufüllen.
    Beachten Sie, dass dies mit der CSS3-Hintergrundgröße nicht mehr zutrifft. siehe Nr. 6 unten.
  5. Die Verwendung von img anstelle von background-image kann die Leistung von Animationen im Hintergrund erheblich verbessern.

Wann soll ein CSS-Hintergrundbild verwendet werden?

  1. Verwenden Sie CSS-Hintergrundbilder, wenn das Bild nicht Bestandteil des Inhalts ist. -- sanchothefat
  2. Verwenden Sie dabei CSS-Hintergrundbilder Bildersetzung von Text zB. Absätze/Überschriften. -- sanchothefat
  3. Verwenden Sie background-image, wenn Sie Personen haben möchten drucken Sie Ihre Seite aus und Sie nicht möchten, dass das Bild standardmäßig enthalten ist. -- JayTee
  4. Verwenden Sie background-image, wenn Sie die Downloadzeiten verbessern möchten, wie bei 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 mit background-size:cover, um ein Hintergrundbild so zu dehnen, dass es das gesamte Fenster ausfüllt.
754
system PAUSE

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

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

282
roborourke

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

Sie können das Hintergrundbild von div 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);
}

Dadurch wird jede Art von JavaScript- oder jQuery-Animation gespeichert, um das src eines <img/> auszublenden.

Weitere Informationen zu Übergängen auf MDN .

107
Robbie JW

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

Wann benutzt man <img />

  1. Wenn Ihr Bild von einer Suchmaschine indiziert werden soll
  2. Wenn es inhaltlich nichts mit Design zu tun hat.
  3. Wenn Ihr Bild nicht zu klein ist (keine ikonischen Bilder).
  4. Bilder, in denen Sie die Attribute alt und title hinzufügen können.
  5. Bilder von einer Webseite, die Sie mit Printmedien drucken möchten

Wann benutzt man CSS background-image

  1. Bilder, die nur zum Entwerfen verwendet werden.
  2. Keine Beziehung zum Inhalt.
  3. Kleine Bilder, die wir mit CSS3 spielen können.
  4. Wiederholen von Bildern (Im Blog-Autorensymbol 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.

68
subhash

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

50
JayTee

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 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. 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üssen Sie das src -Attribut des entsprechenden <img> -Tags in jeder HTML-Datei aktualisieren (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 noch nie getan habe).

50
Steve Harrison

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

45
Török Gábor

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

Beantworten Sie diese Frage einfach 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!

Berücksichtigen Sie auch NICHT neben den 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.

41
Dyin

Ich würde noch zwei Argumente hinzufügen:

  • Ein img -Tag ist gut, wenn Sie die Größe des Bildes ändern müssen . Z.B. Wenn das Originalbild 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 keine gute Möglichkeit, dies mit einem Hintergrundbild zu tun. BEARBEITEN: Dies kann jetzt auch mit einem Hintergrundbild durchgeführt werden, indem das background-size CSS3-Attribut verwendet wird.

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

28

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

18
Pavel Vladov

Vordergrund = Bild.

Hintergrund = CSS-Hintergrund.

17
cjk

Verwenden Sie Hintergrundbilder nur bei Bedarf, z. Behälter mit Bild, das Fliesen.

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

14
Marc Uberstein

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

Ein großes Problem bei <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))? Da <img /> keine untergeordneten Elemente haben kann, müssen Sie in diesem Fall die Positionierung verwenden und leere Elemente hinzufügen, was einer unbrauchbaren Markierung entspricht.

Zusammenfassend ist es ziemlich situativ.

12
Mat

Einige andere Szenarien, in denen background-image verwendet 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 img verwenden, tritt das Bild aus den abgerundeten Ecken aus.
11
Behrang

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.

9
MK_Dev

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 über Medienabfragen aufteilen möchten, sollten Sie auch Hintergründe verwenden.

7
Maarten

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

7
anonymous

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

7
Bryan M.

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

7
eivers88

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 ähnelt dem, was Facebook in seinen Alben tut.

6
Chris

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

Auch wenn das Bild eine Bedeutung hat oder anklickbar sein muss, ist ein img besser als ein CSS Hintergrund. Für alle anderen Situationen, denke ich, kann ein CSS-Hintergrund verwendet werden.

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

Web Student aus Paris, Frankreich

6
user589956

Als kleine Eingabe hatte ich Probleme mit reaktionsschnellen Bildern, die das Rendern auf dem iPhone bis zu einer Minute verzögerten, selbst bei kleinen Bildern:

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

Beim Umstieg auf die Verwendung von Hintergrundbildern ist das Problem jedoch behoben. Dies ist nur dann sinnvoll, wenn Sie auf neuere Browser abzielen.

5
winthers

Nur ein kleines, um es hinzuzufügen, sollten Sie das img-Tag verwenden, wenn Sie möchten, dass Benutzer mit der rechten Maustaste klicken und Bild speichern/Bild speichern können. Wenn Sie also beabsichtigen, das Bild als Ressource für bereitzustellen Andere.

Wenn Sie ein Hintergrundbild verwenden (soweit mir in den meisten Browsern bekannt ist), wird die Option deaktiviert, das Bild direkt zu speichern.

5
dougajmcdonald

IMG wird zuerst geladen, da sich src in der HTML-Datei selbst befindet, während im Fall von background-image die Quelle im Stylesheet angegeben wird, sodass das Bild nach dem Laden des Stylesheets geladen wird, wodurch das Laden des verzögert wird Website.

4

HTML ist für den Inhalt und CSS ist für das Design. Ist das Bild notwendig und muss es von Screenreadern aufgenommen werden? Wenn die Antwort ja lautet, fügen Sie das Bild in den HTML-Code ein. Wenn es nur zum Stylen gedacht ist, können Sie die Hintergrundbild-Eigenschaft in CSS verwenden, um das Bild einzufügen. Wie viele Leute hier bereits erwähnt haben, können Sie dann ein Pseudoelement auf dem Bild verwenden, wenn Sie möchten.

3
carltonstith

Beachten Sie auch, dass die meisten Suchmaschinen-Spider 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-/Alternativattribute und Dateinamen ordnungsgemäß optimiert sind (mit einem bestimmten Schlüsselwort).

3
Nadeem Khan

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.

2
Vishal Gupta

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

Verwenden Sie Hintergrundbilder, wenn sie Teil des Gesamtdesigns sind und auf mehreren Seiten wiederholt werden. Vorzugsweise im Hintergrund Sprite-Form zur Optimierung.

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

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

2
Gillian Lo Wong

Ich verwende Bild statt Hintergrundbild, wenn ich sie 100% dehnbar machen will, was in den meisten Browsern unterstützt wird.

2
max

Sie können IMG-Tags verwenden, wenn die Bilder flüssig sein und auf verschiedene 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.

2
shingokko

Nur um einen Schraubenschlüssel in die Arbeit zu werfen - ich bin der Meinung, dass Sie niemals das img-Tag verwenden sollten. HTML war für den Inhalt gedacht, nicht für den visuellen Stil. Alle Bilder auf Ihrer Seite sollten aus dem CSS stammen und Ihren HTML-Code rein lassen. (auch wenn es etwas länger dauert)

0
Big Coops