Support for picture element?

For technical support for all editions of CSS HTML Validator. Includes bug reports.
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Support for picture element?

Post by RSteinwand » Tue Jul 29, 2014 10:27 am

Hi Albert,

I noticed today that you don't yet support the <picture> element:

Code: Select all

<picture>
	<source media="(min-width:800px)" src="/images/slider/ach.webp" type="image/webp" />
	<source media="(min-width:800px)" src="/images/slider/ach.jpg" />
	<source media="(max-width:799px)" src="/images/slider/ach_small.webp" type="image/webp /">
	<source media="(max-width:799px)" src="/images/slider/ach_small.jpg" />
	<img src="/images/slider/ach.jpg" alt="" width="1200" height="308" />
</picture>
The "picture" element is not a recognized element. Is it misspelled?
---
[HTML Tidy] <picture> is not recognized!
Some good links:

http://picture.responsiveimages.org/
http://www.aljtmedia.com/blog/handling- ... attribute/

It appears the picture tag is not perfect in older browsers: http://www.smashingmagazine.com/2013/05 ... ve-images/
Last edited by RSteinwand on Tue Jul 29, 2014 1:03 pm, edited 1 time in total.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3222
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Tue Jul 29, 2014 11:00 am

Thanks. It looks like this one is still "up in the air", but I'll investigate it for the next major release.

See:
https://developer.mozilla.org/en-US/doc ... nt/picture

Are you using it on a production site?
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Tue Jul 29, 2014 12:24 pm

Hi Albert,

Just testing at this point. I'd like to use it with a rotating banner on the new responsive site next month, but not sure if a banner script will work with it tho (but need a new banner script anyway). Plan "B" would be to detect if browser supports webp, then DL images via JS after page loads, like I'm doing now.

Browser support:

Firefox 33, 34
Chrome 38, 39

http://caniuse.com/#feat=picture (great site BTW).
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Tue Jul 29, 2014 12:35 pm

Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3222
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Tue Jul 29, 2014 1:44 pm

Hi Rick,

Thanks. It looks like support is "coming online", but it seems Chrome still needs it to be explicitly enabled according to caniuse.com. Please PM me if you'd like to test v15 when I add "picture" element support to it.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Tue Jul 29, 2014 1:56 pm

I wonder if srcset wouldn't be a better solution for now.

Code: Select all

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf" />
Support seems to go back further by at least one version (4 more in chrome) in supported browsers: http://caniuse.com/#search=srcset

I'm still annoyed that M$ refuses to support webp in IE.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3222
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Thu Jul 31, 2014 8:27 pm

I'm still working on this. Here's a new help page for the picture element:
http://www.htmlvalidator.com/help.php?m=2&h=picture

I noticed that a lot of the picture element examples are invalid according to the latest specification for the picture element. Looks like it's still unstable.

I also updated the checking of the "srcset" attribute value as I noticed that had changed as well since I added it early this year.

The "sizes" attribute is also new. I may wait and see how that pans out before I add support for checking its value but it will allow the attribute now.

Rick, I hope to get a BETA out to you before the end of the day tomorrow. Thanks for trying it out!
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Aug 01, 2014 8:52 am

Help page looks good. I've never found Bing to be helpful when i search Microsoft's site for a download (which is sad). I usually can't find what I'm looking for and find it right away with Google. OTOH, Bing has some nice pictures.

srcset looks good too: http://www.htmlvalidator.com/help.php?m=2&h=img

This link goes directly to srcset: http://caniuse.com/#search=srcset
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Aug 01, 2014 12:13 pm

