Kleinere Version einer Webseite

[Deus Figendi]

Hallo zusammen,
ersteinmal: "huch" das self-Forum sieht ja ganz anders aus, ich war wohl echt ne Weile nicht mehr hier ^^

Vorneweg: Ich rede hier über ein privates Projekt, das bedeutet u.a. ich muss mich nicht an seltsame Kundenwünsche halten wie "muss im IE 5.5 funktionieren" oder "der Pixel ist mir zu links".

Also ich habe eine kleine Webseite gebaut und die ist erm groß :D Also genauer ist sie rund acht Megabyte groß, wenn man sie erstmals (mit leerem Cache) aufruft. Was daran liegt, dass eine große Bannergrafik und eine große Hintergrundgrafik geladen werden, beide jeweils über 3MB groß (und ja ich hab die schon optimiert ;D)
Ich bin auch allgemein recht zufrieden mit dem Layout, es ist ein bisschen oldscool, aber das ist schon okay, ich find's hübsch und ich komme damit klar, dass es pre-cache einen Moment dauert bis die Seite vollständig da ist, benutzbar ist sie von Anfang an.

Ein bisschen tuts mir aber leid um die Leute da draußen, die mit Volumen-Tarifen leben und die vielleicht nur 2GB oder sogar nur 100MB im Monat zur Verfügung haben. Ich würde also gerne eine Art minimierte Webseite anbieten (wobei RSS schon da ist...), bei der diese beiden Grafiken durch deutlich kleinere ersetzt werden.
Für das Hintergrundbild, ist das noch sehr machbar einfach Medien-Gebundenes Stylesheet und wer mit dem Telefon kommt bekommt eine bedeutend kleinere Grafik ausgeliefert. Nicht erschlagen habe ich damit natürlich die Leute mit LTE-Routern oder Mobilfunk-Sticks an ihren Notebooks. Denn die lesen ja korrekterweise immernoch das screen-Sheet und nicht das handheld-Sheet.

Darüber hinaus das Banner... das ist einfach ein img-Element, ich erkläre gleich warum… und folglich ist das im HTML-Code und nicht im CSS und daher kann ich sie nicht einfach mit media-queries ersetzen... (hmm oder kann ich doch? Wenn ich 2 Grafiken setze und einmal dieses und einmal jenes display:none; ? Wird die Grafik dennoch geladen?)
Das Banner ist aus folgendem Grund ein IMG-Element und kein h1 mit background oder so...

  
#head_banner {  
	display:block;  
	max-width:100%;  
	max-height:333px;  
	min-height:100px;  
}

Anders gesagt: Die Grafik **möchte** gerne ihre volle Breite von 1.800 Pixel ausnutzen (wobei mir einfällt dass die Hälfte sicher ausreichte), wird durch die Breite des Browserfensters aber darin beschränkt. Ich finde das sieht gut aus und passt sich wunderbar dynamisch an und so fort. Ich wüsste nicht dass oder wie man mit CSS eine Hintergrundgrafik skallieren kann... sonst täte ich dies (das Bild ist ja eigentlich kein "Inhalt").

So, mein Gedanke war nun irgendeine Art von UA-Sniffing oder so, aber ich würde halt am Liebsten auch die Art der Verbindung (Mobil oder Kabel) ermitteln und so fort und aufgrund dessen dann die eine oder die andere Grafik anzeigen. Das kann Client- oder Serverseitig geschehen, das ist mir egal. Aber UA-Sniffing ist eben auch so... ew pfui und unzuverlässig und wie angedeutet auch eigentlich unzureichend.

Daher bin ich allgemein auf der Suche nach einer Lösung für eine minimalistische(re) Webseite, wie macht man das 2013? Wie gesagt, media-query und dann dieses oder jenes Bild ein-/ausblenden kam mir gerade während ich diesen Beitrag schrieb, hilft mir aber nur wenn Browser so ein Bild wenn es nicht gezeigt wird auch wirklich nicht laden.

Vielen Dank schonmal für alle Anregungen :)