- const base = `https://codepen-chriscoyier-bucket.imgix.net/baby.jpg`;
- const alt_text = `Baby Sleeping`;

- const large_params = `h=1100&w=2000&fit=crop&fp-x=0.55&fp-y=0.67`;
- const medium_params = `w=1200&fit=crop&crop=focalpoint&fp-x=0.55&fp-y=0.67&fp-z=1.4`;
- const small_params = `h=600&w=600&fit=crop&crop=focalpoint&fp-x=0.55&fp-y=0.64&fp-z=2.5`;

picture
  source(srcset=`${base}?${large_params}`, media="(min-width: 1000px)")
  source(srcset=`${base}?${medium_params}`, media="(min-width: 600px)")
  img(src=`${base}?${small_params}`, alt=alt_text)
View Compiled 
img {
  max-width: 100%;
}
body {
  margin: 3rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.