Getting Started
Demo Source Guide

Getting Started with the Demo Source

The imgix demo source allows new users to test the product’s main image rendering parameters before connecting their first storage source (opens in a new tab) (i.e., Amazon S3 bucket, Google Cloud Storage, etc.).

Accessing the Demo Source

Once you create an account, you can access the demo source by clicking the “Assets” tab in the imgix dashboard or by clicking it here (opens in a new tab).

Demo Source

Exploring Preloaded Image Assets

Within the demo source, you'll find a collection of preloaded image assets ready for transformation using imgix rendering parameters. You can edit these images in two ways:

  • Through the Image Editor interface
  • By modifying the image URL directly

Using the Image Editor interface

Using the Image Editor interface, you can easily modify and enhance images directly within the platform

Entering Image Editor Mode

  • Double-click on a photo.
  • Click on the “Editing” tab on the right-hand panel that pops out.

Editing Tab

The editing tab will have a few of imgix’s main parameters that you can apply directly to the image.

Applying imgix Parameters via Image Editor

Utilize imgix parameters in the image editor to customize and enhance your images effortlessly.

Editing the image’s size by changing the aspect ratio

Original photo

Image example before using aspect ratio

Changing the aspect ratio (opens in a new tab) to a 1:1 photo

Image example after using aspect ratio

Changing the File Format

Select the file format type you’d like to use from the fm (opens in a new tab) (format) parameter from the dropdown menu. You can see how each file type affects your image file size by looking at the file type and size information below the image.

Image example after using the format parameter

Applying ‘auto’ Parameters

Cropping the Image Focal Point

The focal point crop (opens in a new tab) function allows you to pick a point of interest when cropping an image by indicating horizontal (fp-x), vertical (fp-y), and zoom (fp-z) values.

Example: Crop to 1:1 aspect ratio while keeping the entire puppy in the frame:

Image example using focal point cropping

Then select the 1:1 aspect ratio in the “Resize Image” section.

Image example using image resizing parameter

Using AI Features

Using AI features such as generative fill (opens in a new tab), background removal (opens in a new tab), and super resolution (opens in a new tab), our platform enhances your images with ease and precision.

Generative Fill

Expand the canvas size and fill blank space with AI-generated imagery. Example: Use the prompt “puddle” to add a puddle to the image:

Image example before AI parameters

Then in the “Crop & Fill” section, select “Fill Mode” in the dropdown menu. You should see that the expanded canvas is blurred out.

Cropped Image example before AI parameters

Then toggle on the Generative Fill feature. The expanded canvas area will be filled in with pixels that make sense with this photo.

Image example with AI parameters

Use text prompts, like "puddle," to add specific elements to the image, noting it may take a few seconds to generate.

Image example with AI parameters adding a puddle

Background Removal

Remove the backdrop with a click.

Image example before the background is removed
Image example with the background removed

Background Replacement

Background replacement is a generative AI feature that intelligently removes and replaces the backdrop of your image with text prompts.

Simply toggle on the “Background Replace” feature and type in a prompt.

Image example before the background is replaced
Image example after the background is replaced

Super Resolution

Super resolution is an AI solution that upscales images under 0.25MB up to 4x of their original size while retaining image quality. Upscaling is achieved by using generative AI to improve the details of the image as we increase the image's resolution.

Note: The super resolution feature won't work as intended in the demo since the sample images provided are already high resolution. For upscaling examples, please review our super resolution documentation (opens in a new tab) or contact your Account Manager for a demo.

Editing the Image through the Image URL

With imgix, you have access to over 150 rendering parameters that you can apply to your images. You can try these other parameters out by appending them to the image URL

Accessing the Image URL

Open an image in the Image Editor, then click on “Share” and “Copy URL”.

Image example showing how to export URL

Transforming Images with URL Parameters

Paste the URL in a new browser tab and start applying parameters to the image URL

Image example showing a URL with sizing parameters

Example: Adding a border with a radius weight of 65 and a lime green color:

Lime Green Border

Example: Adding multiple parameters, such as a background replace parameter bg-replace=floral wallpaper in addition to the lime green border.

Background Replace

To learn more about how you can get started with imgix using your own visual media assets, check out our Quick Start Guide (opens in a new tab).