Add content for <picture> element about webfundamentals HOT 25 CLOSED

We just filed https://code.google.com/p/chromium/issues/detail?id=368830 special for you guys, so we can keep track of picture progress in one place. Should be some stuff landing in https://bugzilla.mozilla.org/show_bug.cgi?id=picture within the next day or two, too.

from webfundamentals.

@petele I had a bit of a conversation around this of thread with @Wilto @igrigorik and others and the consensus is that we need to get this in for the launch of the documentation before I/O.

It has good sane fallbacks for all browsers that don't support it and we need to encourage developers to start using this now.

Also cc @addyosmani for any starter kit type projects - my thinking behind this is that because of the relatively sane fallback our guidance should be along the lines of it works everywhere, better browsers give their users a better experience (content direction etc etc) but all browsers should be able to render an image.

from webfundamentals.

OK, that should be do-able. I'll get started on it this week.

from webfundamentals.

The RICG is happy to help out with this in whatever way we can! Keep me posted, yeah?

from webfundamentals.

@Wilto Any pointers to recommended materials/polyfills/docs etc would be great. I've got a few things already lined up, but it's always helpful to hear what you guys think is the best.

from webfundamentals.

Sounds good—we’ll put some resources together today.

from webfundamentals.

Use Cases
http://usecases.responsiveimages.org/

The Spec
Defines both picture and the version of srcset being actively implemented by vendors.
http://picture.responsiveimages.org/

Polyfills

Picturefill 2.0
The complete, to-spec “official” polyfill.
http://picturefill.responsiveimages.org

How the syntax evolved

Responsive Images: How they Almost Worked and What We Need
The post that introduced the original picture element, using media attributes on source.
http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need

Florian’s Compromise
The addition of the 1x, 2x syntax to the original picture proposal.
http://www.w3.org/community/respimg/2012/06/18/florians-compromise/

Reasoning behind srcN replacing srcset and picture
John Mellor, proposing the src-n grammar that evolved into the sizes/srcset syntax.
http://lists.w3.org/Archives/Public/public-respimg/2013Sep/0087.html

Explaining The Last Clause of the src-n Grammar
http://www.xanthir.com/b4Su0
Tab Atkins' version of the same argument.

Using the current syntax

Responsive Images Done Right: A Guide To And srcset
A use case by use case and feature by feature rundown of the new spec.
http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/

Srcset and sizes
Explains how the sizes attribute, used in conjunction with descriptors in srcset, can provide a more flexible solution.
http://ericportis.com/posts/2014/srcset-sizes/

Brace yourselves – responsive images are coming
Yoav Weiss' talk at London Web Standards
http://vimeo.com/93347500

Implementation Progress

Gecko:
Should hit nightlies within the next couple of weeks.
https://bugzilla.mozilla.org/show_bug.cgi?id=picture
https://bugzilla.mozilla.org/show_bug.cgi?id=srcset

Blink:
Landed in Canary behind a flag.
https://code.google.com/p/chromium/issues/detail?id=368830

WebKit:
Porting/refactoring the Blink patches is underway.
https://twitter.com/yoavweiss/status/471573481273184256

IE:
“Under consideration.”
http://status.modern.ie/pictureelement
http://status.modern.ie/imgsrcset
(Outstanding updates in MicrosoftEdge/Status#59 )

from webfundamentals.

Kind of a team-wide brain dump there. Hope it’s helpful!

If you want to run anything by the spec writers or implementors involved with picture/srcset—or the RICG team in general—just give the word.

from webfundamentals.

I've started work on this and hope to have an initial draft ready for review tomorrow.

from webfundamentals.

The first draft is done and ready for review!

http://goo.gl/DXzscF

I'm not happy with a few of the titles or the explicit DO this WHEN this instructions, but will work on that over the next few days.

from webfundamentals.

Given that this probably won't be in Chrome until 38, I'm wondering if this content might be more appropriate for H5R right now... should we wait to publish this on WF? It doesn't seem like best practices for developers today.

from webfundamentals.

@maxh: We (@petele, @addyosmani, @igrigorik, @paulirish, @viviancromwell) were talking it over in an email thread a few weeks ago, and the general consensus was that this pattern is already seeing wide use by developers today—despite not even having landed in a stable browser—and it would likely be in everyone’s best interests to get in front of that with solid documentation.

@petele: Looks great, man! Want me to give this an editorial read-through—if that’s helpful at all—or should I hold off for a bit?

from webfundamentals.

@Wilto - please do!!

from webfundamentals.

@Wilto sounds good! @sethladd as FYI.

from webfundamentals.

Use the picture element to provide multiple densities or ...

Densities is handled by img and the x descriptor. Use picture for art-direction (or type-based selection).

the size of each supplied image can be specified by adding a width attribute

width descriptor

http://petele-scratch.appspot.com/picture/media.html

It might be good to somehow bake in actual art direction in the example so that it's not confused with a different use case. The img could have a 2x resource also (but it shouldn't be 200.png, presumably, maybe something like small-200.png and the current 200.png could be medium-200.png or so).

