Introduction

Ever since starting affiliate marketing as a way to earn some extra beer money, I’ve always had to scour the internet for high-definition images of the products promoted in my blog and social media posts. This process is unnecessary, since most brands use a CDN (content delivery network) to display images based on modifiers such as a product’s own style number. In this blog post we’ll be detailing how the official images generator was created and how to automate the process of monitoring images when they are updated.

Key takeaways

• Most brands dynamically display images from a CDN (or content delivery network) which can be used to download official images;
• Usage is split between brands using different CDN providers, but the theory remains similar and documentation is available online;
• If the brand is not using a complex workflow (such as using UUIDs), you can usually use the style number to generate the images;

Interactive example

STYLE CODE

M2002RDABB550PWAM1906RKLU992EN1M990AL3U2000EA

ANGLE

1234

https://nb.scene7.com/is/image/NB/m2002rda_nb_02_i

Use the interactive example above to see how a CDN works. Please keep in mind this interactive experience is a simplified and hardcoded example.

How a content delivery network works

A content delivery network (CDN) is basically a giant network of servers spread across the globe that helps deliver content (such as images, videos, and other media) faster and more efficiently. When you visit a product page, you're not always pulling that content from the brand's actual server. Instead, the CDN grabs whatever assets you're looking for (in our case, product photos) and delivers them to you from a server that's geographically closer to where you are. This reduces load times and saves the brand from having to serve thousands of simultaneous requests from a single location.

Most ecommerce brands use CDNs to serve official product imagery, especially since high-resolution images are some of the heaviest assets on a page. The interesting part for us, as affiliate marketers or media site owners, is that the link structure usually follows a predictable pattern, often times based on the product's style number. If you know how to decode those patterns, you can tap into the exact same image source and download the images directly.

Some of the popular content delivery networks we'll be looking at in this blog post are Adobe Scene7 and Cloudinary. Each brand can choose which CDN to use, but the theory remains the same. Documentation for each CDN is often available online, which makes the process of reverse engineering the image source relatively straightforward.

Brands decide how to display images

Even though a lot of brands use the same CDNs, the way those images are displayed (and what options are available) can vary greatly depending on the brand. A content delivery network is just a tool, it's the brand that decides how much flexibility to allow. For example, one retailer might let you download PNG images with transparent backgrounds by just adding a simple ?fmt=png-alpha modifier to the URL, while another brand on the exact same CDN won't support transparent baackgrounds at all (for example, New Balance).

Just because you can use a specific modifier, it doesn't automatically mean it will work. Reverse engineering things is usually a process of trial and error.

How to generate images using a CDN

Knowing what CDN provider a brand using is not mandatory, but it's a good starting point, especially if you plan on using specific modifiers. For example, the ?fmt=png-alpha modifier is correct syntax for Adobe Scene7, but not for Cloudinary. Being familiar with the documentation for each CDN is usually a good idea. Often times you'll be able to tell which platform a brand is using based on the link structure and available modifiers.

How style numbers are used to generate images

Let's use New Balance as an example. The style number for the New Balance 530 "Silver Metallic" is U530ESA. If we visit the product page and right click on the thumbnail image, we can see the following URL:

https://nb.scene7.com/is/image/NB/u530esa_nb_02_i?$pdpflexf2$&qlt=80&fmt=webp&wid=440&hei=440

For starters, let's ignore everything after the ? symbol. Here's what every part of the URL means:

• nb.scene7.com - New Balance's CDN domain. Keep in mind some brands customize it to use their domain;
• is/image - Scene7 will use this syntax to know the user needs the image server to deliver an image asset;
• NB - New Balance's company name in the Scene7 catalog, which needs to match the domain you're using;
• u530esa_nb_02_i - Image ID in the catalog, each asset has a unique ID (SKU + image angle, in this case);

We can already see the style number in the URL, followed by the image angle. Simply changing the SKU will change the image being displayed. All angles can usually be found on the brand's product pages. Some products might feature few angles while others might have dozens - make sure to check multiple product pages to get a complete list. Now that we have the image, it's time to add modifiers to the URL. Here's the above modifiers:

