auto

Enables optimizations based on content negotiation.

The only negotiated optimizations currently available are for AVIF and WebP, both image compression formats with limited browser support.

Syntax

auto={value}

Allowed values

ValueDescription
avifIf the browser's Accept header indicates compatibility, deliver an AVIF image.
webpIf the browser's Accept header indicates compatibility, deliver a WebP image.

Notes

  1. Although the AVIF and WebP formats produce images at a higher compression ratio with a lower loss of quality compared to JPEG, they are not supported in all browsers.
  2. When using Firefox version 66 to 71, automatic content negotiation will not occur when navigating to the image. To view WebP or AVIF images generated via auto=avif or auto=webp you must insert your image onto a web page.
  3. AVIF is a premium feature of Fastly's Image Optimizer and choosing it as an encoding format will increase your bill. Charges will appear on your service order.

Examples

Click the links to view the transformed image using a demo Fastly IO service.

Example usageDescription
?auto=avifDeliver lossy AVIF from the lossless input image where client support is available, otherwise deliver a PNG
?auto=webpDeliver lossless (because input image is lossless) WebP where client support is available, otherwise deliver a PNG
?format=pjpg&auto=webpDeliver lossy (because format=pjpg is lossy) WebP where client support is available, otherwise deliver a progressive JPEG
?format=png&auto=webpDeliver lossless (because format=png is lossless) WebP where client support is available, otherwise deliver a PNG

Multiple format selection

Browsers that do not support AVIF may support WebP. You may wish to select from more than one possible negotiated format, based on browser support and a prioritized list of formats in a preferred order. Often this is AVIF, then WebP, then JPEG. This can be achieved by adding some custom VCL to your service:

sub vcl_recv { ... }
Fastly VCL
if (querystring.get(req.url, "auto") == "avif,webp") {
if (req.http.Accept ~ "\bimage/avif\b") {
set req.url = querystring.set(req.url, "auto", "avif");
} elsif (req.http.Accept ~ "\bimage/webp\b") {
set req.url = querystring.set(req.url, "auto", "webp");
}
}

User contributed notes

BETA

Do you see an error in this page? Do you have an interesting use case, example or edge case people should know about? Share your knowledge and help people who are reading this page! (Comments are moderated; for support, please contact Fastly support)