Images and Image Optimization

Images are a crucial part of working on projects, and Dato's media area offers some particularly useful asset management capabilities, particularly from an optimization and SEO standpoint.

Each image uploaded has certain metadata management happening under the hood, as well as giving you options to enrich them further:

• Files can be uploaded in any format - jpg, png, gif, webp, whatever, AND can be transformed when served to the frontend via the powerful image optimization features offered by our API partner, imgix.

• You have complete control on renaming files for SEO purposes, as well as adding in new titles, alt-text, and custom fields for accessibility.

• 👆and yet, you can set those per locale, not just per file!

• We'll also bring in all the fun metadata from the file's EXIF, like any credits, lens details, copyrights, MME type, etc.

• In the background we'll extract the dominant color palette for when and if you need to query those for any frontend magic, and we'll also let you select the focal point in the CMS to make sure the images look crisp on all devices.

• While we'd auto-tag images with anything that shows up, you can also manually override or add more tags for content purposes

• On the dev side, when serving these images, your team can apply powerful transformations to enhance, change quality, change format, set dimensions, crop, and a ton of other stuff (check the docs for deets), so as editors you really don't need to bother manually optimizing things. Got a 300MB AVIF photograph? Just upload it. The frontend will handle serving it as an optimized 50kb webp.

• Uploaded something and not happy with it? Don't upload another one to replace everywhere in your content, just Replace Asset from the media area, and we'll make sure it's updated everywhere (note: The asset URL will change though, so something for your devs to keep in mind!)

• Dato also offers some basic image editing options in the media area for simple things like rotation, adding filters, markup, and crops, in case you want to get a little creative after dumping images in.

Finally, all DatoCMS projects come with some optimizations on by default. Under your Project Settings you can disable or edit these to apply them across the entire project.