An Almost Ideal React Image Component

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with:

  • Placeholder space (and then flexible responsive styles after loading)
  • Low-quality placeholder images
  • Responsive images syntax (srcset)
  • Image formats (e.g. using WebP when you can)
  • Click-to-load on bad network connections
  • Better UX for loading errors, with translatable copy

That’s not even all of it. So much to think about with poor little <img>. I enjoyed Alejandro Sanchez’s response:

Direct Link →