Image Delivery
11 min
overview every image uploaded to a purple hub is served through tachyon , an on the fly image resizing and optimization cdn based on humanmade/tachyon https //github com/humanmade/tachyon instead of pre generating a fixed set of thumbnail sizes on upload, tachyon resizes, crops and compresses the original image the first time a given size is requested, then caches that result so every subsequent request is served instantly from the cdn the hub rewrites image src and srcset attributes automatically, so most editors and integrations never have to think about this it becomes relevant when you're building a custom frontend, app, or headless integration and need to request a specific image size yourself how it works every uploaded media file gets a canonical url under the hub's uploads path, e g https //example com/wp content/uploads/2026/08/photo jpg appending query parameters ( ?w=600 , ?resize=300,200 , ) to that url requests a resized/transformed variant on the first request for a given combination of parameters, the image is fetched, transformed, and cached all following requests for that exact url are served directly from the cache with a 1 year cache control header if the source file isn't a supported image type, or no recognized parameters are present, the original file is served unmodified basic usage append one or more query parameters to any image url on the hub https //example com/wp content/uploads/2026/08/photo jpg?w=600 https //example com/wp content/uploads/2026/08/photo jpg?resize=300,200\&crop strategy=smart https //example com/wp content/uploads/2026/08/photo jpg?fit=800,600\&quality=70 supported source formats are jpg , jpeg , png , gif and webp other file types (e g svg ) are passed through unchanged parameters resizing parameter description example `w` resize to this width (px), preserving aspect ratio never upscales `?w=600` `h` resize to this height (px), preserving aspect ratio never upscales `?h=400` `resize` resize and crop to fill an exact `width,height` box crops from the center by default — pair with `gravity` or `crop strategy` to control what's kept `?resize=300,200` `fit` resize to fit inside a `width,height` bounding box without cropping or upscaling aspect ratio is preserved, so the result may be smaller than the box on one axis `?fit=800,600` `lb` letterbox like `fit`, but pads the image to the exact `width,height` box using a background color, instead of leaving it smaller combine with `background` `?lb=800,600` `crop` crop the source image before any resize is applied, as `left,top,width,height` values are treated as a percentage of the original image unless suffixed with `px` `?crop=10,10,50,50` (percent) or `?crop=100px,100px,400px,300px` crop focus parameter description example `gravity` anchors which part of the image is kept when `resize` crops it one of `north`, `northeast`, `east`, `southeast`, `south`, `southwest`, `west`, `northwest`, `center` `?resize=400,400\&gravity=north` `crop strategy` alternative to `gravity` for `resize` `smart` uses content aware cropping to keep the most visually interesting region; `entropy` and `attention` are additional sharp based strategies `?resize=400,400\&crop strategy=smart` output quality parameter description example `quality` jpeg/webp compression quality, `0`–`100` defaults to `82`, automatically reduced for high `zoom` values to control file size `?w=600\&quality=70` `webp` force the output to webp regardless of the source format `?w=600\&webp=1` `zoom` multiplies the requested dimensions, for serving higher density (retina) images at the same layout size `?w=600\&zoom=2` `background` background color used to pad images with `lb` defaults to `black` `?lb=800,600\&background=white` examples resize to a fixed width, preserving aspect ratio https //example com/wp content/uploads/2026/08/photo jpg?w=800 crop to a square thumbnail, keeping the most interesting part of the image https //example com/wp content/uploads/2026/08/photo jpg?resize=400,400\&crop strategy=smart fit inside a bounding box without cropping https //example com/wp content/uploads/2026/08/photo jpg?fit=1200,800 serve a 2x/retina variant at reduced quality to manage file size https //example com/wp content/uploads/2026/08/photo jpg?w=400\&zoom=2\&quality=65 force webp output https //example com/wp content/uploads/2026/08/photo jpg?w=600\&webp=1 caching and performance each unique combination of source image and query parameters is processed once and cached; repeat requests for the same url are served from cache cached variants are served with cache control max age=31536000 (1 year), so they're also cached by browsers and any cdn/proxy in front of the hub changing any parameter (including their order) produces a distinct cached variant error handling tachyon is designed to fail safe if anything about a request can't be honored, it falls back to serving the original file unmodified rather than returning an error situation behavior no recognized query parameters are present request is not processed; the original file is served as is a single parameter has an invalid value (e g `quality=abc`) that parameter is dropped; any other valid parameters on the same request still apply