Image Storing and Serving | Yext Hitchhikers Platform
Yext Content supports a range of image storing capabilities to ensure that images can be served flexibly on digital experiences.
Once a photo has been uploaded to Content, there are multiple ways to specify how that photo should be displayed for downstream use (i.e., any source that would refer to that image on your entity, such as Search, Listings, or Pages.)
Storing Images
Photos can be stored on entities in fields of either the Photo or File field type. Differences between these field types are outlined below.
| Option | File Field Type | Photo Field Type |
|---|---|---|
| Add validation for height, width, and aspect ratio |  |
 |
| Add validation for file size | |
|
| Use dynamic links (dynl, dynm) | |
|
| Dynamic image transformation and resizing | |
|
Serving Images
When referencing images in downstream uses (such as Pages, Search, or Listings), the hosting base URL of the photo should change to a Yext image serving base URL. As an example, if the hosting URL of a photo is a.mktgcdn.com, this should be adjusted to dyn.mktgcdn.com, dynl.mktgcdn.com, or dynm.mktgcdn.com as the serving URL.
Using a Yext serving URL allows the user to specify the size the image should be in downstream instances.
File Type Guidelines
Here is a summary of when these formats are best suited:
- JPEG is best for photos and any image with a wide range of colors.
- PNG is best for images like clip art or vector art which have a limited color palette.
- WEBP can handle both use cases well and encodes images into a smaller file at the same level of quality. This format is recommended for web page serving. However, not every application can read this format.
Dynamic Image Transformation
Photos used in Yext are hosted and served on Cloudflare. This allows you to perform a variety of image transformations by adding formatting to the serving URL as path parameters. See Cloudflare’s documentation for the full list of formatting options.
Note also that dynamic image transformations are only available for the supported image formats listed in Cloudflare’s documentation.
If you are transforming a file field type URL to be served, a.mktgcdn.com/f/{businessID} should be adjusted to dyn.mktgcdn.com/p/.
If you are transforming a photo field type URL to be served, a.mktgcdn.com should be adjusted to dyn.mktgcdn.com and the dimensions and extension at the end of the URL should be dropped.
The served image URL should have the following format: https://dyn.mktgcdn.com/p/{image_UIUD}/{options}
For example, if you wanted to apply the following transformations to a photo uploaded to Yext:
- Add a blur
- Set the size to be 1000x1000
- Crop the rest of the image larger than 1000x1000
- Rotate it 90 degrees
The process would be as follows:
Fetch the hosted image’s URL: https://a.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/1701x1295.jpg
Change the base URL to
dyn.mktgcdn.com: https://dyn.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/Add the transforms to the image’s URL: https://dyn.mktgcdn.com/p/weDfOuuWD5IybzlazwEUUps4-NxElRV2E2O0_zOXE6U/blur=20,height=1000,width=1000,fit=crop,rotate=90
Note that Yext does not currently support serving GIFs, so using Cloudflare transform options such as anim will not work.
Using Served Images on React Front-Ends
The Image component can be used to serve pictures from Yext Content into your downstream experiences.
Generated Thumbnails (Legacy)
Before leveraging the dynamic transform options in Cloudflare, Yext would proactively generate a set of thumbnails in various sizes for any uploaded image.
Today, Yext will still generate these thumbnails when a photo is uploaded, however, we recommend leveraging the dyn.mktgcdn.com base URLs and Cloudflare resizing for more granular control over served images. To optimize for page speed and ensure that all devices can render images correctly, we create a set of thumbnails at several sizes and normalize the image format to something that all devices can consume.
Using Thumbnails on Your Site
Thumbnails are created using your photo’s original dimensions, in addition to thumbnails which are scaled to fit within each of these fixed bounding boxes:
- 1900x1900
- 619x1000
- 600x450
- 196x400
The photo is never enlarged, nor is the aspect ratio changed.
Thumbnails can be accessed using URLs of the following format:
FIT.mktgcdn.com/p/UUID/WIDTHxHEIGHT
Similar to dynamic photo serving - if you are using a file field to store photos and wish to serve them, the base URL needs to be changed from a.mktgcdn.com/f/{businessID}/UIUD to FIT.mktgcdn.com/p/UIUD/WIDTHxHEIGHT.
FIT specifies one of two modes that allow dynamic selection among a set of thumbnails:
dynl.mktgcdn.com— “at least” as large, on one dimensiondynm.mktgcdn.com— “at most” as large, on either dimension
This dynamic URL will return the thumbnail which is the best fit for the given FIT and dimensions.
Depending on the input format, the thumbnail’s format will be JPEG or PNG. The system also creates and serves WEBP variants on demand.