If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

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



Pages & Content
4 years ago
4 years ago


(Reporter: icaaq, Unassigned)


Firefox Tracking Flags

(Not tracked)





4 years ago
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.


cc: :sgarrity :pmac :craigcook

Comment 1

4 years ago
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.
Blocks: 868090
Priority: -- → P3
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

4 years ago
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.


Comment 5

4 years ago
Commits pushed to master at https://github.com/mozilla/bedrock

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

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/
Last Resolved: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.