Skip to content
This repository has been archived by the owner on Aug 10, 2022. It is now read-only.

Add content for <picture> element #8

Closed
petele opened this issue Apr 30, 2014 · 25 comments
Closed

Add content for <picture> element #8

petele opened this issue Apr 30, 2014 · 25 comments
Assignees
Milestone

Comments

@petele
Copy link
Member

petele commented Apr 30, 2014

Once element is available in 2+ browsers, add section to Web Fundamentals.

See @Wilto's comments in #6

@Wilto
Copy link

Wilto commented Apr 30, 2014

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.

@PaulKinlan
Copy link
Contributor

@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.

@petele
Copy link
Member Author

petele commented May 27, 2014

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

@Wilto
Copy link

Wilto commented May 27, 2014

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

@petele
Copy link
Member Author

petele commented May 27, 2014

@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.

@Wilto
Copy link

Wilto commented May 28, 2014

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

@Wilto
Copy link

Wilto commented May 28, 2014

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 )

@Wilto
Copy link

Wilto commented May 28, 2014

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.

@petele
Copy link
Member Author

petele commented Jun 4, 2014

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

@petele
Copy link
Member Author

petele commented Jun 5, 2014

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.

@maxh
Copy link
Contributor

maxh commented Jun 5, 2014

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.

@Wilto
Copy link

Wilto commented Jun 5, 2014

@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?

@petele
Copy link
Member Author

petele commented Jun 5, 2014

@Wilto - please do!!

@maxh
Copy link
Contributor

maxh commented Jun 5, 2014

@Wilto sounds good! @sethladd as FYI.

@zcorpan
Copy link

zcorpan commented Jun 6, 2014

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

@petele
Copy link
Member Author

petele commented Jun 10, 2014

@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.

@Wilto
Copy link

Wilto commented Jun 11, 2014

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?

@petele
Copy link
Member Author

petele commented Jun 11, 2014

@Wilto - comments or edits are fine!

On Wed, Jun 11, 2014 at 4:20 PM, Mat Marquis notifications@github.com
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 | petele@google.com | 650-733-6404

@Wilto
Copy link

Wilto commented Jun 11, 2014

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!

@petele petele closed this as completed in b97098f Jun 12, 2014
@petele
Copy link
Member Author

petele commented Jun 12, 2014

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!

@Wilto
Copy link

Wilto commented Jun 12, 2014

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!

@PaulKinlan
Copy link
Contributor

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

@PaulKinlan
Copy link
Contributor

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.

@petele
Copy link
Member Author

petele commented Jun 12, 2014

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 notifications@github.com
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 | petele@google.com | 650-733-6404

@Wilto
Copy link

Wilto commented Jun 12, 2014

@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

greenido added a commit that referenced this issue Nov 1, 2015
petele pushed a commit that referenced this issue May 9, 2016
[TRANSLATION] Updates: Credential Management API
gauntface pushed a commit that referenced this issue Nov 15, 2017
# This is the 1st commit message:

Adding start of Workbox v3 alpha docs

# This is the commit message #2:

Adding v3 alpha

# This is the commit message #3:

Adding configuration guide

# This is the commit message #4:

Adding workbox-precaching and fixing nested parameters

# This is the commit message #5:

Setting up namespaced docs on WF

# This is the commit message #6:

Adding ref and module docs for precaching

# This is the commit message #7:

Adding ref and module docs for precaching

# This is the commit message #8:

Routing Docs and module guide

# This is the commit message #9:

Routing Docs and module guide

# This is the commit message #10:

Adding workbox-cache-expiration guide and reference docs

# This is the commit message #11:

Adding routing docs

# This is the commit message #12:

Changing menu name

# This is the commit message #13:

Adding ability to use custom project yaml

# This is the commit message #14:

Adding workbox pages

# This is the commit message #15:

Getting it to work on devsite staging

# This is the commit message #16:

Adding some headings instead of sections but need to stage

# This is the commit message #17:

Moving to heading

# This is the commit message #18:

Adding heading support for navigation

# This is the commit message #19:

Adding contributor list

# This is the commit message #20:

Adding more content for docs

# This is the commit message #21:

Adding in company logos

# This is the commit message #22:

Adding in company logos

# This is the commit message #23:

Adding logos

# This is the commit message #24:

Adding some fixes for left nav

# This is the commit message #25:

Renaming strategies

# This is the commit message #26:

Fixng ref doc bug and add missing module pages

# This is the commit message #27:

Adding Guides etc
@petele petele mentioned this issue Nov 26, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants