Skip to content
Focal
Start free trial
Dashboard

Quickstart

Nothing to install and nothing to upload. Focal reads from the storage you already have; you change the URL your pages request.

  1. 1. Create a project

    A project is one origin and the address you deliver it from. Give it the base URL your images already live at. It has to be publicly readable over HTTPS: an S3 or GCS bucket with public read, an R2 bucket with public access turned on, or your own server.

    Origin 
    https://your-bucket.s3.ap-south-1.amazonaws.com/

    Focal only ever reads from it. Nothing is written back and no file is copied. You can set up a project before you choose a plan. Focal delivers its images once your plan or free trial is active. A new account can start a 14-day free trial on 8 workers.

  2. 2. Request a size

    Your dashboard shows each project's delivery key. Everything after /unsafe/ is the transformation. This asks for 800px wide, height following the source ratio, at quality 80. 

    https://img.focaltool.com/your-key/unsafe/800x0/filters:quality(80)/products/chair.jpg

    unsafe fills the slot the engine reserves for a signature. Focal delivers public URLs, so it is always unsafe.

  3. 3. Let the browser pick a size

    Because the size lives in the path, a responsive srcset is just several paths. Each is transformed once and cached.

    Responsive HTML 
    <img
  src="https://{brand.imgHost}/your-key/unsafe/800x0/products/chair.jpg"
  srcset="https://{brand.imgHost}/your-key/unsafe/400x0/products/chair.jpg 400w,
          https://{brand.imgHost}/your-key/unsafe/800x0/products/chair.jpg 800w,
          https://{brand.imgHost}/your-key/unsafe/1600x0/products/chair.jpg 1600w"
  sizes="(max-width: 720px) 100vw, 800px"
  alt="Oak lounge chair" />

  4. 4. Trim the background

    Product catalogues usually need the surrounding whitespace removed before fitting to a box. This trims from the top-left reference pixel, fits inside 300×300, fills what is left with white, and serves WebP. 

    /unsafe/trim:top-left:80/fit-in/300x300/filters:fill(white,1):quality(75):format(webp)/products/chair.jpg

    Tolerance is a euclidean distance between RGB colours, 0–442. Raise it for noisy or off-white backgrounds; lower it if the trim is eating into the product.

  5. 5. Leave the format to the browser

    When a URL does not name a format, browsers that accept WebP get WebP and the rest get the source format. Each is cached separately, so nobody receives a format they cannot display. Name one, for example format(avif), when you want it for every browser.

    Next, read the full URL API.