- const base = `https://codepen-chriscoyier-bucket.imgix.net/`;
- const alt = 'Baby sleeping on bed with pillows in background.';

picture
  source(srcset=`${base}baby.jpg?w=2000`, media="(min-width: 1600px)")
  source(
    srcset=`${base}baby.jpg?w=1500&h=500&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.68&fp-z=1`,
    media="(min-width: 600px)"
  )
  source(
    srcset=`${base}baby.jpg?w=500&h=500&fit=crop`,
    media="(min-width: 500px)"
  )
  img(
    src=`${base}baby.jpg?w=320&h=320&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.68&fp-z=2`,
    alt=alt
  )
View Compiled
img {
  width: 100%;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.