867916 - Add promo-images as background-images instead on img elements

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect, P3)

Description

[Isac Lagerblad (:icaaq)]

I suggest that the promo-images on the start page is added as background-images instead of img elements, they don't add any semantic meaning to the document. If it's done in that way you can load different sizes for different devices witch will make the site faster.

Also if you add for example a .loaded class to the HTML element on window.onload you could also lazy-load the non visual images making the first-impression of the site really fast, and if no JavaScript is available only the first promo-image will be loaded.

Thoughts?

cc: :sgarrity :pmac :craigcook

Comment 1

[Isac Lagerblad (:icaaq)]

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

Comment 2

[Steven Garrity [:sgarrity]]

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.

Comment 3

[Steven Garrity [:sgarrity]]

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).

Comment 4

[Isac Lagerblad (:icaaq)]

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

Comment 5

[[github robot]]

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>

Comment 6

[raymond [:retornam] (inactive)]

fixed on stage https://www.allizom.org/en-US/