Getting started

Before you start

• Images at a public URL, such as your website or a public bucket.
• Access to your templates or code to change image URLs.

1. Create an endpoint

An endpoint connects your source, where your original images are stored, to the address Small Pics serves them from. When you start your trial, the dashboard opens on a three-step setup guide:

1. Where are your images stored? Choose On my website.
2. Connect your images: paste a link to one of your images, such as https://www.example.com/uploads/photo.jpg. Small Pics checks the link and uses https://www.example.com as the endpoint's source.
3. Choose your image address: pick a subdomain, such as mysite.

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

No images to hand? Choose No images yet to set up with demo images, and swap in your own later on the endpoint's Settings tab.

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 to use strict, which negotiates from Accept and preserves the source format when the header is missing or only contains wildcards. Use fm=auto to negotiate with an AVIF fallback. 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 Accept imgix URLs on your endpoint 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. Add it on the endpoint's Settings tab. Every plan includes custom domains.
• Signed URLs: turn on Require signed URLs for an endpoint to stop others from requesting new transforms on your account. Each URL then needs a s signature, generated in your server code.