How to use Picturefill

Question

I'm trying to use picturefill for my website but neither version seems to work.

In my head of the page:

<script src="js/picturefill.js"></script>

I have two images, welcome.jpg for the larger image and welcome_sm.jpg for the smaller:

<span data-picture data-alt="Welcome to Novus Landscapes">
<span data-src="images/welcome_sm.jpg"></span>
<span data-src="images/welcome.jpg" data-media="(min-width: 58em)"></span>
<noscript>
<img src="images/welcome_sm.jpg" alt="Welcome to Novus Landscapes">
</noscript>
</span>

Do I need to do anything else to get it to work? I don't see anything since Javascript is enabled on my browsers which of course eliminates the fallback due to the noscript tag.

What am I doing wrong?

My website is novuslandscapes dot com

Thanks,

John

Answer 1

There's a few things you need to do.

1. Read or watch here

2. Place the script at the bottom of your html, just before </body>

Try this syntax, copied from here

<article>
<img
     src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/small.png"
     srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/large.png 1280w,
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/medium.png 640w,
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/small.png 320w"
     sizes="(min-width: 500px) 50%, 100%"  
     alt="A woman reading">
</article>