Knowledge Base

CDN/PXL Implementation

Last Modified:
21 Jun 2020
User Level:
Administrator

On average, images are the largest share of a web page’s size so when it comes to improving site speed, it’s a no brainer that optimizing images is the best place to start. Terminalfour’s CDN/PXL feature improves image delivery in two ways:

  • Improving latency (this is the CDN part)
  • Optimizing image files (this is PXL)

CDN PXL Map

Latency (CDN)

Simple geography can have an outsized impact on your site’s user experience. Let’s say your site is hosted on the east coast of the US and someone from Australia visits. That visitor won’t just get a slightly longer download time but they’ll see a longer interval between when the image is first requested by the browser and when the server starts the download. Adding milliseconds to the speed of a page mightn’t sound like much but when you have multiple images on a page and multiple pages are visited it begins to affect a visitor’s experience of your site. 

When your site uses a CDN (Content Delivery Network) that image file can be served from a location nearer to the visitor, speeding up your site and improving the overall user experience. Globally distributed CDN servers ensure that regardless of where your site is hosted, its assets will be served from a location close to your visitors. 

Image optimization (PXL)

Optimizing images is all about balancing file size and image quality and you can’t assume that all your content editors know how to use image-editing software or care about compression methods. With PXL you can offload image processing tasks like compression and resizing to the cloud, based on your own custom presets. A single image can be output in multiple dimensions and file formats with different levels of compression applied. You can even add effects like grayscale or color balance enhancements all on the fly without opening Photoshop.

CDN + PXL

Once processed each file is cached globally to ensure that your site visitors are served the right image quickly.

While the CDN can cache and distribute any file type only image files can be used with PXL.

The following file types have been verified and tested:

  • XLSX application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  • DOCX application/vnd.openxmlformats-officedocument.wordprocessingml.document
  • PDF application/pdf
  • MP3 audio/mpeg
  • ZIP application/zip
  • CSS text/css
  • JPG image/jpeg
  • SVG image/svg+xml
  • PNG image/png
  • PPTX application/vnd.openxmlformats-officedocument.presentationml.presentation
  • HTML text/html +TXT text/plain
  • MP4 video/mp4

With PXL you can manipulate images on the fly by appending filter parameters to the image URL.  PXL supports the following file extensions.

  • .jpg/.jpeg
  • .png
  • .webp
  • .tiff

Non-image files like PDFs are not supported. Like CDN, the file is pushed up to the cloud and hosted on a distributed group of servers.

How do I use CDN/PXL on my site?

If you have CDN/PXL enabled on your site you add either of the following attributes to a T4 Tag in a Content Layout, Media Layout or Media Element : 

Attribute

Example

Notes

cdn="<BOOLEAN_VALUE>

cdn="true"

Files are published to the CDN when the attribute’s value is “true”. 


A "false" or other value will publish the files to the Channel’s output directory which is the default behavior.

pxl-filter-id="<PXL_FILTER_ID>

pxl-filter-id="1"

Only valid PXL filter IDs are applied to an image and published to PXL. If the PXL filter ID doesn’t exist, the file will be published locally as normal.

CDN/PXL attributes can only be applied to the following types of T4 Tags:

Description

Original

With CDN attributes

With PXL attributes

File element

<t4 type="content" name="file" output="file" />

<t4 type="content" name="file" output="file"cdn="true"/>

<t4 type="content" name="file" output="file"pxl-filter-id="1"/>

Image element

<t4 type="content" name="image" output="image" />

<t4 type="content" name="image" output="download"cdn="true"/>


<t4 type="content" name="image" output="file"cdn="true"/>

<t4 type="content" name="image" output="download"pxl-filter-id="1"/>


<t4 type="content" name="image" output="file"pxl-filter-id="1"/>

Media element

<t4 type="content" name="media" output="normal" formatter="" />

<t4 type="content" name="media" output="normal" formatter=""cdn="true"/>


<t4 type="content" name="media" output="normal" formatter="image/layoutWithCdnApplied" />

<t4 type="content" name="media" output="normal" formatter=""pxl-filter-id="1"/>


<t4 type="content" name="media" output="normal" formatter="image/layoutWithPxlFilterApplied" />

Media T4 tag

<t4 type="media" formatter="image/*" id="15" />

<t4 type="media" id="15"cdn="true"/>


<t4 type="media" formatter="image/layoutWithCdnApplied" id="15" />

<t4 type="media" id="15"pxl-filter-id="1"/>


<t4 type="media" formatter="image/layoutWithPxlFilterApplied" id="15" />

CDN/PXL attribute precedence

It’s worth being aware of the scenarios where CDN and PXL attributes could conflict with each other:

    If a CDN attribute and a PXL filter attribute are applied to the same T4 Tag, the CDN attribute is ignored and the PXL attribute is applied
  • If a CDN/PXL attribute is applied to a Media Layout and a different CDN/PXL attribute is added to the T4 Media Tag then the Media Layout CDN/PXL attribute will be used

In the unlikely event that the CDN/PXL application is unavailable, what happens to your publish?

At the beginning of a publish a check is run to ensure files can be published to the CDN. If there’s an issue, the publish falls back to a normal publish.

Three possible scenarios for unsuccessful CDN publishing might be:

  • If the CDN is unavailable before the publish begins, the publish will fallback to normal output and publish to the Channel’s output directory. PXL filters will not be applied to images and files will not be pushed to the CDN.
  • If the CDN becomes unavailable during a publish, the publish will fail.
  • If the CDN is unavailable on preview, Media Items will be previewed from the Channel’s output directory and PXL filters will not be applied.