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!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie die
img
- tag für die Anzeige der Bild, dann ja, Sie müssen eine JS-Lösung.Also, wenn Sie wollen, nutzen Sie media queries, müssen Sie verwenden die Bilder als hintergrund zum Beispiel eine
div
tag:Beispiel mit background-image auf ein div
Beispiel ist ohne retina-display, die Handhabung, aber hier ist ein Artikel über den Umgang:
Retina-Display, Media Queries
Beachten Sie dies nicht hilft, laden Sie Geschwindigkeit, siehe Kommentare.
Bootstrap 3 hat einige reaktionsschnell Weg Dienstprogramme, die Ihnen erlauben, anzeigen/ausblenden von Elementen über media queries.
http://getbootstrap.com/css/#responsive-utilities
Gebe z.B. ein element der Klasse
visible-xs
und es wird nur die Karte-XS-Größe-Geräte.Habe ich nur implementiert, dies ist in meinen Augen, eher als in CSS, wie ich es gebrauchen wollte gerade
img
nicht ein "div mit Hintergrundbild"Fühlt es sich nicht sehr elegant aus CSS-Sicht, aber dies ist eines der wenigen Male, die Sie nicht kontrollieren können etwas von CSS.
Gibt es Sie, eine potentiell leistungsstarke und dennoch einfache Technik um effizient swapping ganze HTML-Strukturen.
src="data:{data-image-here}"
ist weit davon entfernt, eine Optimierung (Bild die Daten werden in das tag selbst), Unterschied, es ist Teil des markup anstatt in einer separaten Datei abgelegt.src="about:blank"
nicht, in der Tat, laden Sie nichts, aber Sie müssen Ihre eigenen JavaScript zu ersetzenabout:blank
mit der richtigen URL, wenn das Bild geladen werden soll - oder-sonst bleibt es ein Toter tag, keine Anzeige, nichts. Welche browser-Optimierungen sind reden wir?srcset
Attribut.Solange cookies gesendet werden, mit allen Bild Bearbeiten, können Sie eine Umleitung zu niedrig aufgelöste Bilder mittels rewrite-Regeln in
.htaccess
- Datei abhängig von den cookie ganz am Anfang der Seite laden mit JavaScript.index.html
:.htaccess
im /images Ordner:Ich weiß nicht, über mögliche performance-hit. Nur versuchen Sie es jetzt.