Wie entscheiden Sie, ob ein Bild ein Hintergrundbild in HTML sein soll?

Vom Standpunkt des Front-End-Engineerings aus sind Hintergrundbilder über CSS im Allgemeinen flexibler und die Grundlage einiger Inline-Ersetzungstechniken und -tricks. Das kanonische Beispiel:

  

Meine Widget-Factory

h1 {background: url ('widgetTitle.png') no-repeat oben links; Breite: 300px; Höhe: 50px; Bildschirmsperre; } h1 span {display: none; }

Ermöglicht es Ihnen, eine Textbeschreibung im

-Tag beizubehalten, während Sie dem Tag ein Bild zuweisen. Andere Verwendungen, die mir auf den ersten Blick einfallen:

  • CSS-Medienabfragen, um Assets unterschiedlicher Größe zu verwenden.
  • Bildsprit.
  • Zentrierte Bilder (horizontal und vertikal).
  • Überlagerte Hintergründe.

Der letzte ist CSS3-spezifisch und es ist bezeichnend, dass HTML5 mehr Vorkehrungen für Hintergrundeigenschaften enthält als für das -Tag (das meines Wissens keine Verbesserungen erfahren hat).

Warum würden Sie dann verwenden? Abgesehen von der Semantik ist die einzige andere Verwendung, die ich kenne, die, dass der Benutzer das Bild von seinem Browser auf den Desktop ziehen und dort speichern kann, z. B. für Medienpakete und Hintergrundbilder.

persönlich würde ich überlegen, ob das bild inhaltlich oder nur stilistisch ist. Beispielsweise wäre ein Foto in einer Nachrichtenmeldung zufrieden und sollte daher inline sein. Weniger offensichtlich, könnte ich ein Firmenlogo als Inhalt betrachten.

CSS-Bilder sind für Screenreader im Allgemeinen unsichtbar, sodass img-Tags für Menschen mit Sehbehinderungen zugänglicher sind, dh für mehr Menschen, als Sie vielleicht denken. Was für Screenreader gut ist, ist normalerweise auch für SEO gut.