Bandbreiten-Media-Queries

Sie existieren nicht. Aber wäre das nicht schön?

Nehmen wir zum Beispiel die Markup-Struktur die diskutiert wird für dasElement

<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

  <!-- Default -->
  <source src="small.jpg">

  <!-- Alternative if media query matches -->
  <source src="medium.jpg" media="(min-width: 400px)"> -->

  <!-- Alternative if media query matches -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback -->
  <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

</picture>

Ich unterstütze diese Idee zu 100 %. Lasst uns Bilder servieren, die wir unter den von uns festgelegten Bedingungen wollen. Aber ist die Bildschirmbreite hier die richtige Metrik? Vielleicht ist sie das, warum sollte ein Bildschirm mit 400 Pixel Breite jemals ein Bild benötigen, das größer als 400 Pixel breit ist? Nun, ich denke, die Retina-Displays auf bestimmten neuen Geräten beantworten diese Frage für uns. Diese Geräte reagieren vielleicht auf bestimmte Breiten-Media-Queries, haben aber tatsächlich doppelt so viele verfügbare Pixel und können viel schärfere Bilder anzeigen. Ja, wir haben dafür auch device-pixel-ratio Media-Queries, aber ich denke immer noch, wir tanzen um das eigentliche Problem.

Das Problem ist: Bandbreite. Wenn ich mich an einem Ort / auf einem Gerät befinde, das eine super langsame Internetverbindung hat, würde ich mir wünschen, eine sehr leichte Webseite serviert zu bekommen, damit das Surfen trotzdem akzeptabel schnell ist. Wenn ich mich an einem Ort / auf einem Gerät befinde, das eine super schnelle Internetverbindung hat, dann legt bitte los und liefert mir mehr.

So etwas wie

/* Fair warning: these aren't "real" */

@media (min-bandwidth: 25Mbps) {
  /* High bandwidth, bring it on! */
}

@media (max-bandwidth: 10Mbps) {
  /* This is only for the viewers with currently slow internet connection speed */
}

Das bedeutet nicht, die Bildschirmgröße zu ignorieren. Das ist offensichtlich relevant, wenn es um das Layout geht. Diese Erweiterung von Media-Queries würde uns ein passenderes Werkzeug für Medien in einer Welt geben, in der die Größe deines Geräts zunehmend unabhängig von seiner Bandbreite ist.

Ich frage mich also: Ist das möglich?