Support and Documentation

Image delivery

When a browser or mobile app renders an image in a web page, the chances are very high that the image you see is not the photographer's original. Commercial-grade websites deliver different versions of the image in different contexts.

Examples of contextual rendering

Websites deliver images differently in different contexts, usually by cropping and resizing the original image. The following sections describe a few common examples of contextual rendering.

Contextual rendering in Google searches

Google returns images in different contexts: thumbnail and preview. The following example is taken from a Google search for birthday cakes. The thumbnail on the left is different from the preview on the right.

  • The thumbnail is smaller than the preview.

  • The thumbnail is cropped from the bottom, so you see less of the serving dish.

Thumbnail context in Google image search
Figure 11. Thumbnail context in Google image search

Preview context in Google image search
Figure 12. Preview context in Google image search

Contextual rendering in scholarly sites

The following screen shot is taken from the entry for Rene Magritte's painting The Treachery of Images on WikiArt. In the context of the entry, the image has a low resolution and a small size. The mouse pointer has the shape of a magnifying glass, indicating you can click on the image to view it in a different context, one much larger and with higher resolution.

Contextual resolution on shopping sites

Shopping sites use complex contextual rendering. In the following example, there are renderings of the same image in three different contexts:

  • A small, black-and-white, background image of the shoe.

  • A small, color image under the mouse pointer.

  • A large, high-resolution image showing the detail under the mouse pointer.

How Brightspot delivers images

When you upload an image to Brightspot, the image remains in its original form without any cropping or resizing. When a visitor views one of your pages that contains the image, Brightspot does the following:

  1. Determines the context required for the page.

  2. Crops, resizes, and otherwise modifies the image as required by the context.

  3. Delivers the modified image to the visitor's web browser.

  4. Saves a copy of the modified image for subsequent visits to the page.

When cropping an image to a specific size, Brightspot crops around the original image's center. In the following example, the image to the left is 594 × 370 pixels, and the sunset is to the far right. In some contexts, Brightspot needs to deliver the image cropped to 224 × 246. Because the default crop is around the image's center, the sunset is lost.

Original image
Figure 13. Original image

Cropped image
Figure 14. Cropped image

To prevent such situations, you can set a focus point inside an image. Brightspot then crops the original image around the focus point. For example, if you place the focus point on the sunset, Brightspot applies the 224 × 246 crop around the sunset, keeping the sunset as close to the center as possible.

Image cropped around focus point
Figure 15. Image cropped around focus point