New Image Element

Properly displaying images on websites has always been a challenge. Now, with new devices and screen resolutions such as retina displays the challenge is even greater. Today, we’ve launched a new element that puts our new Cloud Hosted Web platform even further ahead of our competition.

See the video below.

AdaptiveImage Technology: The Right Size Every Time
Simply drop your full-resolution image into the new Image Element and the platform will display it at the optimal size for its placement on your site. Not only that, but the platform will also detect if the user has a retina display and, if so, will upgrade the resolution accordingly. Drag the Image Element to a new region and its size is automatically updated. The Image Element even accommodates responsive design, resizing the image dynamically for browsers at any width on any device, including mobile phones.

The new image element with a single image automatically output at optimal dimensionsThe Image Element’s AdaptiveImage technology goes a step further with a mobile-first, two-step approach to image display. When a page is requested, the Image Element immediately loads a small-scale (480px wide) version of the image, sized to fill that space needed. Then, if a larger image is needed, it swaps in the higher-resolution alternative. This all happens behind the scenes and goes largely unnoticed, but the approach offers several advantages.

First, it ensures that mobile devices get their images faster and with less bandwidth usage. Second, because the smaller image doesn’t require JavaScript to load, this technology ensures that an image is displayed even on browsers that don’t have JavaScript enabled. Most platforms rely exclusively on JavaScript and leave non-JavaScript browsers with no image at all. But the Image Element provides fine-tuned image display for browsers that support it, while still ensuring that all browsers still display the image, even without JavaScript.

You can disable our AdaptiveImage technology by changing the element’s settings. Doing so will cause the Image Element to output the image file exactly as it was uploaded in all cases.

Drag and Drop Right Onto Your Page
Another big upgrade with the Image Element is the ability to drag and drop one or more images right onto your page. Whenever you add an Image Element, you’ll see a drop zone which invites you to drag in your images. The drag and drop functionality is available for all browsers that support it, which is most all modern browsers except for Internet Explorer.

Of course, you can also simply click the drop zone to upload through a file system as well. Uploading this way has been improved to allow the selection of multiple images in most browsers by using cmd+click (ctrl+click in Windows).

Single Image or Photo Gallery
The new Image Element has replaced the Photo Gallery Element, but includes all the same functionality. Uploading a single image will cause the Image Element to function as described above. Uploading multiple images will automatically convert it to Photo Gallery mode. If needed, you can force a single image to behave as a Photo Gallery by checking the “Force Photo Gallery” box on the advanced tab of the element’s settings.