An Almost Ideal React Image Component
Publikováno: 21.6.2018
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,
…
The post An Almost Ideal React Image Component appeared first on CSS-Tricks.
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:
The readme file for this component is amazing to teach you how to think like a front-end developer.
— Alejandro Sanchez (@alesanchezr) June 12, 2018
Direct Link to Article — Permalink
The post An Almost Ideal React Image Component appeared first on CSS-Tricks.