In welchen Situationen ist es besser, ein HTML- IMG
Tag zum Anzeigen eines Bildes zu verwenden, als ein CSS background-image
und umgekehrt?
Zu den Faktoren können Zugänglichkeit, Browserunterstützung, dynamischer Inhalt oder technische Einschränkungen oder Usability-Prinzipien gehören.
html
css
image
background-image
System PAUSE
quelle
quelle
Antworten:
Richtige Verwendung von IMG
IMG
Sie diese Option, wenn Personen Ihre Seite drucken sollen und das Bild standardmäßig enthalten sein soll. - JayTeeIMG
(mitalt
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
IMG
Plus-Alt-Attribut, wenn das Bild Teil des Inhalts ist, z. B. ein Logo, ein Diagramm oder eine Person (reale Person, keine Personen mit Bildmaterial ). - SanchothefatIMG
Sie diese Option, wenn Sie sich auf die Browser-Skalierung verlassen, um ein Bild proportional zur Textgröße zu rendern.IMG
für mehrere Overlay-Bilder in IE6 .VerwendenIMG
mit einemz-index
um 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.
img
anstelle vonbackground-image
kann die Leistung von Animationen im Hintergrund erheblich verbessern.Wann wird das CSS-Hintergrundbild verwendet?
background-image
Sie diese Option, wenn Personen Ihre Seite drucken sollen und das Bild nicht standardmäßig enthalten sein soll. - JayTeebackground-image
Sie diese Option, wenn Sie die Downloadzeiten wie bei CSS-Sprites verbessern müssen .background-image
Sie diese Option, wenn nur ein Teil des Bildes sichtbar sein soll, wie bei CSS-Sprites.background-image
mit ,background-size:cover
um ein Hintergrundbild zu strecken seine gesamten Fenster zu füllen.quelle
<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.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.
quelle
Ich bin überrascht, dass dies noch niemand erwähnt hat: CSS-Übergänge .
Sie können das
div
Hintergrundbild von a nativ ändern :Das spart jede Art von JavaScript oder jQuery Animation ein verblasst
<img/>
‚ssrc
.Weitere Informationen zu Übergängen in MDN .
quelle
#some_div { transition: opacity 0.5s; }
,#some_div:hover #top_img { opacity: 0; }
Die obigen Antworten berücksichtigen nur den Designaspekt. Ich liste es in SEO-Aspekten auf.
Wann zu verwenden
<img />
alt
undtitle
zuordnen können.Wann wird CSS verwendet?
background-image
Da ich sie aus diesen Gründen verwenden werde. Dies sind bewährte Methoden zur Suchmaschinenoptimierung von Bildern.
quelle
Browser sind nicht immer so eingestellt, dass sie standardmäßig Hintergrundbilder drucken. wenn Sie beabsichtigen, dass Leute Ihre Seite drucken :)
quelle
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:
... und CSS:
Einige Tage später ändern Sie den Speicherort des Bildes. Sie müssen lediglich das CSS aktualisieren:
Andernfalls müssten Sie das
src
Attribut 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).
quelle
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.
quelle
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.
quelle
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 desbackground-size
CSS3-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.
quelle
background-size: 80px 80px;
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.
quelle
Vordergrund = img.
Hintergrund = CSS-Hintergrund.
quelle
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 .
quelle
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.
quelle
Einige andere Szenarien, in denen
background-image
verwendet werden sollte:Wenn Sie dem Bild abgerundete Ecken hinzufügen möchten. Wenn Sie verwendenimg
, tritt das Bild aus den abgerundeten Ecken aus.quelle
img { border-radius: 10px; }
border-radius
nicht funktioniert hat.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.
quelle
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.quelle
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
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.
quelle
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.
quelle
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.
quelle
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
quelle
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.
quelle
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:
Bei der Umstellung auf Hintergrundbilder ist das Problem jedoch behoben. Dies ist nur möglich, wenn Sie auf neuere Browser abzielen.
quelle
IMG
Laden Sie zuerst, da sich dassrc
in der HTML-Datei selbst befindet, während im Fallbackground-image
der Quelle im Stylesheet erwähnt wird, sodass das Bild nach dem Laden des Stylesheets geladen wird, was das Laden der Webseite verzögert.quelle
background-image
nach 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.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.
quelle
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).
quelle
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.
quelle
Ich verwende Bild anstelle von Hintergrundbild, wenn ich sie 100% dehnbar machen möchte, was in den meisten Browsern unterstützt wird.
quelle
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.
quelle
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.quelle