Skip to content
Altitude Commerce - Documentation

Image Processor

Introduction

An Image Processor manipulates and transforms images at the point of making the request. Optimising assets to optimal modern image formats, ratios, compression and sizes. After manipulation these images are stored on globally performant edge locations and cached.

Processing images often offer a significant boost to the web performance of your commerce website.

While Altitude does not provide a product for image processing. We have a re-usable URL that exposes Fastly’s Image Optimisation product for use with approved origins, allowing for Ingenuity hosted assets to be processed (e.g. product images, banners, blog content).

Configuration

There is a processor available for use served at https://4e5bdc.thgimages.com, which takes the source image url as a query parameter: ?url=<image-src>.

A full list of accepted query params can be found in the Fastly Image Optimiser Docs.

Proxying requests to this domain is recommended as it prevents the need for an additional network request to a new origin, which creates avoidable latency.

By setting up a proxy, instead of requesting images from the domain above. You can instead request images from a local path, for e.g. /images and avoid the network overhead (TCP, TLS, DNS).

Vite Proxy Example (Local Development)

astro.config.mjs
import { defineConfig } from "astro/config";


export default defineConfig({
  // ... existing config


  vite: {
    server: {
      proxy: {
        "/images": {
          target: "https://4e5bdc.thgimages.com",
          changeOrigin: true,
        },
      },
    },
  },
});

Altitude Proxy (Production)

altitude.yaml
version: v2.0
provider: cloudflare
routes:
  - pathPrefix: /images
    name: image-proxy
    type: proxy
    url: https://4e5bdc.thgimages.com

Utilising the above will then allow for both local development and production to request images. Here is an example of this:

<img src={`/images?url=${assetUrl}&width=800&height=800?format=webp&auto=avif`} />

Note that assetUrl would be the full image URL.