This page demonstrates the how a page structure is made up of standard sized images. Having IO parameters embedded into page markup is a high-risk approach and is subject to inconsistencies across pages.
By using policies, we can simplify the markup by embedding IO rules into VCL.
table io_policies { "article-main": "crop=660:438&width=660", "article-large": "crop=318:212&width=318", "article-medium": "crop=250:166&width=250", "thumb": "crop=80:53&width=80", "avatar": "crop=1:1&width=150", } sub vcl_recv { #FASTLY recv // Return non-image if (req.url.path !~ "(?i)\.(?:jpg|png)$" || req.url.path !~ "/images/") { return(lookup); } // Signal to send to IO set req.http.X-Fastly-Imageopto-Api = "fastly"; // Don't alter the request if we're running at // the shield, it has already been rewritten if (req.http.Fastly-FF) { return (lookup); } // Policies only if (req.url.qs ~ "(?:^|&)policy=([^&]+)") { set req.url = req.url.path "?" table.lookup(io_policies, re.group.1, ""); } else { set req.url = req.url.path; } }
//facepug.io/images/a5/pug-instagram.jpg?policy=article-main //facepug.io/images/a5/pug-instagram.jpg?policy=article-medium //facepug.io/images/a5/pug-instagram.jpg?policy=thumb