1250225 - Use srcset instead of JS for high-res images

Status: RESOLVED FIXED

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

Description

[Jonathan Petto [:jpetto]]

Now that support is widespread [1], we should decrease our JS codebase, page weight, and render time by using srcset for high resolution images instead of our current JS-based solution.

[1] http://caniuse.com/#search=srcset

Comment 1

[Schalk Neethling [:espressive]]

(In reply to Jon Petto [:jpetto] from comment #0)
> Now that support is widespread [1], we should decrease our JS codebase, page
> weight, and render time by using srcset for high resolution images instead
> of our current JS-based solution.
> 
> [1] http://caniuse.com/#search=srcset

I would say, hell yes! But IE is not playing nicely. We might then consider using:
https://github.com/scottjehl/picturefill

for IE only? Thoughts?

Comment 2

[Jonathan Petto [:jpetto]]

High-res images are a progressive enhancement. I'd favor letting IE users get regular resolution images over managing another script dependency.

However, if the consensus is to provide IE support, we could possibly refactor the current high_res_img helper [1] to use the standard srcset attribute and only run initHighResImages [2] for IE users. This code is largely already in place, meaning no additional third-party script.

(Refactoring the helper may be the best course of action regardless of IE support.)

My vote in this specific case is to not provide any support for IE.

Maybe we can all quickly vote after our next stand up?

[1] https://github.com/mozilla/bedrock/blob/master/bedrock/mozorg/helpers/misc.py#L217
[2] https://github.com/mozilla/bedrock/blob/master/media/js/base/mozilla-image-helper.js#L79

Comment 3

[Schalk Neethling [:espressive]]

(In reply to Jon Petto [:jpetto] from comment #2)
> High-res images are a progressive enhancement. I'd favor letting IE users
> get regular resolution images over managing another script dependency.
> 
> However, if the consensus is to provide IE support, we could possibly
> refactor the current high_res_img helper [1] to use the standard srcset
> attribute and only run initHighResImages [2] for IE users. This code is
> largely already in place, meaning no additional third-party script.
> 
> (Refactoring the helper may be the best course of action regardless of IE
> support.)
> 
> My vote in this specific case is to not provide any support for IE.
> 
> Maybe we can all quickly vote after our next stand up?

Sounds good to me. My vote is for IE to get what ever it supports. So IE get's regular res and Edge, and the rest of the world, get's high-res.

Comment 4

[Jonathan Petto [:jpetto]]

After a quick round of voting in IRC, agibson & craigcook have both agreed with the above - no work-arounds to get high-res images working in IE. Native support only.

Comment 5

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/1371266f03b1774a030f97afdc245b1e356b1d79
[fix bug 1250225] Use srcset for high res images.

https://github.com/mozilla/bedrock/commit/b1017431efef471d25114abcaa7e10d6a29ddf29
Merge pull request #3916 from jpetto/bug-1250225-srcset-high-res-images

[fix bug 1250225] Use srcset for high res images.

Comment 6

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/e2fb5c4a50dfbb18437b57e40f6b4a0e7c6ac759
[fix bug 1250225] Restore Mozilla.ImageHelper.isHighDpi function.

https://github.com/mozilla/bedrock/commit/d69675486c6afdcb21b36f61464bab9ea2b30d78
Merge pull request #3925 from jpetto/bug-1250225-restore-ishighdpi-function

[fix bug 1250225] Restore Mozilla.ImageHelper.isHighDpi function.