Support for picture element?
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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.
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
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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/
Opera's guide is also very good: https://dev.opera.com/articles/responsive-images/
Rick
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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.
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
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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.
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
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Support for picture element?
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.
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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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....
Both hi-res displays with Chrome. I'd be interested in what device is being served the bigger image....
Rick
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Support for picture element?
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.
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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Support for picture element?
Hi Rick,
Yep, that's it. It did fetch the "2x" images.
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.
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 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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.
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
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Support for picture element?
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.RSteinwand wrote:2x with srcset is too vague and means little to me. But I guess you use what works.
Of course every site is different, and the audience is different, and the purpose/function/meaning/usage of the image is different, etc.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
I like <picture>'s support for webp images, which can be nearly half the size of an optimized jpg or png.
Rick
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Support for picture element?
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.RSteinwand wrote:I like <picture>'s support for webp images, which can be nearly half the size of an optimized jpg or png.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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
http://getpaint.net
http://forums.getpaint.net/index.php?/t ... 014-10-19/
http://en.wikipedia.org/wiki/WebP#Support
Rick
- RSteinwand
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
- Contact:
Re: Support for picture element?
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:
This is the invalid media I had previously (2 min-widths should have been max):
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)?
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>
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>
Also wondering if you check for the image size in srcset (the 1200w in the first image)?
Rick