Use srcset instead of JS for high-res images

RESOLVED FIXED

Status

www.mozilla.org
Pages & Content
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: jpetto, Assigned: jpetto)

Tracking

Production

Firefox Tracking Flags

(Not tracked)

Details

(Assignee)

Description

2 years ago
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
(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?
(Assignee)

Comment 2

2 years ago
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
(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.
(Assignee)

Comment 4

2 years ago
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.
(Assignee)

Updated

2 years ago
Assignee: nobody → jon

Comment 5

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

Updated

2 years ago
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED

Comment 6

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

Updated

2 years ago
Depends on: 1255964
You need to log in before you can comment on or make changes to this bug.