Getting Started

Before you start

Images at a public URL: your website or an S3-compatible bucket.
Access to your templates or code to change image URLs.

1. Create an image origin

An image origin tells Small Pics where your original images live. In the dashboard, open Image Origins and choose New image origin.

Handle: a short name, such as mysite. It becomes your Small Pics hostname.
Source URL: the base URL your images load from today, such as https://www.example.com/ or your bucket's public URL.

Your images are now available at https://mysite.smallpics.io/.

2. Request your first transform

Take the path of any image on your site and put it after your Small Pics hostname. If this image exists:

https://www.example.com/uploads/photo.jpg

Open this URL in your browser to get an 800px-wide AVIF version:

https://mysite.smallpics.io/uploads/photo.jpg?w=800&fm=avif

Change the query parameters to resize, crop, and convert. The playground shows every parameter on sample images, and the API reference describes each one.

3. Add Small Pics URLs to your site

Point your image tags at your Small Pics hostname instead of your site:

<img
  src="https://mysite.smallpics.io/uploads/photo.jpg?w=800"
  srcset="https://mysite.smallpics.io/uploads/photo.jpg?w=400 400w,
          https://mysite.smallpics.io/uploads/photo.jpg?w=800 800w,
          https://mysite.smallpics.io/uploads/photo.jpg?w=1600 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="">

Leave out fm and Small Pics serves AVIF by default. In most templates, a small helper function that builds these URLs keeps the markup readable.

Craft CMS: use the Imager X transformer. See How to add on-the-fly image transforms to a Craft CMS site.
Moving from Imgix: turn on Imgix compatibility on your image origin so existing Imgix URLs keep working.
Any other stack: see the Small Pics URL API guide.

Optional settings

Custom domain: serve images from your own hostname, such as images.example.com, with a CNAME record pointing to mysite.smallpics.io. Every plan includes custom domains.
Signed URLs: turn on signing for an image origin to stop others from requesting new transforms on your account. Each URL then needs a s signature, generated in your server code.