Understanding gatsby-image (Part 2): Responsive images 101

  • <picture> with <source> as child elements
  • <img> with “srcset” and “sizes” attribute
  • Using the browser devtools to find out which image files are really fetched by the browser

How does the <picture> element work?

How does <img> with the srcset and sizes attribute work?

<img 
srcset=
"my-img-280w.jpg 280w,
my-img-440w.jpg 440w,
my-img-800w.jpg 800w"
sizes=
"(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
/>

Another option: <img> with srcset but without sizes

srcset=
"my-img-300w.jpg 1x,
my-img-450w.jpg 1.5x,
my-img-600w.jpg 3x"

When should I use <picture> and when <img> & sourceset?

Testing: How to check which images are REALLY requested by the browser?

  • Open your browser’s developer tools “Network” Panel and checkout which file was fetched over the network
  • Open your browser’s developer tools “Inspector” or “Elements” panel: Select the img element and type into the Browser console: $0.currentSrc ($0 stands for the currently selected element)

👉 Continue with Part 3 of this series about gatsby-image: “Controlling sizes, breakpoints and styling”

--

--

A mix of Frontend Development, Machine Learning, Musings about Creative AI and more

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alexa Steinbrück

Alexa Steinbrück

A mix of Frontend Development, Machine Learning, Musings about Creative AI and more