We use cookies to help our site work and to understand how it is used. By continuing to browse the site you're agreeing to our use of cookies.

Image manipulation

Every image/file you upload in DatoCMS is stored on Imgix, a super-fast CDN optimized for image delivery.

By adding some parameters to your image URL, you can enhance, resize and crop images, compress them and change format for better performance, create complex compositions, and extract useful metadata. The transformations happen on-the-fly and get cached on the CDN as well for future reuse.


If you want to resize your image and convert it to JPG format, you just need to add ?w=800&h=600&fm=jpg at the end of the URL. The .url method makes it easy to generate these kind of URLs, by simply passing an hash of transformations as argument:

blog_post.cover_image.url(w: 800, h: 600, fm: :jpg)
# => "https://www.datocms-assets.com/123/12345-heart.png?w=800&h=600&fm=jpg"

Take a look at Imgix's Image API Reference page to see all the transformations available. Some trasformation names contain a dash (ie. border-radius), in this case this is the right syntax to use:

blog_post.cover_image.url("border-radius" => 10);