Bild vorne oder hinten?
<img> vs. background-image
Wenn du beginnst, HTML und CSS zu programmieren, wirst du dich früher oder später fragen, warum es zwei verschiedene Möglichkeiten gibt, Bilder zu einer Website hinzuzufügen.
Beide Varianten haben ihre Vor- und Nachteile.
Bilder im Vordergrund mit HTML
Vorteile <img>-Tag:
- Es ist leichter, sog. "Fluid Images" zu produzieren
- Bilder können leicht in Links verwandelt werden
- Die Bilder werden von Suchmaschinen gefunden, man kann sie somit für die Suchmaschinen-Optimierung (SEO) einsetzen
Nachteile <img>-Tag:
- Die Bilder können einfacher raubkopiert werden
- Das Kachelverhalten fehlt
- Möchte man etwas über dem Bild haben, sind erweiterte CSS-Kenntnisse nötig (
position)
Bilder im Hintergrund mit CSS
Vorteile background-image
- Texte o.ä. kann man ganz einfach über dem Bild anzeigen
- Kachelverhalten
- man kann sog. Parallax-Effekte erzeugen
Nachteile background-image
- Responsives Verhalten setzt vertieftes CSS-Wissen voraus
- Bilder können nicht einfach so in Links verwandelt werden
- Die Pfade zu den Bildern sind schwieriger zu verstehen