I made a small test in the mobile portrait view, and on the initial load the savings on the images were ~50% loading only 129KB of images instead of 260KB http://cl.ly/image/2b05401i3S2N When .loaded is appended another 20KB of images is loaded http://cl.ly/image/4144083H2s0O Todays www.allizom.org loads 260KB of images. http://cl.ly/image/2I2k1v0C3L3B
The reason we originally used img tags rather than background images was so we could reliably resize them for the responsive layout since not all browsers support background-size yet. That said, your proposal to save different versions of the images for the different responsive layout sizes would resolve this issue. It's a bit more work for each new promo, but probably worth it for the performance win.
Isac, we discussed this today and everyone seems content with your suggestion. Are you interested in implementing? If so, we can probably close https://github.com/mozilla/bedrock/pull/817 Also, do be aware that it might be worth waiting for https://github.com/mozilla/bedrock/pull/816 to get merged first (should happen this week).
I've included the tshirt-promo in my PR and updated the pager-tabs css to Stevens new bullets. Another thing that crossed my mind is, if we do it this way we can have different images on eg. smaller devices. https://github.com/mozilla/bedrock/pull/827
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/868fd93291badba82d5dba730c34fec0830f22a1 Bug 867916 - Add promo-images as background-images instead on img elements https://github.com/mozilla/bedrock/commit/167664d1b831235c45dd1ff12dc711cf58466105 Merge pull request #886 from icaaq/bug867916-resonsive-images-promo Bug 867916 - Adds promo-images as background-images instead on <img>
fixed on stage https://www.allizom.org/en-US/