Last modified: 2014-10-02 13:51:17 UTC
This should be perfect for an A/B test with random users. Goal: Find out which method feels fastest. A: Show them the loading animation with the current blur effect. B: Just remove the blur effect and let the browser decide how to scale the thumbnail (usually bicubic). That's what Google Maps does, by the way. C: Use nearest-neighbor image rendering[1]. Yes, I really mean that. That's a very common trick in game development, made popular (but not invented) by Minecraft. There is a chance that big, square pixels make a better, less distracting user experience than any type of interpolation. D: Remove the thumbnail and just show the empty, dark background till the image is loaded. Maybe add a progress spinner like Lightbox does. Personally I think C would feel faster and less distracting. The current blur effect does have strange effects to my brain (and I have read and heard similar stories from other users): My eyes immediately start refocusing the obviously out-of-focus image but can't work it out. This is really distracting and makes the loading time feel longer than it is because I'm so focused on something that I should not care about. [1]https://developer.mozilla.org/en/docs/Web/CSS/image-rendering
I don't see how something like this could be A/B tested. We could use some sort of a microsurvey (which does not exist at the moment, although the UX research group intends to develop something like that as I understand), ask the user to rate loading speed 1-10, but there are just so many factors influencing loading speed, from network connection to screen size to image details to cache warmness... we would require a huge amount of data to make this statistically valid. Or we could do controlled user tests, in which case we can set up an identical environment, but it is resource-expensive and does not scale; and again, getting just 2-3 tests is not necessarily representative.
Discussed at https://meta.wikimedia.org/wiki/Talk:Community_Engagement_%28Product%29/Media_Viewer_consultation#Performance_of_loading_images
(In reply to Thiemo Mättig from comment #0) > C: Use nearest-neighbor image rendering[1]. Yes, I really mean that. That's > a very common trick in game development, made popular (but not invented) by > Minecraft. There is a chance that big, square pixels make a better, less > distracting user experience than any type of interpolation. Note that no current browser supports image-rendering:pixelated. (Chrome 38 will support it; no other browser vendor seems to be working on it currently.)
