Skip to content

Transforms give you the power to modify HTML and images at the Edge, making it easier for you to simplify your development workflows and enhance your website's performance. With Transforms, you can create a seamless experience for your users with lightning-fast page loads and high-quality images.

Edge Side Includes (ESI)#

Reduce redundancy and optimize your site with ESI.

ESI lets you reuse content across multiple pages, helping you to reduce the size of your HTML and make your site faster. Reuse header and footer content across multiple pages to reduce HTML size and improve site speed.

<esi:include src="header.html" />

<div>
  <!-- Your page content goes here -->
</div>

<esi:include src="footer.html" />

Image Optimization#

Improve page load speed by reducing image file sizes and optimizing images for the web.

Optimize your images to reduce their file size, increase their loading speed, and enhance the overall performance of your website.

Lazy Loading#

Enhance user experience and boost performance with Lazy Loading.

Lazy loading delays the loading of images until they are needed, improving the loading speed of your page.

Resizing#

Get the perfect image dimensions every time with Resizing.

Resize images to the perfect dimensions, ensuring a seamless viewing experience for your users.

HTML Rewrites#

Streamline development and improve security with HTML Rewrites.

  • Enable Transforms: Easily turn on transform functionality to start modifying your HTML.
  • Edge Side Includes (ESI): Enable ESI to reuse content across multiple pages and make your site faster.
  • Mixed Content: Replace "http://" with "https://" in your HTML to improve security.
  • Add Image Dimensions: Add width and height to image source URLs to resize images to the perfect dimensions.
  • Rewrite Domains: Modify domains within your HTML to a different domain for added control.

Script Insertion#

Gather valuable user data with Script Insertion.

  • RUM Beacon: Add small JavaScript for real-user monitoring (RUM) instrumentation.
  • Lazy Sizes: Add lazy_sizes.js to implement lazy loading for images.

Image Processing#

Get the most from your images with Image Processing.

  • Optimize Images: Automatically optimize images for faster loading and improved performance.
  • Convert Images: Automatically convert images to the best format supported by the browser.
  • Image Quality: Specify a default image quality to ensure high-quality images for your users.
  • Format String: Add a custom format string to images for added control during processing.
  • Enable Image API: Enable the image API for image transformations for even more flexibility.

With Transforms, you can streamline your development workflows and improve your website's page speed with ease.