Bessere Leistung für Hintergrundbilder

Question

Ich habe diese Website. Welches verwendet Stellar.js. Dafür habe ich viele Hintergrundbilder. Sie müssen für große Bildschirme groß sein. Sie bleiben also nett. Wie auch immer auf dem Handy ist es vielleicht ein bisschen zu viel, um speziell auf 3G zu downloaden.

Ich frage mich, ob es keinen besseren Ansatz gibt, dann Medienabfragen mit verschiedenen Bildquellen als Hintergrundbild zu verwenden. Wie ein Plug-In oder etwas? Irgendwelche Ideen? Ich möchte wirklich nicht alle 68 in verschiedenen Formaten skalieren.

Answer 1

Für ein css/background-image Haben Sie sich die image-set Eigenschaft in css angesehen? Es ist das css, das dem html img Elementen srcset entspricht. Der Nachteil ist vielleicht die Browserkompatibilität (für mobile Geräte sollte man jedoch http://caniuse.com/#feat=css-image-set abdecken) und ob die erweiterte Syntax diesen Browsern bereits hinzugefügt wurde.

Beispiel Nutzung:

background-image: -webkit-image-set(url('my-img-1x.jpg') 1x, url('my-img-2x.jpg') 2x); 

jedoch Wenn Sie tatsächlich img Elemente in Ihrem HTML srcset selbst jetzt hat ziemlich gute Browser-Unterstützung und erweiterte Syntax verwenden können wechselnde Bilder auf verschiedenen Bildschirm-Größe http://caniuse.com/#search=srcset

Haltepunkte zu ermöglichen,

srcset Beispiel Nutzung:

<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg 2x, my-img-wide.jpg 1920w" /> 

Wir freuen uns die <picture> Element fängt auch an, Browser-Unterstützung zu gewinnen, jedoch wahrscheinlich ein bisschen weit weg von der gängigen Annahme jetzt zu verwenden.