Skip to content
LogoLogo

Image optimisation service

The Picked service for image optimisation is a hosted endpoint at https://img.picked-content.com. It reads an image from an allowed source domain and resizes it. It then encodes the image again to a modern format, WebP or AVIF, and caches the result.

Endpoint

GET https://img.picked-content.com/_next/image?url={source}&w={width}&q={quality}
ParameterDescription
urlThe URL of the source image, URL-encoded. It must point at an allowed source domain. See below.
wThe width in pixels. It must be one of the supported widths.
qThe quality: 25, 50, 75, or 100.

The service chooses the response format. When the browser advertises image/avif or image/webp in its Accept header, the response uses that format. If it does not, the response uses the source format.

Allowed source domains

The service reads only from these hostnames:

  • **.picked.app

A request with a url parameter for any other hostname returns 400 Bad Request.

Supported widths

Device sizes, for a responsive image that spans the width of the viewport:

640, 750, 828, 1080, 1200, 1920, 2048, 3840

Image sizes, for a UI element of fixed size such as an icon, an avatar, or a thumbnail:

16, 32, 48, 64, 96, 128, 256, 384

A request with any other width returns 400 Bad Request. Choose the smallest width that covers the size you render at the device pixel ratio of the visitor.

Supported qualities

25, 50, 75, 100

A lower value reduces the bandwidth by a large amount. 75 is a good default for most images. Use 25 or 50 for a thumbnail on a slow network.

Responsive images

Use the endpoint together with the standard srcset attribute. The browser then picks the correct width for each viewport:

<img
  src="https://img.picked-content.com/_next/image?url=https%3A%2F%2Fcdn.picked.app%2Fhero.png&w=1080&q=75"
  srcset="
    https://img.picked-content.com/_next/image?url=https%3A%2F%2Fcdn.picked.app%2Fhero.png&w=640&q=75 640w,
    https://img.picked-content.com/_next/image?url=https%3A%2F%2Fcdn.picked.app%2Fhero.png&w=1080&q=75 1080w,
    https://img.picked-content.com/_next/image?url=https%3A%2F%2Fcdn.picked.app%2Fhero.png&w=1920&q=75 1920w
  "
  sizes="(max-width: 768px) 100vw, 720px"
  alt="..."
/>

Cache

The upstream CDN caches each optimised response. The smallest cache TTL is 60 seconds. The real lifetime depends on the eviction policy of the CDN. When you change the source image at the same URL, the optimised copy stays in the cache for at least that time.

Security

  • The service does not optimise an SVG source. A request for an SVG returns the original bytes when the source is allowed. The service never runs an embedded script.
  • Each optimised response carries a strict Content-Security-Policy (default-src *; script-src 'none'; sandbox;). A compromised source therefore cannot run a script in the browser that shows the image.
  • The response uses Content-Disposition: inline, and never attachment.