Das Problem mit Media Queries

Was brauchen wir für die optimale Bildauswahl?

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:

  • Rendered Size: Wie groß in Pixeln soll das Bild innerhalb des Layouts dargestellt werden?
  • Wie hoch ist die Auflösung des Monitors des Benutzers?
  • Welche verschiedenen Bildgrößen der verschieden großen Bilddateien haben wir zur Auswahl?

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.

Das Problem:

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.