Srcset support

[kylehotchkiss]

Srcset looks to be on it's way. It will soon be in chrome. It's already in webkit.

For others, we can polyfill and serve low res and high res:
https://github.com/borismus/srcset-polyfill

Our most common use case would be for images in a blog post, carousel, etc. We could have a low res 320px version, and then a higher res version that gets served to desktops widths.

There is some debate over what to do for retina phones, I'm pretty firmly in the "don't send them huge images over 3g/4g" camp, but that could be a point of discussion.

---

Just noting for the future
http://www.smashingmagazine.com/2015/02/24/ricg-responsive-images-for-wordpress/

---

Next version of WP is almost out and is going to have the above mentioned plugin:

For the sizes attribute, we have chosen to use sizes="(min-width: {img.width}px) {img.width}px, 100vw" as a sensible default. However, this default value can and should be filtered by themes to meet their layout needs.

Based on community feedback, we are choosing not to include a polyfill for non-supporting browsers directly in core. However, we would recommend that themes make use of Picturefill in order to provide responsive image support to the broadest set of users.

The picturefill site has some ongoing docs about various patterns, should we follow the WP syntax?

Lastly sizes support is also almost universal in browers (IE future in 13, and was added to safari 9 and ios9)
http://caniuse.com/#feat=srcset

Do we even need the polyfill?

[ccorda]

Example of doing this manually using timber resize:
timber/timber#784

[jeffgreco]

The Timber example is better, but posting this anyway https://github.com/aFarkas/lazysizes

[ccorda]

@kylehotchkiss used lazysizes recently with imgix. could be worth doing

[kylehotchkiss]

http://www.kylehotchkiss.com/photography/ Live Examples here

[laras126]

Chiming in a year later, and srcset is here to stay! You can take advantage of the responsive images in core using the wp_get_attachment_image_srcset function if you don't want to resize them manually (which creates a lot of duplicate images in uploads/). Here's an example in a Twig template:

<img src="{{function('wp_get_attachment_image_url', post.thumbnail.id, 'medium')}}" 
         srcset="{{function('wp_get_attachment_image_srcset', post.thumbnail.id, 'medium' )}}"
         sizes="(max-width: 1024px) 100vw, 1024px" alt="Post thumbnail">

Swap out post.thumbnail.id with the id of your desired image. You can easily use lazysizes here as well by adjusting the attribute names accordingly.