Published
Edited
Feb 22, 2018
Insert cell
Insert cell
width
Insert cell
Insert cell
html`<img srcset="https://via.placeholder.com/1000x500 1000w,
https://via.placeholder.com/750x375 750w,
https://via.placeholder.com/500x250 500w"
sizes="${width}px"
src="https://via.placeholder.com/500x250"
alt="A placehodler image" />`
Insert cell
// this fails in Safari!? Nothing shows up!? I wonder why!
// do I want to explain the whole caching behavior of chrome and why this won't work like you probably expect it to – and that that's for the best? maybe...
// do I want to include an example of what to do if you want to style your image to be smaller than full width? probably?
Insert cell
Insert cell
Insert cell
// placehold.it example
// (which has to kind-of-manually maintain a constant aspect ratio)
html`<img src="https://via.placeholder.com/${ width * window.devicePixelRatio }x${ ( width * window.devicePixelRatio ) / 2 }"
alt="A placehodler image" />`
Insert cell
Insert cell
// Cloudinary example
// Round the width to the nearest 128-pixels to limit the number of resources requested.
// This boosts the likelyhood of cache hits and lightens storage load
html`<img src="https://demo-res.cloudinary.com/w_${ Math.round( width / 100) * 100 }/sample.jpg"
alt="A bee on a flower" />`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more