Greta supports the most common image formats, listed below:
// Supported image formats: * .jpg * .png * .gif * .jpeg * .bmp
Greta does not support images of following formats:
// Non-supported formats: * .svg
Greta will automatically load all images for you, but also allows you to flag images you don't want Greta to act on by adding the custom attribute
data-not-greta to it.
Then Greta won't touch it at all.
<!-- image Greta will route --> <img src="/img.png"> <!-- image Greta won't route --> <img src="/img.png" data-not-greta>
In order to let Greta route images hosted on a different domain than the site, for example Google Cloud Storage, S3, need to have following headers set. Make sure to enable CORS.
// Required CORS header for images on other domains // such as GCS, S3 etc Access-Control-Allow-Origin: *
Greta also works for background images for most element types. To make Greta pick it up, move the url of the images from the CSS into the
// Supported element types for background images: div, section, article, aside, body, figure, html, nav, span, summary, table, ul, li, mark, i, b, strong, p, main, time, h1, h2, h3, h4, label
<!-- 1. Remove the background-image url from the CSS --> <!-- 2. Specify image url with the data-bg-src --> <div data-bg-src="/bkg.png"></div>