Wann soll IMG vs. CSS Hintergrundbild verwendet werden?

777

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.

System PAUSE
quelle
Benötigen Sie das Bild, um Platz zu beanspruchen, oder möchten Sie darüber schreiben?
Geowa4
9
Als Update ist, da dies bei Google einen ziemlich hohen Stellenwert hat, die Browserskalierung und Bilddehnung für Hintergrundbilder jetzt möglich und wird weitgehend unterstützt (IE8 und darunter sind natürlich die Ausnahme), sodass die Punkte 4 und 7 in bestimmten Fällen nicht mehr angezeigt werden Dies kann einen Fallback ermöglichen oder einen solchen Effekt für IE8 und darunter ignorieren. caniuse.com/#search=background-image
Shauna
toller und nützlicher Beitrag, ich füge eine Frage zum Vergleich hinzu, der Vorteil des CSS sind auch die Hover-Effekte? Kann dies mit img-Tags repliziert werden?
Ericosg
Im Allgemeinen füge ich allen Inhaltsbildern sowohl das alt-Attribut als auch das title-Attribut hinzu. Ist das nicht vorzuziehen?
HartleySan
2
Auch img kann Karte mit anklickbaren Bereichen und Hinweisen haben
Vitim.us

Antworten:

797

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.
System PAUSE
quelle
3
Ich bin immer noch zweifelhaft auf den Hintergrundbildern für Textersatzteil. Ich sehe Leute, die Hintergrundbilder verwenden und dann einen Texteinzug verwenden: -9999px für den Text. Ich weiß jedoch, dass solche Texteinzüge für SEO früher schlecht waren, und ich würde mir vorstellen, dass dies für einige Suchmaschinen immer noch der Fall sein muss. Aber am wichtigsten ist, wenn Sie Bilder ausschalten, aber CSS auf dem Bild lassen, verschwindet, aber der Text immer noch nicht auf dem Bildschirm angezeigt wird. Für mich ist der Alternativtext auf einem Bild für den Fall gedacht, dass Bilder nicht angezeigt werden, sodass IMG-Tags besser sind.
Scott Reed
53
Pragmatische Verwendung des Hintergrundbildes : Wenn Sie wegen vertikaler Zentrierungsprobleme (von Bildern unterschiedlicher vertikaler Größe) keine Haare verlieren möchten;)
Frank Nocke
12
Ja, vertikale Zentrierungsprobleme - bringen Sie Flexbox auf!
Dean_Wilson
3
@BinaryFunt - Auf <div class="my-css-page-styles" style="background-image:url(blah.png);"></div>diese Weise können Sie es in Ihrem CSS-Stylesheet formatieren. Wenn das Hintergrundbild jedoch eher eine Frage des Inhalts als des Stils ist, bearbeiten Sie es immer noch von der HTML-Seite.
Jimbo Jonny
2
In Punkt 5 der pragmatischen Verwendung von IMG scheint es einen Clickbait zu geben, der auf einen japanischen Blog-Beitrag über Kosmetik verweist. Der Link ist www.ajaxline.com/browsers-performance-in-dependence-of-html-coding [KLICKEN SIE NICHT AUF DIESES]
wick3d
292

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.

Roborourke
quelle
Hervorragender Fall! CON - Verwenden Sie das Hintergrundbild, wenn Sie Text ersetzen.
System PAUSE
2
Dies ist ein fairer Punkt, aber für das Ersetzen von Text durch Bilder (z. B. für eine Überschrift) müssten Sie sicherlich ein "Alt" hinzufügen, damit Bildschirmleser es lesen können. Oder falls Bilder nicht angezeigt werden, erhalten Sie trotzdem die Überschrift? Ja, eine Überschrift und dann gestylt wäre besser, aber möchten Sie doch den Text?
Theo Scholiadis
4
@TheoScholiadis mit Bildersetzung bedeutet nicht, ein Bild anstelle von Text zu verwenden, sondern den Text auf irgendeine Weise mit CSS auszublenden und das Bild mit CSS als Hintergrund bereitzustellen. Das Dokument bleibt semantisch unberührt.
Roborourke
57
Persönlich hasse ich es, wenn ich "Text" nicht kopieren kann, weil es eigentlich ein Bild ist. Nennen Sie mich faul, aber hey ...
Shaz
1
Wenn Sie ein Bild für SEO-Zwecke benötigen, verwenden Sie das img-Tag mit dem alt-Attribut. Verwenden Sie andernfalls das Bild im Hintergrund mit CSS.
Super Model
107

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 .

