Sizy.io

Documentation

Getting started

Image Parameters

Below is a list of the most common query parameters supported by sizy.io (leveraging Sharp.js).

| Parameter | Description                                                                                  | Example Value   |
|-----------|----------------------------------------------------------------------------------------------|-----------------|
| `w`       | Width in pixels. If only width is provided, height is auto-scaled to preserve aspect ratio.  | `?w=800`        |
| `h`       | Height in pixels. If only height is provided, width is auto-scaled to preserve aspect ratio. | `?h=400`        |
| `fit`     | Resizing/cropping behavior. Common values: `cover`, `contain`, `fill`, `inside`, `outside`.  | `?fit=cover`    |
| `q`       | JPEG/WEBP quality (0-100).                                                                   | `?q=80`         |
| `fm`      | Output format. jpeg, png, webp, gif, svg.                                                    | `?fm=webp`      |
| `crop`    | Custom crop if needed, used in combination with `fit`. E.g., “top” or “center.| `?crop=top`     |
| `bg`      | Background color when using `fit=contain`. Accepts hex or keywords.                          | `?bg=ffffff`    |
| `flip`    | Boolean flip image vertically (`true` or `false`).                                           | `?flip=true`    |
| `flop`    | Boolean flop image horizontally (`true` or `false`).                                         | `?flop=true`    |
| `blur`    | Apply blur to the image. Value indicates the intensity of blur.                              | `?blur=5`       |
| `sharpen` | Sharpen the image. Value indicates the level of sharpening.                                  | `?sharpen=2`    |
| `rotate`  | Rotate the image by degrees (0, 90, 180, 270).                                               | `?rotate=90`    |

Example Usage

<img 
  src="https://sizy.io/{BUCKET_NAME}/my-website-images/hero.jpg?w=600&h=300&fit=cover&q=80&fm=webp" 
  alt="Hero Image" 
/>