Skip to main content

How the SpeedSize Shopify App Works

The SpeedSize Shopify app allows integrating SpeedSize into your Shopify theme with just a few clicks.

When enabled, the app automatically rewrites supported media URLs so images and videos are delivered through the SpeedSize CDN instead of directly from the Shopify CDN.

When a theme is processed, the app scans supported Liquid assets, identifies compatible media references, and prepends SpeedSize CDN prefixes to those URLs. The original Shopify media files remain unchanged, and all processing is reversible.

This article contains the following topics:

How Theme Processing Works

Once the app is enabled for a Shopify theme, it starts processing supported Liquid assets and identifying compatible media references.

The app scans supported Liquid files and updates media URLs by injecting SpeedSize Liquid filters into supported media references, so a SpeedSize prefix is prepended to the media URLs on the storefront.

As a result, media assets are loaded through the SpeedSize CDN instead of directly from the Shopify CDN.

Below is a simplified example of how a standard Shopify image reference may look before and after processing.

Before SpeedSize

<img
 srcset="
   {{ section.settings.image | image_url: width: 360 }} 360w,
   {{ section.settings.image | image_url: width: 750 }} 750w,
   {{ section.settings.image | image_url: width: 1500 }} 1500w
 "
 src="{{ section.settings.image | image_url: width: 750 }}"
>

After SpeedSize

<img
 srcset="
   {{ settings.speedsize_url_pfx_https -}}{{ section.settings.image | image_url: width: 360 }} 360w,
   {{ settings.speedsize_url_pfx_https -}}{{ section.settings.image | image_url: width: 750 }} 750w,
   {{ settings.speedsize_url_pfx_https -}}{{ section.settings.image | image_url: width: 1500 }} 1500w
 "
 src="{{ settings.speedsize_url_pfx_https -}}{{ section.settings.image | image_url: width: 750 }}"
>

The existing responsive image logic, widths, and theme structure remain unchanged. The app only prepends SpeedSize CDN prefixes to supported media URLs.

On the storefront, this results in media URLs such as:

https://scdn.speedsize.com/CLIENT_ID/www.example.com/cdn/shop/files/image.jpg

The request is then routed through the SpeedSize CDN, where the asset can be resized, compressed, reformatted, and optimized before being delivered to the browser.

What the App Processes

During theme processing, the app scans supported Liquid files in the selected Shopify theme and updates compatible media references.

Depending on the implementation, this may include:

  • src
  • srcset
  • CSS background images
  • video sources
  • responsive image variants

If a file does not contain supported media references, the app ignores the file.

The app preserves the existing storefront structure and media behavior while replacing supported URLs with SpeedSize CDN URLs.

Dynamically Generated Media

Some media assets may be generated dynamically using JavaScript and therefore may not exist directly in Liquid files during theme processing.

For these cases, SpeedSize provides an optional JS Extension that can detect and optimize dynamically generated media directly on the storefront.

Additional details on how to enable and manage the JS Extension can be found in:
Managing the SpeedSize Shopify App

What the App Does Not Modify

The SpeedSize Shopify integration does not:

  • modify original Shopify media files
  • permanently alter uploaded images or videos
  • change storefront layouts or styling
  • modify product or catalog data
  • affect Shopify admin content
  • modify unrelated storefront functionality

All processing is limited to the selected theme and can be reverted at any time.

Related articles