Image zoom

Brad
Medium.design
Published in
2 min readAug 10, 2014

--

Medium is about reading great content, and images dramatically enhance stories, so we set out to create the best image zoom experience on the web. It’s not easy for authors to find great imagery for their stories. We wanted to build an experience that would reflect their efforts in a seamless and delightful way.

Click to zoom

Our goal was to build an intelligent zoom experience. Why zoom an image unless there’s more to see? If the author uploaded a larger image than what we show inline, a click will start a seamless animation into an immersive, full-screen view.

Don’t lose your place

Your progress through a story is important. When you interact with images we maintain your scroll position and make it apparent that your state has not changed. We simultaneously fade out the content and zoom the image for a smooth visual experience.

Take me home

Dismissing image zoom is my favorite interaction. You can click anywhere to exit the zoomed state or, more interestingly, just scroll away as if you were continuing past the image. Give it a try:

Ready when you are

Another significant detail is the lack of loading indicators — we’re always ready to zoom. We prepare all images to zoom right after the content has loaded. If the full-size image isn’t loaded, we transition the original image and replace it when the detailed image is ready. We don’t allow your connection speed to affect the animation, creating an ultra-snappy interaction. More often than not, the images are swapped before the transition comes to an end.

Image zoom was a collaboration between @fat and myself in the Summer of 2013.

--

--