This works in Chrome-dev (I'm running 64 bit) with my responsive slider (unslider):

Code: Select all

<img src="/images/slider/software.jpg" srcset="/images/slider/software.jpg 1200w,/images/slider/software_x800.jpg 800w" sizes="100vw" alt="" width="1200" height="308" />
Of course CSE complains about the "sizes" attribute.
The "sizes" attribute is not valid for the "img" element. Some valid attributes for this element are:...
Fiddler shows the 800 px wide image being used at a narrower width. Just wish there was an easy way of adding webP to this w/o javascript.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3222
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Fri Aug 01, 2014 1:02 pm

RSteinwand wrote:Of course CSE complains about the "sizes" attribute.
Hi Rick,

The v15 BETA build I just sent you should fix that problem. :D
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Aug 01, 2014 1:46 pm

[HTML Tidy] <img> proprietary attribute "srcset"
---
[HTML Tidy] <img> proprietary attribute "sizes"
---
[131] The HTML 5.1 "srcset" attribute for "img" was used. Some browsers may not support this attribute. This message is displayed only once.
---
[131] The HTML 5.1 "sizes" attribute for "img" was used. Some browsers may not support this attribute. This message is displayed only once.
---
4 messages for line 131
Nice.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Aug 22, 2014 9:06 pm

Just found this:
Picture element support is destined to ship in a few weeks in Chrome 38, Opera 25 and Firefox 33.
http://dev.opera.com/articles/native-responsive-images/

I implemented 3 image sizes using img srcset and chrome handles it properly, loading the 400px wide image when the page is narrow, but the firefox beta only uses the fallback image, even tho the page passes W3C validation.

I figured I'd probably do like I'm doing now with our home page banner, test if the browser supports webP, sniff the browser width and serve an appropriately sized jpg or webP image after page load. (6 images with 3 sizes and 2 image formats.)

I'll worry about this later. I'm rolling out the new website for Monday morning. :mrgreen: (I didn't think this day would ever come.)
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Wed Aug 27, 2014 1:08 pm

Hi Albert,

This code works for Chrome 38 dev (I'm running x64 version):

Code: Select all

	<picture>
		<source media="(min-width:900px)" srcset="/images/slider/ach.webp" type="image/webp" />
		<source media="(min-width:900px)" srcset="/images/slider/ach.jpg" />
		<source media="(min-width:500px)" srcset="/images/slider/ach_x800.webp" type="image/webp" />
		<source media="(min-width:500px)" srcset="/images/slider/ach_x800.jpg" />
		<source srcset="/images/slider/ach_x400.webp" type="image/webp" />
		<source srcset="/images/slider/ach_x400.jpg" />
		<img src="/images/slider/ach.jpg" alt="" width="1200" height="308" />
	</picture>
Tested using Fiddler to sniff which images are being DL'd.

Note: In order to use webp images, they must be listed before the same-sized jpg, o/w since the jpg is used.

My Firefox version is beta 32, so not yet supported. (v. 33 minimum)

Test page: http://www.intercepteft.com/picture_test.html
Srcset version: http://www.intercepteft.com
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 551
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Fri Sep 26, 2014 3:12 pm

Hi Albert,
Thought I'd reply to report on my findings as an early adopter of <picture>, which I'm almost regretting, having spent all day on troubleshooting.... :?

You're going to have a lot of fun adding this one. :mrgreen:

First I want to say I found no good examples of what I needed to do so had to grab what I could from here and there.

To just swap a webp image for browsers that support it, this works great (ie. no media queries) and is what I used on most pages since i had small images already:

Code: Select all

<picture>
	<source type="image/webp" srcset="/images/webgraphics/solutions.webp" />
	<img src="/images/webgraphics/solutions.jpg" alt="solutions" width="275" height="184" />
</picture>
The <img> tag has to be last since it's the tag used to display whatever the browser chooses from the possible sources to display. No <img> tag, no picture on the page. ;) That also means no need to add picture to your style sheet, since the <img> tag does all the work.

Secondly, Firefox seems to have a bug with type when using webP, which I need to bug. Although it works perfectly in Chrome, Firefox will fail to show any image, including the failover one in the <img> tag. Considering the current usage of Chrome versions that can view the picture element is about .17% and Firefox is .02% (and requires a change to config) according to Caniuse.com, you might be safe implementing this for now.

I had found a sample code that used src with type, instead of srcset, and Firefox renders it perfectly, but Chrome ignores the webP type and instead displays the jpg (possibly the failover img). Things like that just make it much harder to implement.

Finally, don't forget this little jewel, which will shrink an image to the viewport:

Code: Select all

<style type="text/css" media="all">
	img{max-width:100%;height:auto}
</style>
I'll report back when I get my responsive slider working (like my first example). Then maybe I'll work on editing some code.

(edited to remove invalid statements) :?
Last edited by RSteinwand on Mon Sep 29, 2014 8:05 am, edited 1 time in total.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3222
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Support for picture element?

Post by Albert Wiersch » Fri Sep 26, 2014 3:40 pm

Thanks Rick. I'll really appreciate the feedback and suggestions. I'll look over this again before the release of v15.
Image
Albert Wiersch

Post Reply