Soooo...
alles durchgelesen und verstanden. Meine Lösung ist, es nicht zu lösen :D.
Erklärung:
Die sauberste aktuell mögliche Variante wäre meiner Meinung nach eine Mischung zwischen Server und Client. Demnach würde der Server das passende Bild direkt in den src des img setzen. Mittels PHP soll dies auch problemlos möglich sein - hab es aber nicht selbst probiert. Das hätte den Vorteil, dass erstmal das richtige Bild ausgeliefert werden würde. Sollte sich der Viewpoint wärend der Betrachtung ändern braucht man alle möglichen Bilder noch irgendwo als Information im html. Die Scripte die so Angeboten werden benutzen das Attribut "srcset" im bei <img>. Da das nicht valide ist, würde ich die gleiche Logik in data-srcset setzen. Diejenigen die kein Javascript haben, aber trotzdem skalieren wollen hätten verloren.
Die Serverseite kann ich leider nicht in die Lösung einbauen. Mein Framework macht mir da leider einen Strich durch die Rechnung :(. Auf der anderen Seite sind es nicht viele Bilder die es bei mir betrifft, von daher wäre der Aufwand das zu realisieren zu viel.
Deshalb müsste ich mich (wie beim Gespräch mit molily zu lesen) für ein Defaultbild entscheiden. Entweder ich gehe den mobile-first Ansatz. Dann wäre das Defaultbild das möglichst Kleinste. Google würde dann auch das Kleine indizieren -> schlecht. Also müsste das Größe genommen werden. Da es sich um ein Defaultbild handelt bedeutet es, dass im schlimmsten Fall zwei Bilder geladen werden -> erstmal das größte und dann das Bild im richtigen Format. Was hat man erreicht? Eigentlich hat man den Ursprungszustand noch verschlimmert. Anstatt dem User Last zu sparen in dem man ihm ein schlankeres passendes Bild für seinen Viewpoint liefert, zwingt man ihm erstmal das große Bild auf. So gesehen kann man sich den Aufwand gleich sparen.
Einzigste Lösung wäre dann, das src des img per default leer zu lassen und 100% auf javascript zu gehen.
Das wäre aber wiederum ein Todesurteil für Google. Abhilfe hierfür würde wiederum ein Noscript Block schaffen. Ein riesen Vorteil für die Javascript Lösung wäre wiederum die Ladezeit der Seite. Denn die würde das Bild erst nachladen -> preload.
So oder so hoffe ich das bald das picture Element benutzbar wird. Dann lesen wir uns den ganzen sums hier in 5 Jahren mal durch und können unseren Azubis sagen: "damals zu Firefox 30 Zeiten...". Und der Azubi wird sagen: "Boah wie umständlich!". Und jetzt eine Gedenkminute für den IE6 und die 1 Millionen Workarounds :D.
Achja die Lösung mit dem SVG (Clown Car) ist zwar clever, halte ich aber für einen Umweg mit dem man nichts erreicht. Anstatt das Bild gleich per Background ein zu binden, geht man den Umweg über SVG und Background. Da würde ich die Javascript Lösungen bevorzugen.
Gruß
Meinungsverteiler
T-Rex