Get started Debug Images Video/audio Customization Reference

Images

Supported formats

Greta supports the most common image formats, listed below:

  // Supported image formats:
  * .jpg
  * .png
  * .gif
  * .jpeg
  * .bmp

Non-supported formats

Greta does not support images of following formats:

  // Non-supported formats:
  * .svg

Excluding images

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>

Hosted images

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: *

Background images

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 data-bg-src attribute.

// 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>