http://petele-scratch.appspot.com/picture/sizes.html
http://petele-scratch.appspot.com/picture/breakpoints.html

These can use just the img element and omit picture.

HTH

from webfundamentals.

@Wilto - I've updated the doc to include the comments above and have also updated the samples.

http://petele-scratch.appspot.com/picture/sizes.html now uses the <img> instead of picture, though it doesn't work in Chrome Beta right now - even though I have the picture element. Should the picturefill polyfill make that work? If so, what's up? ;)

http://petele-scratch.appspot.com/picture/breakpoints.html has also been switched to use the <img> element, but I did not update that to use real artwork. I can if you think it's worthwhile.

If all looks good, I'll push this update today or tomorrow.

from webfundamentals.

Hm. http://petele-scratch.appspot.com/picture/sizes.html seems to be working for me.

It might help to illustrate http://petele-scratch.appspot.com/picture/breakpoints.html if you CSS it to the layout sizes specified in sizes—it can be hard for people to really visualize what the stuff in sizes means when resizing the window makes the image seemingly load sources at random.

Taking a quick edit pass at https://docs.google.com/document/d/1eHobQTrZs9c_qaPbwvK95NsbfMwsbgyWZHIE9_Yqocc/edit?pli=1 — should I just make comments, or are direct edits okay?

from webfundamentals.

@Wilto - comments or edits are fine!

On Wed, Jun 11, 2014 at 4:20 PM, Mat Marquis [email protected]
wrote:

Hm. http://petele-scratch.appspot.com/picture/sizes.html seems to be
working for me.

It might help to illustrate
http://petele-scratch.appspot.com/picture/breakpoints.html if you CSS it
to the layout sizes specified in sizes—it can be hard for people to
really visualize what the stuff in sizes means when resizing the window
makes the image seemingly load sources at random.

Taking a quick edit pass at
https://docs.google.com/document/d/1eHobQTrZs9c_qaPbwvK95NsbfMwsbgyWZHIE9_Yqocc/edit?pli=1
— should I just make comments, or are direct edits okay?

—
Reply to this email directly or view it on GitHub
#8 (comment)
.

Pete LePage | Developer Advocate | [email protected] | 650-733-6404

from webfundamentals.

Don’t think I have direct edit permissions, so I chucked a couple of line comments in there. @yoavweiss (working on the Blink impl.) and @marcoscaceres (Moz) are having a quick look now. Good stuff, man—psyched to see it!

from webfundamentals.

Thanks for the feedback everyone! I've integrated all of the feedback and pushed the update to the staging server. It should be live within a day or so!

from webfundamentals.

Awesome! We’ve got a fork goin’ under the ResponsiveImagesCG org—if anything changes (highly unlikely though that may be), we’ll send over a PR for discussion. Thanks, man!

from webfundamentals.

@petele we need to get @ianbarber to do a codereview as there is a js file in the repo.

from webfundamentals.

On another note, my preference is to never recommend picturefill in production (only so you can see how it works in your dev environment) I would like us to be explicit about that, and also make sure that people know if they use this correctly they still see an image.

from webfundamentals.

Hmm, okay, if the Responsive Images WG has a CDN version, we may be able to
use that.

On Thu, Jun 12, 2014 at 11:33 AM, Paul Kinlan [email protected]
wrote:

@petele https://github.com/petele we need to get @ianbarber
https://github.com/ianbarber to do a codereview as there is a js file
in the repo.

—
Reply to this email directly or view it on GitHub
#8 (comment)
.

Pete LePage | Developer Advocate | [email protected] | 650-733-6404

from webfundamentals.

@PaulKinlan: Maybe conditionally? “Until there’s a stable implementation in at least two mainstream browsers” seems to be the de facto polyfill rule.

@petele: We have a couple of CDN options in scottjehl/picturefill#247

from webfundamentals.