Transloadit

What is an Image URL?

An image URL is a network address that identifies an image resource and may include transformation or delivery parameters. It can refer to a fixed file or to a service that generates a response from the requested path or query.

How Image URLs work

An image URL does two jobs: it names a resource, and it is the main part of the key under which browsers and CDNs store the response. A fixed path can map to stored bytes. A transformation service instead parses the URL into a recipe: imgproxy, for example, reads processing options and the source address from path segments and the output format from the extension, while other services take a size or format from query parameters. The client fetches the URL, the server may choose among representations using request headers such as Accept, and each cache stores the result under the URL plus whatever else that cache is configured to key on, such as request headers the response names in Vary. Two URLs that differ only in a detail the service ignores are still stored separately by any cache that keeps that detail in its key.

Key facts

  1. Does the file extension decide the image format? No. A service can read the extension as the requested output format, as imgproxy does, but the response decides: the server declares the format in Content-Type, and for an img element the HTML standard says browsers should also sniff the image’s leading bytes, with the header giving the official type. A URL ending in .jpg can therefore deliver WebP or AVIF and still display. When the server chooses that format from the Accept request header, one URL has several responses: the server should send Vary: Accept, and every CDN or caching proxy in front of it has to take Accept into account, or a cache can reuse a stored WebP or AVIF for a browser that did not ask for it. The extension does matter to some intermediaries: Cloudflare’s CDN decides what to cache by default from the file extension and not from the MIME type, so an image URL without a listed extension is not cached by default unless a cache rule says so.
  2. Are two URLs with the same parameters in a different order the same to a cache? Only when the cache normalizes the query string or leaves it out of its key. RFC 3986 compares URIs as strings, and its normalization rules do not reorder query parameters. Amazon CloudFront documents that, when it caches based on query string parameters, ?color=red&size=large and ?size=large&color=red are cached as two objects and the case of parameter names and values counts as well. Cloudflare includes the full query string in its default cache key and lists Sort query string and Ignore query string options. Generating parameters in one fixed order and case avoids duplicate cache entries and duplicate transformations. The reverse matters too: a parameter that changes the image has to be part of the cache key, because a cache set to ignore the query string gives URLs that differ only in their parameters the same key.
  3. Can anyone change the parameters in a transformation URL? Yes, unless the service refuses requests that lack a valid signature or otherwise restricts what it accepts. Generating signed URLs is not enough if the service still serves unsigned ones: imgproxy leaves signature checking off by default and recommends enabling it in production, so that an attacker cannot mount a denial-of-service attack by requesting many different resizes; its signature is an HMAC over the URL path. A signature covers only the URL: imgproxy notes that request headers cannot be signed, which matters when the output format or width is taken from a header.
  4. Why can a page show an image from another origin but not read its pixels? A page can normally display a cross-origin image, but drawing one to a canvas without CORS approval taints the canvas, after which getImageData(), toBlob(), and toDataURL() throw a SecurityError; this keeps a page from using images to pull private data out of other sites. To read pixels, the image host has to send an Access-Control-Allow-Origin header that permits the page, and the img element needs the crossorigin attribute (set as crossOrigin when a script creates the image). With crossorigin the browser sends an Origin request header, which a plain cross-origin img request does not carry. Cloudflare includes the request’s Origin header in its default cache key, so requests for one URL that differ in that header are cached separately there.

When Image URLs matter

The form of an image URL starts to matter when the image is transformed on request or served through a CDN, because the URL then decides both which bytes are produced and which cached copy is reused. Settle the parameter order and case, whether the output format is named in the URL or negotiated from the Accept header (negotiation is safe only when every cache in front of the service keeps the formats apart), and whether the URL is signed before the URLs are published; pages and other systems that have stored a URL keep requesting that exact form.

How Transloadit helps with Image URLs

A Transloadit Smart CDN image URL is a transformation URL of this kind. The Workspace name is the subdomain of tlcdn.com, the path holds the Template name and the path of the source file, and query parameters such as w=730 reach the Template as Assembly Variables such as ${fields.w}, so the Template decides which parameters have any effect. The URL can be signed with an expiration time (exp) and a signature (sig); the signature has to be generated on your back end because it uses the Auth Secret. Signing keeps outsiders from altering the URL or its parameters only when unsigned requests are refused, which for your own Templates means enabling Signature Authentication for the Workspace.

The signing procedure sorts the query parameters before the signature is computed. The linked pages do not say whether two URLs whose parameters differ only in order share one cached result, so generate parameters in a fixed order.

Explore Transloadit’s delivery capabilities

Sources

Turn media knowledge into a working pipeline

Connect uploads, processing, AI, storage, and delivery through one declarative API — with the encoding stack, scaling, and format churn handled for you.

Try Transloadit for free