Anatomy of a Dynamic Media URL and how Dynamic Media delivers content

After your Dynamic Media assets are uploaded and published, you can copy an asset’s generated URL and paste it into your browser to see how the asset will appear to a customer. The following copied URL for a watch image is broken down by color to make it easier to read and understand.

Anatomy of a Dynamic Media URL
Anatomy of a Dynamic Media URL.

The first part of the URL in red is referencing the server domain itself. In this case, Dynamic Media is running on a generic server domain, which is https://s7d1.scene7.com/is/image/. It is easy to be able to look at a set of images and understand whether they are being served by Dynamic Media just by looking at the server domain. The URL is going to be fairly consistent. There are, however, some Dynamic Media customers that have switched over to a dedicated server domain where it might be name-of-your-company.scene7.com. A dedicated server domain is required for Smart Imaging.

The account name is the portion in purple. In this case, the account is called jpearldemo.

The asset ID or name, AdobeStock_28563982 is in green. Notice that the asset has no file extension such as .png or .jpg. When assets are ingested into Dynamic Media, the file extension is stripped out and a different kind of file is created: a pyramid-TIFF file. The pyramic-TIFF allows Dynamic Media to quickly create renditions on-the-fly.

And finally, there are some image processing parameters, ?wid=1000&fmt=jpeg&qlt=85, shown in yellow on the end.

The entire URL path is live. Try it.

With your browser window still open to the Dynamic Media URL and the watch image, let’s look closer at how you can create renditions of the image just by changing the URL.

Rendering the watch image through the URL

Begin by manually deleting only the image processing rules in the URL path; leave the server name, account name, and the asset ID or image name. Try it.

Now add an image processing parameter to the end of the URL. In the URL field, to the right of the image name, type ?wid=500, then press Enter. Try it.

Notice that a new rendition of the watch is generated. A key take away to understand from this simple exercise of changing the image’s width, is that the image seen is generated 100% dynamically.

Now change the width value of 500 pixels to 1000 pixels, and then press Enter. Try it.
The moment you press Enter, the browser goes back to the Dynamic Media Image Server. It generates a brand-new rendition of the watch, based on the new width value you just entered, then delivers the new image back to the browser, and caches it.

Dynamic Media has numerous image processing parameters that you can use to fine-tune your image assets on web pages. You can see a list of them here.

Now try adding a rotation parameter to the watch image. And the end of the URL path, immediately following wid=1000, type &rotate=90, and then press Enter. Try it.

The watch is still slightly skewed to the left. Change the rotate value of 90 to 92, and then press Enter. Try it.

Again, the moment you press Enter, a new rendition of the watch is generated nearly instantaneously. You can see the kind of performance that you get, which explains why Dynamic Media can deliver more than 800,000 image requests, per second, on a busy weekend, or major holiday.

While it is possible to change image processing parameters in a URL on an image-by-image basis, it is not an efficient method, especially if you have tens of thousands of images that make up your website. A much better approach is using image presets.

Fundamentals of creating image presets to render assets

There are multiple ways and places where you are going to want to create an image or have an image be available. Traditionally, a Creative goes into Adobe Photoshop, and saves out each of these different renditions as static images.

Static images
Good: static images, each one manually created.

Now imagine the Creative Director looks at the images and says,

“I really wanted this shot so that the large hand is pointing at the four, and the small hand is pointing at the 1 to make the watch dial easier to see.”

The creative would have to reshoot all new static images again.

But, with Dynamic Media, if you have different image presets, you can use those images wherever you need them. The image presets enforce standards.

Primary file approach
Best: one file with multiple renditions created on the fly using image presets, such as Search_Grid and Thumbnail.

Why use image presets?
Standards
Image presets enforce a standard image processing treatment on any image that it is requested with.
Change management
If you must change image processing, you simply edit the parameter of the existing image preset. The updated definition is automatically propagated out to all requests.

Every place that you need to have a particular type of image, for example,

  • a product detail page,
  • search grid,
  • thumbnail,
  • shopping card, or
  • hero image

You want that image delivered with the same parameters wherever they are going to be used.

For a moment, let’s look at how an image preset is created in Dynamic Media.

Creating an image preset starting with the Basic tab
Creating an image preset starting with the Basic tab.

In the example above, you can see that a new image preset was created with the name Medium. Dynamic Media uses an example, out-of-the-box image – the backpack – to help you see characteristics of the image preset as you create it.

The Medium image preset has a width of 500 pixels and a height of 800 pixels. In Part I of this Journey, you read about delivering assets in different formats. From the Format pull-down menu, you can choose to deliver assets as JPEG, PNG, TIFF, or several other formats. You have flexibility here.

Selecting the Advanced tab gives you options for the asset’s color space. Depending on the format you selected in the Basic tab – in the example above, JPEG was selected – you can deliver assets in RGB, Grayscale, or CMYK. From the Color Profile pull-down menu, you can select how to deliver a CMYK image asset to be used for print. Notice, too, that there are additional parameters you can apply for sharpening your images. In this case, Unsharp Mask was applied.

Creating an image preset by selecting options from the Advanced tab
Creating an image preset by selecting options from the Advanced tab.

You recall in Anatomy of a Dynamic Media URL earlier, that you read about the Dynamic Media URL and how that is built. The Image Modifier text box is where you can type any additional image processing parameters that you want. The parameters get included in the preset name of the URL when your images are delivered, using the preset. In the screenshot above, the parameter bgc=451B15 was added. That is, a dark brown background color was added.

You can think of an image preset as a recipe for your images. It is going to deliver any images that use the preset, consistently, every time; it’s going to be the same. The parameter &op_brightness=+10 was also added to increase the brightness slightly.

When you are finished, you save the preset, and now it is available for all images that you have. In this case, you want to apply the Medium image preset to an image of a bowl of liquid chocolate.

Applying the image preset Medium to generate a rendition of an image
Applying the image preset Medium to generate a rendition of an image.

You copy the URL, then paste it into your browser to check the appearance of the image. Try it.

In your browser, notice the name of the image preset Medium in the full URL path.

You can see the kind of clarity that is displayed in the image. That quality is partially due to the way the bowl of chocolate was shot. Also, it’s partially because with Dynamic Media, you can store larger images than what is being delivered to digital channels.

If everything looks satisfactory for your bowl of chocolate, you paste the URL into your web pages where you want the image to appear on your website.

If you look again at the watch image below, you can see that there is a Cart image preset, a Grid preset, a Large preset, a PDP-page (Product Detail Page) preset, and several others.

Static and dynamic image presets
Static and Dynamic image presets. The watch image was rendered using the PDP-page image preset.

But what if you have to change an image on your website? For example, suppose you have done some testing, and found that the image of 120 x 120 (the Cart image preset) is not being received as you thought. You must make the image larger by increasing the width to 175 pixels and increasing the height to 175 pixels. Traditionally, you would have to go into Adobe Photoshop and re-create all of those cart images. But with Dynamic Media, you simply edit the image preset by updating the Width and Height values to 175 and save your preset, as seen in the example below.

Editing an image preset
Editing the Width and Height of the Cart image preset.

After you change your image preset, and flush out the cache, all the images get updated, and all the URLs that are being used with that preset, do not change anywhere. That means no broken links and no webpage redirects are necessary.