Greta integrates a lazy loading library, and all the images loaded by Greta will join the Greta network. The default tag supported is
data-src, but it is possible to change this attribute.
src tag with
Greta lazy loader supports the most common image formats, listed below:
// Supported image formats: * .jpg * .png * .gif * .jpeg * .bmp
Greta lazy loader does not support images of following formats:
// Non-supported formats: * .svg
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>
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: *
An embedded fallback script is included just before we load the Greta script. So in the unlikely event of failure from our provider (Google Cloud), it will fallback all your images to the browser readable
src tag, and all your images would be displayed as expected. This script is optional, and should only be used if Greta lazy loading functionality is used.
The script is provided minified, but the source code is available below.