Any roadmap support for srcset attrs?

[coneybeare]

Support for the img tag's srcset attribute is getting pretty widespread now: http://caniuse.com/#feat=srcset

the syntax is very easy: http://www.webkit.org/demos/srcset/

Is this on the roadmap to be able to supply retina images that the browser decides how/when to load?

[coneybeare]

In the meantime, I just manually added it wherever I needed it using {{ "image_filename" | asset_path }} instead of {% image ...%}

<img src="{{ post.main_image_thumbnail | asset_path }}" srcset="{{ post.main_image_thumbnail | asset_path }} 1x, {{ post.main_image_thumbnail_2x | asset_path }} 2x, {{ post.main_image_thumbnail_3x | asset_path }} 3x, {{ post.main_image_thumbnail_4x | asset_path }} 4x" alt="">

[nhoizey]

srcset x is only part of the spec, it would be awesome to also support srcset w for Responsive Images.

[envygeeks]

Do either one of you have a link to the actual spec from W3C? This is something that would be neat to implement but I don't think it'll happen within the next few weeks.

[nhoizey]

The spec won't help a lot because it's written for browser vendors.

But these links should be enough to understand how srcset w + sizes is important for Responsive Web Design:

• https://ericportis.com/posts/2014/srcset-sizes/
• http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/ + http://blog.cloudfour.com/responsive-images-101-part-5-sizes/

[envygeeks]

I'll search for the spec myself.

[nhoizey]

The spec has been defined by the Responsive Issues (formerly Images) Community Group: https://responsiveimages.org/

Here is the spec: https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

[envygeeks]

If you guys don't need us to parse it and do whatever you want done with it then v2.0.0 will already support this since we have pass through arguments, if you want us to parse the basics like you gave I think it'll get pushed off until I have time to finish reading at least the basic parts of the spec to decide what we should parse.

[nhoizey]

It would be great to have named settings (for example hero, gallery, etc.) that could be used like {% image hero whatever.jpg %} or {% image gallery another.jpg %}`.

It would use whatever.jpg and another.jpg as hi resolution source images, and generate several smaller images.

{% image hero whatever.jpg alt="my hero image" %} would generate the HTML for a "hero" image that would always be full width in a design constrained to 960px wide:

<img
  src="whatever-320.jpg"
  srcset="whatever-320.jpg 320w, whatever-640.jpg 640w, whatever-1024.jpg 1024w"
  sizes="(min-width: 960px) 960px, 100vw"
  alt="my hero image" />

{% image gallery another.jpg alt="my gallery thumbnail" %} would generate the HTML for a "thumbnail" image that would be full width on small screens, then half the width, and finaly one third on the widest screens:

<img
  src="another-320.jpg"
  srcset="another-320.jpg 320w, another-480.jpg 480w, another-640.jpg 640w, another-800.jpg 800w"
  sizes="(min-width: 960px) 300px, (min-width: 800px) 33vw, (min-width: 500) 50vw, 100vw"
  alt="my gallery thumbnail" />

You can look at how the jekyll-picture-tag plugin handles the settings. Unfortunately, this plugin only generates the <picture> responsive images syntax, which the one to avoid most of the time.

[envygeeks]

Something like that _shouldn't_ be too hard to do, especially given we have an uncoupled hook system that would allow you to add any number of sizes you want. Right now instead of it being {% image hero whatever.jpg %} it would have to be {% img whatever.jpg @hero %} because we use @ for boolean arguments. Let me finish building out the new system for image manipulation in 2.0 and I'll come back to this and comment again with a one-hour test and let you know if I'll push it off to 2.1 or release it with 2.0.

[nhoizey]

Great! I'll be happy to help you with any test you need!

[nhoizey]

Shouldn't this issue be closed, as "duplicate" of #172?

[envygeeks]

Hulk: ++mark "jekyll-picture-tag" +reference-implementation.

[envygeeks]

I'm going to close this in favor of #421 which is probably coming in 3.x. Or at most 3.0.x since @alexey-pelykh has offered to implement the feature if I don't. I need to get with him and draft how we can do this with support for proxies the easiest.