Arka plan resimleri için daha iyi performans

Question

Bu web sitesini sahibim. Hangi Stellar.js kullanır. Orada arka plan görüntüleri çok var. Büyük ekranlar için büyük olmalılar. Yani iyi kalıyorlar. Mobilde, özellikle 3G'de indirilebilecek bir şey olabilir.

Daha iyi bir yaklaşım yoksa, medya sorgusunun arka plan görüntüsü olarak farklı görüntü kaynaklarıyla kullanılmasını merak ediyorum. Fiş gibi bir şey mi? Herhangi bir fikir? Gerçekten 68'i farklı formatlarda ölçeklemek istemiyorum.

Answer 1

Bir css/background-image için css'de image-set özelliğine baktınız mı? Bu html img öğeleri srcset öğelerine eşdeğerdir. Dezavantajı tarayıcı uyumluluğu olabilir (ancak mobil cihazlar için http://caniuse.com/#feat=css-image-set ile kapsanmalıdır) ve genişletilmiş sözdizimi bu tarayıcılara henüz eklenmemiş olabilir.

örnek kullanımı:

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

Ancak, artık HTML srcset kendisinde gerçek img elemanları kullanabiliyorsa farklı ekran-boyutta değişen görüntüleri http://caniuse.com/#search=srcset

sınır değerler izin oldukça iyi tarayıcı desteği ve genişletilmiş sözdizimi vardır

srcset örnek kullanımı:

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

ileriLookingöğesi de tarayıcı desteği elde etmeye başlıyor, ancak şu anda ana akım benimsemeden biraz uzakta.