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);
On top of all the features provided by Imgix you can also get a blurred-up SVG version of an image, for you to inline in the HTML of the page straight away. Then you can update the image with a high resolution image later in the user's browser, but avoiding reflows and only downloading the images that are actually necessary.
Also you can learn more about this approach in our blog post about it.
To get the blurred-up SVG you can use:
blog_post.cover_image.lqip_data_url(w: 800, h: 600, fm: :jpg)# => "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgXFQoLDhUSDhUXDh0eDRUVGRYZGBYTFhUaIi0jGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIig7Lzs7Ozs7Ozs7LzsvLy8vLy8vLzsvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAEAAwEAAAAAAAAAAAAAAAAAAwQFAv/EABwQAAAHAQEAAAAAAAAAAAAAAAABAgMEBRESQf/EABUBAQEAAAAAAAAAAAAAAAAAAAMB/8QAHREAAQMFAQAAAAAAAAAAAAAAAQAREgITITFCA//aAAwDAQACEQMRAD8AqPMJiF1o6jvlILkhlWU11aMMTU6j50UPHKcCmTJa1aXEnvoBdy3GmTNPgAwfTkpbNJ2F/9k="