Skip to content

No support for multiple URLs in srcset #313

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.

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

Closed
alexpls opened this issue Mar 7, 2016 · 2 comments · Fixed by #675 or #740
Closed

No support for multiple URLs in srcset #313

alexpls opened this issue Mar 7, 2016 · 2 comments · Fixed by #675 or #740

Comments

@alexpls
Copy link

alexpls commented Mar 7, 2016

Part of the HTML 5.1 spec defines the srcset attribute on img elements where multiple URLs can be specified on one img to use in different situations (high pixel density displays, small monitors, etc).

An example of this taken from the draft w3c spec looks like:

<img src="/uploads/100-marie-lloyd.jpg"
      srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
      alt="" width="100" height="150">

As far as I can see html-proofer does not support multiple URLs defined inside a srcset attribute.

See the draft spec here: http://w3c.github.io/html/semantics-embedded-content.html, and note srcset is already supported in the majority of modern browsers already: http://caniuse.com/#search=srcset

If support for this is something you think is worth including on html-proofer let me know and I'd be happy to work on it and make a pull request!

@fulldecent
Copy link
Collaborator

I'd like to see a device with 1.5x pixel density.

Yes, I think this is valid and in-scope for the project.

@ShoGinn
Copy link

ShoGinn commented Jul 19, 2022

I am still having problems with this and false errors with this srcset code:

<div class="w-100">
  <img alt="User::round" srcset="/project/user_400.webp 400w,
  /project/user_760.webp 760w, /project/user_1200x1200_fit_q75_h2_lanczos.webp
  1200w" src=/project/user_400.webp width="250" height="187" loading="lazy"
  data-zoomable>
</div>
* At public/project/index.html:7:
  internal image /project/user_400.webp 400w does not exist
* At public/project/index.html:7:
  internal image /project/user_760.webp 760w does not exist
* At public/project/index.html:7:
  internal image /project/user_1200x1200_fit_q75_h2_lanczos.webp 1200w does not exist

All the files there and operate normally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants