CODEWITHSUNDEEP
cssmobileuser-experience
user3806549
user3806549

Reputation: 1438

Better performance for background images

I have this website. Which uses Stellar.js. Therefor I have lots off background images. They have to be large for big screen display. So they stay nice. How ever on mobile it's maybe a bit to much to download especially on 3G.

I was wondering if there isn't a better approach then using media query's with different image sources as background-image. Such as a plug in or something? Any ideas? Really don't want to scale all the 68 in different formats.

Upvotes: 0

Views: 419

Answers (1)

elmarko
elmarko

Reputation: 923

For a css/background-image Have you looked at the image-set property in css? It's the css equivalent to the html img elements srcset. The downside may be browser compatibility (however for mobile you should be covered http://caniuse.com/#feat=css-image-set) and whether the expanded syntax has been added to those browsers yet.

example usage: 

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

However, If you can use actual img elements in your HTML srcset itself now has pretty good browser support and expanded syntax to allow changing images at different screen-size breakpoints http://caniuse.com/#search=srcset

srcset example usage: 

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

Looking forward the <picture> element is also starting to gain browser support, however probably a bit far away from mainstream adoption to use now.

Upvotes: 4

Related Questions