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: 562
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Support for picture element?

Post by RSteinwand » Mon Sep 29, 2014 8:16 am

Hi Albert,

I updated my previous post to remove inaccuracies in my statement about using "src" instead of "srcset" when using "type" (like for webP). Turns out that fixed Firefox, but broke Chrome. An image was displayed in all circumstances, but using the jpg image not the webP, which was the reason for adding it.

I should have added this to my previous post:
When using media queries for different image sizes and things don't work as they should, you have to make sure you have your media queries in the correct order or you'll get weird results, like a small image when you want a larger one. For more complex picture elements like my example in the first post, where multiple image sizes AND using type=webP, get it to work without the type statements first. Test it in Firefox (when it works) and Chrome, then add type later. It'll save you a lot of headaches.

Now to figure out how to bug the type=webP problem with Mozilla.
Rick

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

Re: Support for picture element?

Post by RSteinwand » Thu Oct 02, 2014 7:30 am

Here's a pretty good guide to implementation: https://html.spec.whatwg.org/multipage/ ... ed-content

Opera's guide is also very good: https://dev.opera.com/articles/responsive-images/
Rick

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

Re: Support for picture element?

Post by RSteinwand » Tue Oct 07, 2014 5:43 pm

The Mozilla picture "type" bug has been bugged: https://bugzil.la/1045532

more:
https://support.mozilla.org/en-US/quest ... wer-638012

So, the examples I posted should work with Mozilla when they fix this. I'll update this post when it's fixed.

In other words, as long as you don't try to use "type" to add webP or other image types, it should work as intended in both browsers.

You can use webP type as long as the user isn't using Mozilla beta with srcset config enabled, which results in no image. By default the setting is disabled for srcset and picture.
Rick

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

Re: Support for picture element?

Post by RSteinwand » Mon Oct 27, 2014 1:10 pm

The picture element problem in Firefox has been fixed and closed as of 10/24.

The changes don't appear to be in the latest Aurora build I just updated today and I don't feel like installing a nightly build.
Rick

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

Re: Support for picture element?

Post by Albert Wiersch » Wed Oct 29, 2014 4:58 pm

I have sent a BETA to Rick with "picture" element support. If anyone else would like to try it, then please send me a private message.

Also, I have experimented with the "srcset" attribute a little and added a couple of higher resolution images to https://www.htmlvalidator.com/. On the main page the screenshot thumbnail on the left side of the page is now available in "high res" and the "<html> validator" logo at the top of the pages is as well. I tested this with my Nexus 7 and it did fetch the higher resolution image and it does indeed look sharper on the screen.

I'm also watching the server logs and it looks like a small number of people have browsers that are fetching the higher resolutions versions of those images.
Image
Albert Wiersch

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

Re: Support for picture element?

Post by RSteinwand » Wed Oct 29, 2014 9:34 pm

Laptop or my quad HD LG G3, with either one I only get the 320 image. :?

Both hi-res displays with Chrome. I'd be interested in what device is being served the bigger image....
Rick

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

Re: Support for picture element?

Post by Albert Wiersch » Wed Oct 29, 2014 10:04 pm

Hi Rick,

I see some hits on the web log that might be you (using Android 4.4.2?)... are you sure you didn't get the "*-2x.png" images, as those are the higher resolution images? If you want to share your IP number I can confirm with my server log.

I would think Chrome on an LG G3 should definitely fetch and use the higher resolution images.
Image
Albert Wiersch

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

Re: Support for picture element?

Post by RSteinwand » Thu Oct 30, 2014 6:33 am

Try 67.60.246.178

I was on wifi for phone and PC.
Rick

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

Re: Support for picture element?

Post by Albert Wiersch » Thu Oct 30, 2014 8:31 am

Hi Rick,

Yep, that's it. It did fetch the "2x" images.

Code: Select all

67.60.246.178 - - [29/Oct/2014:21:28:18 -0500] "GET /png/screenshots/v140/html-validator-main-320-2x.png HTTP/1.1" 200 256668 "-" "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2202.3 Safari/537.36"
67.60.246.178 - - [29/Oct/2014:21:30:44 -0500] "GET /png/html-validator-2x.png HTTP/1.1" 200 114011 "https://www.htmlvalidator.com/help.php?m=2&h=srcset" "Mozilla/5.0 (Linux; Android 4.4.2; VS985 4G Build/KVT49L.VS98510B) AppleWebKit/537.36 (KHTML, like G"
67.60.246.178 - - [29/Oct/2014:21:30:47 -0500] "GET /png/screenshots/v140/html-validator-main-320-2x.png HTTP/1.1" 200 256668 "https://www.htmlvalidator.com/" "Mozilla/5.0 (Linux; Android 4.4.2; VS985 4G Build/KVT49L.VS98510B) AppleWebKit/537.36 (KHTML, l"
I asked a friend to try it out and his Android phone also fetched the higher resolution images and he said they did look sharper than the desktop version when he zoomed in.

