Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DBW: site uses responsive images #978

Closed
1 of 2 tasks
ebidel opened this issue Nov 19, 2016 · 5 comments · Fixed by #1868
Closed
1 of 2 tasks

DBW: site uses responsive images #978

ebidel opened this issue Nov 19, 2016 · 5 comments · Fixed by #1868
Assignees
@patrickhulce
Labels
new_audit
Milestone
Q1 2017

Comments

@ebidel
Copy link
Contributor

ebidel commented Nov 19, 2016 •
edited by patrickhulce
Loading

Tracked Features

  • Detectimg elements that use assets that are too large for their displayed size (DBW: Responsive Images Audit #1497)
  • Detect images used in CSS that are too large for their displayed size

ORIGINAL

It would be nice to have an audit for testing if a site sends responsive images. We could test for different common viewports and DPR and see if the images served by the page vary in size.

Suggest techniques like <img srcset>, css image-set(), and <picture>.

Perhaps it could share a gatherer with #718
@wardpeet
Copy link
Collaborator

which viewports & dpr are you referring to?

viewport: mobile, ipad, desktop?
dpr: 1, 2, 3 ?

@patrickhulce
Copy link
Collaborator

Also potentially sharing overlap with #876? Perhaps that just becomes a proposed solution to a failed responsive image audit

@ebidel
Copy link
Contributor Author

ebidel commented Nov 22, 2016

@wardpeet yea, I was thinking reasonable defaults for each of those. I think we'd have use device emulation for the DPR. Checking dpr 1 vs. 2 would be good for starters.

@patrickhulce There's probably overlap. Possibly a shared gatherer for the image stuff.

I filed separate bugs b/c #876 is also closely related to #718. They could be the start to a set of audits for initial page load perf. NBU, reduce bytes transferred, awesome.

@patrickhulce
Copy link
Collaborator

k i'll get started on some of these

@patrickhulce patrickhulce self-assigned this Nov 22, 2016
@ebidel
Copy link
Contributor Author

ebidel commented Nov 22, 2016

Cool. I'll take #718 from the "save bandwidth" side

patrickhulce added a commit to patrickhulce/lighthouse that referenced this issue Nov 22, 2016
@patrickhulce
feat(audit): responsive images
0de5366 
enables more device emulation
adds use-responsive-images audit to dobetterweb

addresses GoogleChrome#978
@patrickhulce patrickhulce mentioned this issue Nov 22, 2016
Closed
@patrickhulce patrickhulce added this to the Q1 2017 milestone Jan 18, 2017
@patrickhulce patrickhulce mentioned this issue Jan 19, 2017
Merged
@patrickhulce patrickhulce mentioned this issue Mar 16, 2017
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@patrickhulce patrickhulce

Labels
new_audit
Projects
None yet
Milestone
Q1 2017
Development

Successfully merging a pull request may close this issue.

feat(image-usage): add support for CSS images GoogleChrome/lighthouse
3 participants
@ebidel @wardpeet @patrickhulce