Robbie JW
quelle
3
Das ist kein guter Grund. Sie könnten ein Div mit 2 überlagerten Bildern und dem folgenden CSS haben : #some_div { transition: opacity 0.5s; }, #some_div:hover #top_img { opacity: 0; }
warkentien2
5
Wenn Sie diesen verknüpften MDN-Artikel (oder die w3c-Spezifikationen) lesen, werden Sie feststellen, dass das Hintergrundbild KEINE der animierbaren Eigenschaften ist und jeder Browser, der dies tut (Chrome), nicht den Webstandards folgt. Das heißt, ich denke, es sollte sein, und es ist ein schöner einfacher Effekt, also bin ich enttäuscht, dass es nicht Teil des Standards ist.
Robert McKee
73

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.

Subhash
quelle
54

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

JayTee
quelle
9
Klingt wie folgt: PRO - Verwenden Sie IMG, wenn das Bild standardmäßig gedruckt werden soll. CON - Verwenden Sie das Hintergrundbild, wenn das Bild nicht standardmäßig gedruckt werden soll. Schön!
System PAUSE
7
Ich denke, die Idee ist, separate Nur-Druck-CSS-Stile zu haben, die die Bilder verbergen oder in etwas passenderes ändern.
Blazemonger
52

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).

Steve Harrison
quelle
14
Hintergrundbilder können sicherlich mit einem minimalen Höhlenforschungsquellen-Spelunking gespeichert werden, nur nicht so einfach wie das Klicken mit der rechten Maustaste auf ein Bild.
Michael Hackner
2
Feuerfuchs. Rechtsklick. "Hintergrundbild anzeigen". Nicht so schwer.
TRiG
1
@TRiG Es sei denn, es gibt eine transparente Überlagerung oder eine seitenspezifische Änderung des Kontextmenüs, um dies zu verhindern. Ich habe das schon einmal gesehen, und meiner Meinung nach ist es ziemlich albern, weil Sie nicht einmal in der Quelle Höhlenforschung betreiben müssen. Wenn die Seite vollständig geladen ist, können Sie zumindest in Firefox auf Extras> Seiteninfo / alt + t klicken. Klicken Sie mit der rechten Maustaste und wählen Sie Seiteninformationen anzeigen, navigieren Sie zum Abschnitt Medien und speichern Sie alle gewünschten Elemente aus der Liste. Natürlich gibt es Möglichkeiten, dies zu verhindern, z. B. das Einbetten des Bildes in eine Flash-Datei oder andere seltsame Tricks, aber auch diese können umgangen oder berücksichtigt werden.
JAB
Ich denke, die Hintergrundtechnik ist nicht ganz gut, um einem Benutzer das Speichern des Bildes zu verweigern ...
ncubica
45

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.

viam0Zah
quelle
42

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.

Dyin
quelle
Ich mag diese Antwort. Es ist sehr klar. Die verbleibenden Probleme wie druckerfreundlich oder SEO sollten in jedem Szenario individuell betrachtet werden.
Juan Herrera
28

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.

Anders Rabo Thorbeck
quelle
2
Dies ist eine wirklich gute Antwort, insbesondere der Größenänderungspunkt. Die Leute werden argumentieren, dass Sie Hintergrundgröße verwenden können, aber wenn Sie versuchen, alte Browser zu unterstützen, ist dies nicht unbedingt der beste Weg.
Dudewad
1
So wird es in CSS gemachtbackground-size: 80px 80px;
Kareem
2
Vielen Dank, dass Sie @Kareem. Ich sehe, dass dies mit CSS3 eingeführt wurde, das noch nicht existierte, als ich ursprünglich antwortete. Ich habe meine Antwort bearbeitet, um dies widerzuspiegeln.
Anders Rabo Thorbeck
Ich halte es für wichtig zu beachten, dass das Ändern der Größe von Fotos in Bezug auf Pixelisierung oder Interpolation schwierig sein kann. Wenn möglich, würde ich die Größe nicht um mehr als 40% ändern (und das ist eine Dehnung - 20% sind Standard), ohne Ihr Bild in eine Foto-Imaging-Software zu bringen, um die Größe ohne Qualitätsverlust zu ändern. Die DPI-Qualität kann hier wichtig sein, wenn nicht genügend Informationen vorhanden sind, um die zugewiesene Pixelmenge zu strecken und zu füllen.
Dale Landry
18

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.

