JavaScript
Article
By Guilherme Muller

Watch: Responsive Images with Picturefill.js

By Guilherme Muller

Working with responsive images is one of the biggest challenges front-end developers currently have when building websites. In this screencast I will show you how to use the new picture tag and srcset attribute, together with the Picturefill.js polyfill, to achieve better flexibility, lessen the page size, and serve just the right image for that resolution and device.

View the code for this screencast on GitHub.

Loading the player…

  • #VuppeForPresident!

    Great demo! Thanks. I can’t wait until this is more widely supported, but the polyfill works for now.

  • #VuppeForPresident!

    Great demo! Thanks. I can’t wait until this is more widely supported, but the polyfill works for now.

  • There is a strategy how it is &possible to recive hundred bucks/hour@ …After being without work for six months , I started earning over this site and today I am verry#happy. After 3 months$ doing this my income is around 6000 bucks/month -Check Link on MY_+ PROFILE_+}~PAGE for more information

  • There is a nice online project that+ shows how it is possible to get hundred bucks/hour@ …After being without work for six months , I started earning over this site and today I am verry happy. After 3 months doing this my income is around 6 thousand bucks/month -Check out the website on my “profile” for info

  • manumitx

    Great break down on this, However I was wondering how to approach background images using Pitcurefill, often with full viewport designs background images are used to allow cropping and overlap (background-size:cover) to happen to allow flexibility in scale. I’m concerned about having to generate 20 different images per slide depending on the device.

    • Hi manumitx,

      Picturefill only works for the picture tag and srcset and sizes attributes. It’s a polyfill for some things that are coming to HTML. As for background images, the best way is to still use media queries, as background images are CSS and have nothing to do with HTML.

      About “generating 20 images”, that’s something that doesn’t have an easy solution yet. For a recent website I had my CMS generate 4 different crops of an image for a slide. At least they’re generated automatically.

  • VOM

    Is there a simple version of this technique where cropping is not an issue rather just displaying a low and high resolution of the same image depending on the device??? Thank you for your video.

    • Allow me to show you+ a fantastic ways to earn a lot of extra dollars by finishing basic tasks from your house for few short hours a day — See more info by visiting >MY_DISQUS_PROFILE

    • Hi Vom,

      For that you can just generate the two images and use the srcset attribute right in the img tag:
      img src=’fallback.jpg’ srcset=’hires.jpg 2x lowres.jpg 1x’

  • VOM

    Thank you, Guilherme. I ssume you need the tags and the polyfil js file correct? Thank you!

    • For the example I mentioned, just a regular image tag with the srcset attribute and the polyfill. The picture tag can be used if you want to change the crop of the image depending on the situation. There are more nuances than that but that is a general idea.

  • My Uncle Noah just got an almost new cream Volkswagen Golf R by working parttime off of a pc online.visit their website on my` prof1Ie`

    $%55555555555555555555555

  • My Uncle Noah just got an almost new cream Volkswagen Golf R by working parttime off of a pc online.visit their website on my` prof1Ie`

    $%55555555555555555555555

  • Lourival Lopes

    Olá Guilherme, tudo bem?

    Parabéns pelo vídeo, claro e objetivo!

    atenciosamente,

    Lourival A, Lopes

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.