imgix Sandbox,
Image Inspector

imgix allows for image edits to be made via simple URL parameter operations, and can be difficult to construct or read the more operations get added. We needed a way to easily construct, breakdown, and share imgix URLs in a more meaningful way that can educate customers on how to use the imgix service.

Originally concieved as a URL inspector for imgix images, Sandbox provides a simple text–based user interface to experiment with the imgix API. Feed any imgix URL into Sandbox to be deconstructed and tweaked. Sandbox URLs update automatically in the browser bar, so you can share exactly what you’re looking at by copying the URL.

With Sandbox, once difficult imgix operations like compositing, text formatting and color correction are made much easier.

imgix Operation Breakdowns

When a user submits an imgix URL, Sandbox will break it down by parameter and value pairs displaying every imgix image operation on the image. This also gives the user the opportunity to adjust existing operations or add new ones.

Sandbox Image Breakdown
Sandbox breaks down imgix image URLs.

Details

We wanted to make sure that sandbox worked on phones and tablets with a fluid and responsive layout. Sandbox also has a number of hinting, and specialized features, such as additional windows for compositing multiple images with a live preview.

Sandbox shows comparisons
Sandbox displays quality comparisons
Documentation tool tips
Drop downs and param autofill
Composite and blend live editing popups

Multiple Image Compositing

Use Sandbox to compose multiple images. When a parameter is set to blend, mark, or mask, an add button will appear. Click that button to open a pop-up window to customize that composite. Any changes you make in the pop-up will be reflected back to the original image.

Sandbox & imgix Documentation

Sandbox is deeply integrated with the imgix documentation. We believe great documentation doesn’t just tell you about a service, it shows you the service in action. Click on any image in the documentation to see an example loaded up in Sandbox. While in Sandbox, hover over the question mark next to any parameter to get a short description of what the parameter does.

Sandbox in Devices
Try Sandbox