Page 2 of 4

Re: Support for picture element?

Posted: Mon Sep 29, 2014 8:16 am
by RSteinwand
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.

Re: Support for picture element?

Posted: Thu Oct 02, 2014 7:30 am
by RSteinwand
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/

Re: Support for picture element?

Posted: Tue Oct 07, 2014 5:43 pm
by RSteinwand
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.

Re: Support for picture element?

Posted: Mon Oct 27, 2014 1:10 pm
by RSteinwand
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.

Re: Support for picture element?

Posted: Wed Oct 29, 2014 4:58 pm
by Albert Wiersch
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.

Re: Support for picture element?

Posted: Wed Oct 29, 2014 9:34 pm
by RSteinwand
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....

Re: Support for picture element?

Posted: Wed Oct 29, 2014 10:04 pm
by Albert Wiersch
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.

Re: Support for picture element?

Posted: Thu Oct 30, 2014 6:33 am
by RSteinwand
Try 67.60.246.178

I was on wifi for phone and PC.

Re: Support for picture element?

Posted: Thu Oct 30, 2014 8:31 am
by Albert Wiersch
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.

Re: Support for picture element?

Posted: Thu Oct 30, 2014 8:40 am
by RSteinwand
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.

Re: Support for picture element?

Posted: Thu Oct 30, 2014 9:06 am
by Albert Wiersch
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

Re: Support for picture element?

Posted: Thu Oct 30, 2014 9:16 am
by RSteinwand
I like <picture>'s support for webp images, which can be nearly half the size of an optimized jpg or png. :mrgreen:

Re: Support for picture element?

Posted: Thu Oct 30, 2014 9:18 am
by Albert Wiersch
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

Re: Support for picture element?

Posted: Thu Oct 30, 2014 9:24 am
by RSteinwand
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

Re: Support for picture element?

Posted: Wed Dec 03, 2014 9:50 am
by RSteinwand
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 recommendation 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)?