I do like how easy it was to supply these higher-resolution images using the "srcset" attribute, but the vast majority of visitors will not see or use them because they won't be using high PPI displays. They'll most likely be visiting from browsers on Windows computers, and of course very few of those have high PPI displays right now (but that could change).

I would think that Mac desktop users on "Retina" displays should see the higher resolution images as well, and those displays are much more common.
Image
Albert Wiersch

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

Re: Support for picture element?

Post by RSteinwand » Thu Oct 30, 2014 8:40 am

Thanks for researching that. = )

I prefer to provide the smallest file size for the screen width by using the less confusing picture element based on image size. Browser support is lacking now, but can only improve.

2x with srcset is too vague and means little to me. But I guess you use what works.
Rick

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

Re: Support for picture element?

Post by Albert Wiersch » Thu Oct 30, 2014 9:06 am

RSteinwand wrote:2x with srcset is too vague and means little to me. But I guess you use what works.
I agree it is vague but I like that it is left up to the browsers to decide whether to fetch it or not, and that it was easy to implement (relatively simple), so I think it's a better solution for my "needs" right now.

Of course every site is different, and the audience is different, and the purpose/function/meaning/usage of the image is different, etc. :D
Image
Albert Wiersch

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

Re: Support for picture element?

Post by RSteinwand » Thu Oct 30, 2014 9:16 am

I like <picture>'s support for webp images, which can be nearly half the size of an optimized jpg or png. :mrgreen:
Rick

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

Re: Support for picture element?

Post by Albert Wiersch » Thu Oct 30, 2014 9:18 am

RSteinwand wrote:I like <picture>'s support for webp images, which can be nearly half the size of an optimized jpg or png. :mrgreen:
Sounds great... I have not done much with webp but that is indeed a big plus, especially when high resolution images can be so large. :D
Image
Albert Wiersch

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

Re: Support for picture element?

Post by RSteinwand » Thu Oct 30, 2014 9:24 am

I use Paint.net with the webp plugin to create webp images. You can specify the compression to get the right quality vs file size you need.

http://getpaint.net
http://forums.getpaint.net/index.php?/t ... 014-10-19/

http://en.wikipedia.org/wiki/WebP#Support
Rick

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

Re: Support for picture element?

Post by RSteinwand » Wed Dec 03, 2014 9:50 am

Hi Albert,

For a few weeks I've been trying to figure out why the waterfall for my 6 banner pics (webp & jpg in picture element) showed only one webp image and the rest jpgs. Today I played around with it more and figured out the problem, my media tags.

Turns out I had added another resolution to the mix, 1024px wide, because that's the resolution used by webpagetest.org and I wanted to see if that would get rid of the recomendation to resize and optimize my images. Turns out I copied and pasted an existing image and forgot to change the min-width I use for the first image to a max-width I use for all the other images all but the first image. Is that hard to check in CSE?

This is one of my 6 banner images:

Code: Select all

<picture>
	<source type="image/webp" media="(min-width:1025px)" srcset="/images/slider/payments.webp 1200w">
	<source type="image/webp" media="(max-width:1024px)" srcset="/images/slider/payments_x1024.webp 1024w">
	<source type="image/webp" media="(max-width:800px)" srcset="/images/slider/payments_x800.webp 800w">
	<source type="image/webp" media="(max-width:400px)" srcset="/images/slider/payments_x400.webp 400w">
	<source media="(min-width:1025px)" srcset="/images/slider/payments_x1200.jpg 1200w">
	<source media="(max-width:1024px)" srcset="/images/slider/payments_x1024.jpg 1024w">
	<source media="(max-width:800px)" srcset="/images/slider/payments_x800.jpg 800w">
	<source media="(max-width:400px)" srcset="/images/slider/payments_x400.jpg 400w">
	<img src="/images/slider/payments.jpg" width="1200" height="308" alt="Direct Payment">
</picture>
This is the invalid media I had previously (2 min-widths should have been max):

Code: Select all

<picture>
	<source type="image/webp" media="(min-width:1025px)" srcset="/images/slider/payments.webp 1200w">
	<source type="image/webp" media="(min-width:1024px)" srcset="/images/slider/payments_x1024.webp 1024w">
	<source type="image/webp" media="(max-width:800px)" srcset="/images/slider/payments_x800.webp 800w">
	<source type="image/webp" media="(max-width:400px)" srcset="/images/slider/payments_x400.webp 400w">
	<source media="(min-width:1025px)" srcset="/images/slider/payments_x1200.jpg 1200w">
	<source media="(min-width:1024px)" srcset="/images/slider/payments_x1024.jpg 1024w">
	<source media="(max-width:800px)" srcset="/images/slider/payments_x800.jpg 800w">
	<source media="(max-width:400px)" srcset="/images/slider/payments_x400.jpg 400w">
	<img src="/images/slider/payments.jpg" width="1200" height="308" alt="Direct Payment">
</picture>
If you were going to check for invalid media tags, you'd have to first break out the image types, then check the min-max for validity.

Also wondering if you check for the image size in srcset (the 1200w in the first image)?
Rick

Post Reply