How it works
Picasso works in two separate moments: when your page renders, it only writes signed URLs; when a browser asks for one of them, the variant is rendered, once, then served from a cache.
When the page renders
Section titled “When the page renders”- Twig<twig:Picasso:Image src="photo.jpg" …>
- Loaderfinds the source: directory, S3, entity, URL
- Metadatareads width × height, if needed (cached)
- Transformersigns one URL per width and format
- Placeholdertiny image or BlurHash, if any
- <picture>sources, srcset, sizes, img
- The loader turns
src(a path, an entity, a URL) into an image it knows how to read. - If
widthorheightis missing, the metadata of the source are read from its first bytes, and cached in thecachepool. - The transformer writes a URL for each width of the srcset in each format. Glide signs them with
sign_key; Imgix points them at its CDN. - The placeholder, if any, adds a preview.
- Everything goes into one
<picture>, withloading="lazy"unless the image is a priority.
No image is decoded or written at this point: a page with 30 responsive images renders in about 5 ms (benchmarks).
When a browser asks for a variant
Section titled “When a browser asks for a variant”With Glide, the URLs point at the bundle’s route, /image/{transformer}/{loader}/{path}:
- BrowserGET /image/glide/uploads/photo.jpg?w=640…
- Controllerchecks the signature: 404 if forged
- Glide cachehit: streamed as is
- Glidemiss: reads the source, renders, stores
- The first request of a variant renders it: tens to hundreds of milliseconds depending on the size, format and driver.
- Every next request is a cache hit, about 0.1 ms on local disk, served with
Cache-Control: public, max-age=31536000, immutable: browsers and CDNs keep it for a year. - The same image and transformation always give the same URL, so a thumbnail shown on several pages is rendered and downloaded once.
To keep PHP out of hits entirely, put the cache in a bucket behind a CDN: Serving from a CDN. With Imgix, all of this happens on Imgix’s side.
