Adaptive Images for Optimizely

Web editor guide

See the developer documentation for technical information.

Introduction

This add-on enables you to search for images in different image sources, such as your DAM (Digital Asset Management) system, and use those images on your website. You may select different images for different screen sizes, and optionally adjust image croppings to perfectly fit your website design:

Search images

Select image source and options as preferred:

Some image sources support listing images without searching. For others, enter a text to search for:

A red icon indicates there is copyright information available, otherwise a blue icon is displayed if there is other metadata available. Click the icon to display or edit meta data, depending on permissions.

Preview images

Click a thumbnail to preview it:

Note: For tall (portrait) images, you may need to scroll inside the preview to see the entire image. You may also double-click the preview to open the original image in a new tab. Close the preview by clicking the top-right "X" icon.

Select images

You can use one image for all screen sizes, or select different images for each.

Same image for all screen sizes

Drag an image from the search result and drop it on the empty square:

Screen size-specific images

To use an image for a specific screen size, drag it from the search result to the desired form factor:

Note: If editing in preview mode, you may not see changes applied if you're previewing a different screen size. For example, for the change above to be visible in preview, we need to preview the content as it appears on a mobile device.

Clear images

To clear all images from a property, click the top-right icon:

Upload images

If the selected image source option supports uploads, an additional area is displayed at the bottom.

Click (or drag and drop an image from your computer) to upload:

After upload you're able to specify metadata for it:

Note: Actual metadata properties depend on the selected image source.

Crop images

Image cropping can be adjusted for each screen size individually. Hover over a thumbnail and click the scissors icon to open the crop dialog:

If there are size and/or proportions constraints, they are described beneath the image.

Zoom in to crop to a specific part of the image using the mouse scroll wheel, the slider, or the plus and minus keys.

How images are displayed on the website

As a web editor you select images, optionally cropping them as needed. Below is an example of such an image being displayed wide on larger screens and square on handheld devices:

Note: It is ultimately the website's templates that determine how, when, and in which sizes, images are displayed. The minimum size requirements (if any) are there to ensure an image can be displayed in all applicable sizes without becoming blurry.