Placeholder per breakpoint

[jackhkmatthews]

When image ratios change at each breakpoint having only only fixed ratio placeholder can be jarring for the user on load.

Would it be plausible to load a placeholder for each breakpoint? Perhaps each image has x1, x2 and placeholder?

[edoparearyee]

Yes I had been thinking about this too, maybe something like:

const image: ResponsiveImage = {
  placeholders: [
    {
      size: 'xs',
      x1: 'http://via.placeholder.com/40x40?text=placeholder+xs+1x',
      x2: 'http://via.placeholder.com/80x80?text=placeholder+xs+2x'
    },
    {
      size: 'md',
      x1: 'http://via.placeholder.com/76x40?text=placeholder+md+1x',
      x2: 'http://via.placeholder.com/153x80?text=placeholder+md+2x'
    },
    {
      size: 'lg',
      x1: 'http://via.placeholder.com/102x40?text=placeholder+lg+1x',
      x2: 'http://via.placeholder.com/204x80?text=placeholder+lg+2x'
    }
  ]
  fallback: 'http://via.placeholder.com/400x400?text=fallback',
  images: [
    {
      size: 'xs',
      x1: 'http://via.placeholder.com/400x400?text=xs+1x',
      x2: 'http://via.placeholder.com/800x800?text=xs+2x'
    },
    {
      size: 'md',
      x1: 'http://via.placeholder.com/768x400?text=md+1x',
      x2: 'http://via.placeholder.com/1536x800?text=md+2x'
    },
    {
      size: 'lg',
      x1: 'http://via.placeholder.com/1024x400?text=lg+1x',
      x2: 'http://via.placeholder.com/2048x800?text=lg+2x'
    }
  ]
};

The only issue I see with this is when server side rendering we wouldn't be able to set the correct placeholder image since we don't know the browser width on the server. However maybe the express exposes this information in the Request object.