Image Zoom design pattern

The user wants to zoom in on an image to view the details in a higher image resolution.

Image zoom used at the Danish fashion magazine Costume’s website. Zooming into pictures of clothes makes a lot of sense in the website’s context.

Use when the image size you normally show images in is not in high enough resolution to for the user to grasp the details in the image.
Use when downloading full-sized and detailed versions of a all images takes up more bandwidth than you’re interested in sharing.
Use when showing a full-sized and detailed version of an image does not fit into the website’s design.
Use when showing a full-sized and detailed version of an image will prevent the user from getting an overview of the picture.
Use when downloading a full-sized and detailed version of every image will take a disproportionate amount of download time for the user compared to the provided value. Only show images in high resolution when they are requested as all images might not be of equal interested to the user.

Provide a mechanism that allows the user to zoom an image to view its details.

From a server point of of view, an important goal is not to pre-load high resolution images before they are requested. This will help save bandwidth.

An intuitive way of doing this is to allow the user to click a spot on a given image, where after the image is zoomed. As the user clicks the image to zoom, a higher resolution image is preloaded.

Provide graphics or text that calls to action about zooming in on the image; a bare image will not suggest zoom functionality to the user.

Allowing the user to zoom in on an image allows for exploration of the image’s details. Depending on the zoom factor, showing the entire high resolution image from the beginning will not provide the user with an overview of the entire image thus removing the context of the details viewed.

By providing a zoom functionality, a user can zoom into just one area of the image that he or she is interested in. The user is in this way not bothered with the details of uninteresting parts of an image.

In the apple.com online shop, selected products are shown with a zoom feature, that allows you to zoom in on the product image to view its details in greater resolution.
MagicZoom allows you to view a zoomed-in area of a picture while still viewing the original resolution image.
The MagicMagnify zoom function shows a zoomed-in version of an image in a circle where your mouse cursor is hovering the original image. The effect enhances the feeling of exploring the details of an
When viewing a product at diapers.com it looks like any other product page in an online shop. However as soon as the mouse enters the descriptive image, the place before reserved for product and price information is now transformed into an image zoom area.