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.

Add data-src

Replace the src tag with data-src:

<img data-src="img.jpg">

Supported formats

Greta lazy loader supports the most common image formats, listed below:

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

Non-supported formats

Greta lazy loader does not support images of following formats:

  // Non-supported formats:
  * .svg

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>

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

Fallback script

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.