Documentation

# Image Optimization & URLs

# Optimization

Ensure that the images are only as large as they need to be before uploading them to Luminate image libray. Squoosh app (opens new window) is a great online tool for image optimization and resizing.

# Luminate is Cookied Domain & Content Delivery Network (CDN)

Luminate domains serve files & data from the same domain. To keep track of user logins & transaction steps, cookies are necessary. However, when files are loaded from the same domain, they pay a pentalty as each file request must also process the cookies.

Save the Children's image library was tightly integrated with Amazons Content Delivery Network. CDN is usually a different domain & is dedicated to loading only flat files in a very fast manner. DNL has created the integration, where all images from STC's image library are synced to the CDN and can be accessed from that URL. Example:

# Test & Production

Luminate production and test environments are synced separately & therefore their CDN have different domains. They all contain one-to-one mapping of images with the corresponding Luminate instance.

  • Production CDN domain is: https://dx2eq2oh924g4.cloudfront.net.
  • Test CDN domain is https://d290h2g0ajcvb3.cloudfront.net.

Do not link the assets from the test Luminate environment or test CDN on the live/production site. Test environment is reserved for testing and those assets may change at any time.

# What URL to Include

When authoring content, one can use a WYSIWIG to insert image. A relative path, like this /images/content/pagebuilder/Donation_Form_Right_CH154377.jpg will be inserted and image will be loaded from the Luminate domain. Which will result in a suboptimal load time for that one image.

# Static CDN Domain

To ensure all images are loaded optimally do the following:

  • Insert image with WYWIWYG or with code.
  • Replace all domains with a CDN domain:
    • In the production environment,
      replace https://support.savethechildren.org with https://dx2eq2oh924g4.cloudfront.net
    • In the test enviornment,
      replace https://lo-test.savethechildren.org with https://d290h2g0ajcvb3.cloudfront.net

# Dynamic CDN Domain

The values can also be replaced with the dynamic variable, however, when inserted into any content (page, donation form, or product), that variable must be defined first. To set CDN domain dynamically do the following:

  • At the top of your page, donation form, event, or product add the code [[S51:reus_assets_path]].
    Note this needs to be done only once on a page. If you have multiple HTML captions with images on the donation form, include it only in the first one.
  • Then for each image replace the domain name with the variable; search for https://support.savethechildren.org or https://lo-test.savethechildren.org and replace with [[S80:staticAssetsBaseUrl]].
    This variable will automatically set the proper CDN domain based on the Luminate domain name. When the code with dynamic variable is moved from test to the production environment the CDN value will be automatically set to the correct value. However, in this case, the same image must be uploaded to both test & production image libraries, which is usually the case when the standard deployment and testing procedures are followed.

The example of this setting can be seen in a donation__crypto page.

← Scripts overview →