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