Hallo Community,

Ich habe ein Problem, und zwar habe ich in HTML ein Bild per <img> eingebunden. Nun soll sich das Bild bei einer gewissen Width Grösse durch ein kleineres ersetzen wegen den Performance gründen.
Ich weiss nicht wie ich das Bild mit den media querys wechseln kann wenn ich es im HTML drin habe?

Kann mir jemand ein Beispiel zeigen oder muss ich das immer im CSS mit Background regeln?

Danke.

Schau mal hier: Thema "Traffic reduzieren"

selfhtml.de - Thread anzeigen

Ich hoffe, die dort geposteten Beispieldateien sind noch vorhanden.

Wenn es nicht das war, was du suchtest, verlinke bitte deine Testdatei. (keine Code-Brocken hier posten)

Ergänzung:

Ich lese gerade

Das könnte man mit der CSS3-Eigenschaft 'background-size' in den Griff bekommen.
Allerdings verstehen ältere Browser das noch nicht.

Can I use... Support tables for HTML5, CSS3, etc

Gerade eben im Feedreader gefunden
Responsive Images, Part 1: Using srcset - SitePoint

Das Attribut srcset befindet sich noch im Entwicklungsstadium, bis jetzt hat nur webkit die Implementierung vorgenommen.
Von einer Nutzung ist daher erst mal abzuraten.

Wenn du PHP kannst, kannst du den UA auf das Wort mobile abfragen und dann das Bild auswählen, das ausgeliefert werden soll.

Wenn du kein PHP kannst, lass es. Verwende ein kleineres Bild im HTML und biete per Link den Verweis auf ein Bild mit höherer Auflösung an.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.