Pavel Vladov
quelle
Hintergrundbilder ALT-Werte können in der Sitemap definiert werden. google.com/schemas/sitemap-image/1.1
Kareem
17

Vordergrund = img.

Hintergrund = CSS-Hintergrund.

cjk
quelle
5
Sicher, aber was ist mit der kleinen Abwärtspfeilanzeige neben der Schaltfläche "Menü" oder anderen solchen Elementen? Wie klassifizieren Sie diesen Vordergrund oder Hintergrund?
Dudewad
@dudewad Ich würde Vordergrund sagen, weil sie (visuell) in der "obersten" Ebene der Seite sind und anderen Elementen überlagert sind.
jkdev
14

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 .

Marc Uberstein
quelle
3
Wahrscheinlich, weil Sie das alt-Attribut verwenden können.
David
4
Kommt es nicht darauf an, ob Sie SEO für dieses bestimmte Bild WOLLEN? Ich verstehe nicht, warum Sie sich für SEO für ein Bild entscheiden, das Teil des Stils der Seite ist, nicht für den Inhalt (z. B. ein E-Mail-Symbol auf Ihrer Kontaktseite). Eigentlich würde ich Ihre Aussage lieber umdrehen. Verwenden Sie BILDER nur bei Bedarf (dh inhaltsbezogen, druckbezogen und / oder SEO-bezogen).
Volzy
12

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.

Mat
quelle
11

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.
Behrang
quelle
Sie können tatsächlich tun:img { border-radius: 10px; }
Rafff
@ RafcioKowalsky du bist richtig. Ich kann mich nicht an die genauen Bedingungen erinnern, unter denen border-radiusnicht funktioniert hat.
Behrang Saeedzadeh
10

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.

MK_Dev
quelle
Sie können das src-Attribut eines Bild-Tags auch dynamisch ändern, genauso einfach wie das Ändern einer Klasse
roborourke
3
@sanchothefat, wahr, in diesem Fall müsste die Bildquelle jedoch in JS anstelle von CSS aufbewahrt werden. IMO-CSS-Datei wäre besser geeignet, um den Dateinamen beizubehalten.
MK_Dev
7

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.

Bryan M.
quelle
1
Und was ist mit Inline-Stilen? Diese Frage darf von dieser Idee wirklich nicht entschieden werden.
viam0Zah
Vielleicht sollte ich so formulieren: Möchten Sie lieber mit einem DOM-Element oder einem Elementattribut arbeiten?
Bryan M.
Wahrscheinlich lohnt es sich, Bacl in '09 in Betracht zu ziehen, aber mit jQuery ist dies kaum ein Problem. Es ist noch einfacher und flüssiger, CSS oder Klassen für ein Element zu wechseln, als Elemente zu wechseln.
dfherr
7

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.


quelle
7

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.

eivers88
quelle
7

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.

Maarten
quelle
1
maarten, terscheling ist nicht pipeable Ich habe von Vincent Willems gehört. Also, wie denkst du kann es auf PyMol funktionieren
Mehdi Nellen
1
Bitte beziehen Sie sich auf die Dokumentation, wie leitfähig es ist pieterpeitshoeve.nl/rondleiding
Maarten
@ Maarteen, ich denke jetzt kann das mit HTML 5 Bild- und Quell-Tags gemacht werden
Tick20
6

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.

Chris
quelle
6

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

589956
quelle
5

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.

Dougajmcdonald
quelle
5

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.

Winter
quelle
Haben Sie Unterstützung oder Erklärung für dieses Verhalten?
Todd
Entschuldigung, ich habe keine Ahnung, warum es die Seite zu einem Crawl verlangsamen würde. Vielleicht hat der Re-Flow im Browser auf dem iPhone sehr wenig Ressourcen.
Winter
4

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.

Sagi_Avinash_Varma
quelle
Außerdem scheinen einige Browser (z. B. Firefox 35) CSS background-imagenach einiger Zeit zu aktualisieren : Wenn Sie mehrere Registerkarten geöffnet haben, ist der CSS-Hintergrund nach einiger Zeit leer, wenn Sie nach einiger Zeit zu Ihrer Registerkarte zurückkehren.
Skippy le Grand Gourou
3

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.

Carltonstith
quelle
3

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).

Nadeem Khan
quelle
2

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.

Shingokko
quelle
2

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

max
quelle
2

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.

Vishal Gupta
quelle
2

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.

Gilly
quelle