• $pdpflexf2$ - Returns images using a specific NB preset;
• ?fmt=webp - Returns images in the specified WebP format;
• ?qlt=80 - Returns images at 80% quality of the original asset;
• ?wid=440 - Returns images with their width set to 440 pixels;
• ?hei=440 - Returns images with their height set to 440 pixels;

A preset (also known as an alias or a template) is basically a pre-defined set of modifiers that can be used to generate images. While we don't know for sure without trial and error, considering this modifier is used on the product page (and has pdp in the name), it most likely optimizes the image sharpness and background color to look good when visiting the brand's website. The other modifiers are used to set the image width, height, quality and format. You can see a full list of modifiers for this specific CDN on Adobe's website.

Displaying images using complex workflows

Downloading images using the style code is usually straightforward, but some brands use more complex workflows. For example, after years of using the above illustrated workflow, Nike now switched to using UUIDs (Universally Unique Identifiers) for their image assets. This means that the image ID is no longer a simple SKU, but a complex unique identifier that can't really be guessed unless you've got a lot of time on your hands.

While I won't be going into detail about the endpoints used, if you're smart enough you can probably figure out what I'm talking about. Generating images using SKUs is not an option, however fetching product information using the style number is still possible. Therefore, you can fetch the image UUID using the style number and then use modifiers to generate the image.

Let's look at an example image URL from Nike's product page:

https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/b1bcbca4-e853-4df7-b329-5be3c61ee057/NIKE+DUNK+LOW+RETRO.png

This is the thumbnail image for the Nike Dunk Low "Panda" with style number DD1391-100. Here's what everything in the URL means:

• static.nike.com - Nike's CDN domain (as mentioned above, some brands customize it to use their domain);
• a/images - Cloudinary will use this syntax to know the user needs the image server to deliver an image asset;
• t_PDP_1728_v1 - Returns images using a specific Nike preset, in this case a portrait sized 1728x2160px image;
• f_auto,q_auto:eco - These modifiers are used to optimize both the image's format and quality automatically;
• b1bcbca4-e853-4df7-b329-5be3c61ee057 - This is the image UUID, which is a unique identifier for the image;
• NIKE+DUNK+LOW+RETRO.png - This is the image file name, it helps with SEO but can be replaced with anything;

Now that we know the image UUID, we can pretty much change every other modifier until we're satisfied with our result. For example, we can remove the t_PDP_1728_v1 preset and add our own modifiers for width and height. By adding h_2000,w_2000,c_pad to the URL, we get a square image instead. Another example would be the background color: we can add b_rgb:ffcccb to the URL to get a pink background instead of the default one. A full list of modifiers for this specific CDN can be found on Cloudinary's website.

How to monitor images

Monitoring images is a crucial part of maintaining a media website. It's important to know when images are updated so you can accordingly cover the news. One of the most popular ways to get engagement on social media right now is by being the first one to post official images when they're loaded. Instead of waiting for other media websites to post the images, you can monitor the CDN and post them yourself whenever they're live.

A monitor is a simple script which checks a specific URL and returns either true or false. In the case of an image monitor, true means the image is live, false means it's not. It's recommended you use a database to store the SKUs you're monitoring, so you can easily add and remove products on the fly while the script is running. Using a database also helps to know which images have already been loaded (so your script only checks for new images).

You can write your own script in any language you want, but Python is a great choice for this task, using the requests library to make HTTP requests.

Monitoring images using request status codes

The simplest way to monitor images is by checking the request status code. If the image is live, the status code will be 200. If the image is not live, the status code will be 404. Keep in mind this only works if the brand is not using some sort of placeholder image for missing assets. If the brand is using a placeholder image, the status code will probably be 200 regardless of the image's existence.

Monitoring images using image size or content

When brands use placeholder images, you can usually check the image size or content to know if the image is live. If the image is live, the size will be larger than whatever size the placeholder image is. Another way to check if the image is actually loaded is to base64 encode the image and compare it to a base64 encoded placeholder image. If the image is live, the content will obviously be different than the placeholder.

Using the official images generator

If you've made it this far but don't want to go through the hassle of reverse engineering, you can use my image generator. It's a simple tool that allows you to generate images using the style number and modifiers. I've tried to make it as easy as possible to use, but if you're having any issues, feel free to reach out to me on Twitter or Instagram.