New improved Hyper Zoom

Last month SmartFrame released a completely revamped version of its Hyper Zoom function, which now offers magnification beyond 8K resolution and works much faster across a variety of browsers and devices. Today I discuss practical applications of this function, combined with other benefits of the SmartFrame platform.

Let’s first have a look at the typical experience of viewing an online image

In today’s world of phone cameras and fast changing internet sites, the experience of viewing a photograph is very different to visiting an art gallery or even browsing a family photo album. Unfortunately, most of the time we see images which are size of a matchbox. The image is there for a reason, to tell a story or sell a product so this experience is likely to hurt your business, drive less traffic to your site or just simply creates a mundane, forgettable experience. We won’t change how the internet works, but we can definitely improve how photographs are presented to your website visitors.

Most online platforms for sharing photography usually limit the image size to the browser window size. On large monitors users are very likely to have more than one window in view. This is the most common way in which users can see the image:

Even if they decide to maximise the browser window, screen resolution and browser toolbar limits the level of detail they see. In addition, most of the blogs using photos would limit the width of the text because it’s very difficult for us humans to read long lines (that’s exactly why newspapers and magazines break text into columns). Images are very often aligned with text, so the average width of the image is often in a region of 1200 pixels, let’s see how small the image looks on my 4k monitor:

Webmasters can add tools to enlarge the image but there are a few problems:

  1. It takes time and effort to add “enlarge image” buttons, especially if you want the image to be high quality across devices and load quickly.
  2. Achieving optimum resolution across variety of screens requires use of sourceset and @2x images which have to be coded and relevant assets have to be manually generated. WordPress does it semi-automatically but its flexibility is limited. Anyway, in most cases the image resolution matches the screen or device approximately, but not exactly.
  3. Most commonly the image is only as large as the current browser window.

SmartFrame provides out-of-the-box viewer which adds the following functionality to your image. The best part is that it does all of it automatically:

  1. Generates pixel perfect image for every screen resolution, including retina and mobile
  2. Updates the image when the resolution changes (handset is rotated or browser window is resized)
  3. Loads small thumbnail while the full resolution image is being transferred
  4. Prepares and preloads image assets needed for different zoom levels
  5. Adds full screen and zoom icons (fully customisable)
  6. Prevents zooming more than the maximum asset resolution
  7. Collects statistics for the above

Detail view with JPEG format

Let’s take an example. The example image was taken with Sony Alpha 7R III with 42 Megapixel sensor, which due to a very attractive price and incredible image