Skip to content
BasiX Media

Resize images by URL

Add ?w= and ?f= to any image address on the CDN to get a resized, re-encoded copy. Nothing to install, nothing to generate in advance.

  1. 1.Add a width

    w is the target width in pixels. It snaps up to the nearest step of a fixed ladder: 16, 32, 64, 96, 128, 160, 192, 256, 320, 384, 448, 512, 640, 768, 896, 1024, 1280, 1536, 2048. Asking for 400 gives 448. Images are never enlarged and keep their proportions.

    html
    <img src="https://cdn.basix.media/a7k2m9x4/avatars/john.png?w=128" alt="">

  2. 2.Pick a format

    f is the output format: webp, jpeg, png (jpg is accepted for jpeg). The default is webp. A format without a width converts at full size, up to 2048 px.

    text
    https://cdn.basix.media/a7k2m9x4/screens/home.png?f=webp https://cdn.basix.media/a7k2m9x4/screens/home.png?w=640&f=jpeg

  3. 3.Serve responsive images

    Combine several widths in srcset and let the browser choose.

    html
    <img
  src="https://cdn.basix.media/a7k2m9x4/photos/beach.jpg?w=640"
  srcset="https://cdn.basix.media/a7k2m9x4/photos/beach.jpg?w=320 320w,
          https://cdn.basix.media/a7k2m9x4/photos/beach.jpg?w=640 640w,
          https://cdn.basix.media/a7k2m9x4/photos/beach.jpg?w=1280 1280w"
  sizes="(max-width: 700px) 100vw, 640px"
  alt="">

Worth knowing

  • Sources: PNG, JPEG, WebP and AVIF. GIF and SVG are served unchanged.
  • Metadata such as EXIF and GPS position is removed, and photos are rotated upright.
  • Each size is generated once, then served from cache. The X-Basix-Variant header says hit, miss or original; X-Basix-Width gives the width applied.
  • Sources over 40 MB or 50 megapixels are served unchanged. Under heavy load a resize can answer 503 with Retry-After: 1.
  • An invalid value, such as ?w=abc or ?f=gif, answers 400.

More recipes

← Standalone documentation

Resize images by URL — BasiX