4 ms·

I would not call this a "best practice", but simply an alternative. Progressively loading photos in that manner is not a good user experience either. The firs

I would not call this a "best practice", but simply an alternative. Progressively loading photos in that manner is not a good user experience either. The first paint is often quite jarring, especially, as pointed out in the article, over 90% of photos simply don't load this way. For content such as photos that are contained within some sort of layout, it would be better to have a placeholder there that is the same frame as the final image size, then have the final image appear upon completion.

neumann_alfred 14y ago
The first paint is often quite jarring To me it's still better than nothing. Just like I don't enjoy websites that only paint after they're done loading.
- weixiyen 14y ago
  Is it really better than a loading indicator? Just use the title link as a reference. First you see chicken wings, then all of a sudden 6 piglets. The transition paint is really meaningless.
  - neumann_alfred 14y ago
    Is it really better than a loading indicator? For me, yes. It is a loading indicator, without any additional "noise". Also, the second-to-last pass is often quite good, if not indistinguishable from the last one. So you have the full image already, while more details get filled in, instead of first having the top, then the middle, then the bottom, and to me that's less "jarring".
aerobson 14y ago
It's a best practice because it gives the user as much possible as soon as possible, and because there are file size savings. When you say it would be better to have a placeholder there that is the same frame as the final image size, then have the final image appear upon completion isn't that the quality of progressive jpegs?
- weixiyen 14y ago
  I think the main issue I have is that if there is a situation where you actually notice the paints happening on a progressive image for it to even matter, you might want to rethink the level of quality of the photo being delivered to that device over that connection speed. The way I'd approach photos is this - no image should take more than 3 seconds to load, and anything between 1-3 seconds has a small progress bar (mobile) or just an empty frame with a thin border (mobile thumbnails or any web photos). I'd take into account device, connection speed, CDNs, jpeg compression to ensure that I meet the time requirement for the full image to load. If the full image isn't consistently loading within that timeframe, I've already lost and need to rethink the quality of the images being delivered or if I'm designing the right app / site, because it's going to be a terrible user experience either way, progressive jpeg or not.

neumann_alfred 14y ago

The first paint is often quite jarring To me it's still better than nothing. Just like I don't enjoy websites that only paint after they're done loading.

weixiyen 14y ago
Is it really better than a loading indicator? Just use the title link as a reference. First you see chicken wings, then all of a sudden 6 piglets. The transition paint is really meaningless.
- neumann_alfred 14y ago
  Is it really better than a loading indicator? For me, yes. It is a loading indicator, without any additional "noise". Also, the second-to-last pass is often quite good, if not indistinguishable from the last one. So you have the full image already, while more details get filled in, instead of first having the top, then the middle, then the bottom, and to me that's less "jarring".

aerobson 14y ago

It's a best practice because it gives the user as much possible as soon as possible, and because there are file size savings. When you say it would be better to have a placeholder there that is the same frame as the final image size, then have the final image appear upon completion isn't that the quality of progressive jpegs?

weixiyen 14y ago
I think the main issue I have is that if there is a situation where you actually notice the paints happening on a progressive image for it to even matter, you might want to rethink the level of quality of the photo being delivered to that device over that connection speed. The way I'd approach photos is this - no image should take more than 3 seconds to load, and anything between 1-3 seconds has a small progress bar (mobile) or just an empty frame with a thin border (mobile thumbnails or any web photos). I'd take into account device, connection speed, CDNs, jpeg compression to ensure that I meet the time requirement for the full image to load. If the full image isn't consistently loading within that timeframe, I've already lost and need to rethink the quality of the images being delivered or if I'm designing the right app / site, because it's going to be a terrible user experience either way, progressive jpeg or not.