A blurhash is a compact representation of an image than can be decoded to create a blurred image preview.
My product manager at Etsy asked for ways to make the app feel faster. I proposed several ideas, including using blurhash to improve the perception of speed for our users. We decided this idea was worth testing.
I built a prototype of this in our iOS app, which product and design used to decide on the
At a high level, the steps we took were:
- Add an ansynchronous step to image upload that calculates a blurhash on upload
- Encode a blurhash for every actively-used image in storage (backfill)
- Add blurhash to the API response for key endpoints
- When the blurhash is present in the API response, decode it on the client to display a blurred image preview while the image is loading
- Measure the results in an A/B test
This was a particularly large change, because we needed to touch many API endpoints (every endpoint that delivered images) in this experiment. We also needed to coordinate with other teams to make sure that new changes included our experiment.
This experiment was revenue positive and UX improvement.
Thanks to Han Cho and Kate Matsumoto for giving me the time and space to implement this.