Bei Bildern können wir uns nicht mit der Breite des Viewports zufriedengeben. Wir brauchen effektiv drei Variablen, um Bilder responsive möglichst optimal darstellen zu können:
Wissen wir alle drei Dinge, dann ist es einfach. Wenn wir verschiedenen Bildgrößen zur Auswahl haben, dann nehmen wir doch einfach das kleinste davon, dass immer noch größer ist als die gerenderete Größe multipliziert mit der Bildschirmauflösung.
Wir wissen nicht, wie groß das Bild auf dem Endgerät gerendert werden soll, wenn es sich innerhalb eines flexiblen Layout befindet.
Der Browser kann das ebenfalls noch nicht wissen, denn dies hängt vom CSS ab welches er erst abruft, nachdem er schon angefangen hat, die Bilder zu laden.
=> Allein mit Media Queries müssten wir dem Browser jetzt erzählen:
Ich weiss nicht, wie breit der Viewport des User ist, aber wenn er soundso breit ist, benutzte dieses Bild. Wenn er breiter ist, benutze jenes Bild und bei Retinadisplay auch das große Bilder, aber NICHT, wenn wir in dreispaltigen Layout sind... usw."
Das Resultat wären aufgeblähte Media Queries und komplizierte Berechnungen.