Content Delivery API > Images and videos

Images and videos

All the assets are augmented with some extra fields exposed via the GraphQL API, providing you some extra possibilities on the frontend.


Besides all the fields that you can explore via the CMS interface, the API can return both the BlurHash and the ThumbHash of every image, also as a Data-URLs.

You can embed the Data URL directly in the HTML of the page and then swap it with the actual image at a later time, to offer a smooth experience when loading images (LQIP).

If you're on React, Vue, or Svelte our Image components make everything extremely simple to implement.

Alternatively, a more minimal option is to use the dominant colors to prepare the space where the image will be shown:

Responsive images

One special augmentation that we offer on top of images in our GraphQL API is the responsiveImage object.

In this object you can find pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

We support all the imgix parameters and also, for extra control, the sizes argument, that we simply return inside the response so that you can control media query conditions:

One particularly handy feature of the CDA Playground in DatoCMS is that you can explore all the imgix parameters and read the documentation by searching for them in the docs panel:

For imgix Parameters that accept more than one value, you can pass them as an array in your graphQL query manually:

To read all the details of the responsiveImage object head to the blog post where you can also find some examples and integrations.


If you chose to upload videos on DatoCMS, thanks to the integration with Mux, we augment the video objects with:

Like so:


You can filter on all the meaningful fields that we offer in the uploads.

Here's an example of what you'll see in your CDA Playground:

Fetch uploads straight from the context

For the GraphQL veterans this will be obvious, but still we are impressed how cool it is to be able to fetch all the augmented assets directly from the context where they are used.

We hope you appreciate, as we do, something like this: