4 ms·
I've previously experimented with image loading components for fun. Similarly, I implemented the material design image loading spec for the web a few years ago.
by TheAceOfHearts 8y ago
I've previously experimented with image loading components for fun. Similarly, I implemented the material design image loading spec for the web a few years ago.
This may come off a bit negative, but I disagree that it provides a better UX. I don't know if I've grown jaded or cynical, or if we just have drastically different preferences. I think embedding a thumbnail with a link to the full-sized image is better; it's certainly simpler. In general, I don't think the tradeoffs are worthwhile.
Some thoughts:
* There is no mention of module size. That can have a big effect on your initial pageload. Of course, this depends a lot on the context in which you are using said module. It might still be sensible for certain kinds of galleries, perhaps less so for an application for which images are of secondary concern.
* The discussion on performance is too focused on mobile and having very few images on the screen at the same time. What about desktop? What if you plan on having more than two images on-screen at the same time? Doing a comparison with traditional img tags on a grid-view gallery with 100 images would be much more interesting.
* I think it would be genuinely interesting to see what the real-world experience would be if you took a popular website and dropped this in. I do not believe that it would often be an improvement. The two sites that come to mind are 4chan and Reddit.
- stereobooster 8y agoModule size is ~7Kb. A detailed comparison is here https://github.com/stereobooster/react-ideal-image/blob/master/other/idealimage-vs-img.md https://github.com/stereobooster/react-ideal-image/blob/mast... > The discussion on performance is too focused on mobile Because mobile users have a slower internet connection and worse CPUs. What kind of performance are you talking about? If load performance, then this component uses well-established techniques (not invented by me), like lazy-loading (known since jQuery times), srcset (web standard), LQIP (used by Facebook, Medium), width, height (required for all blocks in AMP). If you are talking about JS performance like frame rate or paint or "junk" on the scroll - I didn't measure it but didn't say it was the first target either.