media queries / be-verschiedene Bild-je nach Bildschirm-Größe

Könnte dies einfach, aber ich bin verloren in all den Lösungen habe ich es geschafft, zu finden auf der web.
Ich habe eine laufende website (www.webstalab.com) basierend auf Twitter Bootstrap-3, aber das Bild (mit zwei Statuen halten einen ball) ist ziemlich groß in der Größe (rund 900 Kb) daher lädt viel zu lange auf langsameren internet-verbindungen.
Das vorliegende Foto ist 1920 Pixel breit ist, ist Ansprechend und es ist nicht ein hintergrund Bild. (Ich konnte nicht das erreichen des gewünschten layout-mit dem background-image ' - Ansatz).

Alles was ich will zu tun ist, erstellen Sie 3 verschiedene Größe-Versionen das gleiche Foto (eine um die 800px breit ist, um 1200px breit und halten Sie die original-bei 1920px Breite) und den browser laden Sie die entsprechende version des Bildes, was je nach Bildschirmgröße und-Auflösung wird verwendet, um die website anzuzeigen. Ich Plane auch schneiden Sie die Größe des Originals (1920 Pixel breit) Foto ein bisschen so lädt er ein bisschen schneller.

Ich nehme an, CSS3 media queries ist der Weg zu gehen mit diesem?
Werden media queries auch lösen, das retina-display Problem?
Kann jemand empfehlen, einen guten Artikel über die Grundlagen?
Ich würde lieber eine Lösung ohne javascript (nur für den Fall, der user hat es ausgeschaltet).
Die website ist online, so dass Sie überprüfen können, den source-code.

Danke an alle!

InformationsquelleAutor zbiber | 2014-01-29
Schreibe einen Kommentar