Image Optimization

Tilda Image Optimization allows you to compress and transform your images on the fly using a specially-formatted URL. This means that the only code changes you need to make in your project is to update the image URLs.

Next.js Integration

If you're using Next.js, you don't need to make any changes to your code. Tilda automatically integrates with Next.js's built-in Image Optimization features. Just use the Next.js Image component or next/image as you normally would, and Tilda will handle the optimization automatically.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/path/to/your/image.jpg"
      alt="Your image"
      width={500}
      height={300}
    />
  )
}

URL Format

For non-Next.js applications, or if you need more control over the optimization parameters, you can use our URL-based API:

Tilda Image Optimization URL is as follows:

https://<DOMAIN NAME>/_tilda/image/<OPTIONS>/<IMAGE URL>

Here is an explanation of each of the URL parts:

• DOMAIN NAME - Your domain name hosted with Tilda. e.g. example.com.
• OPTIONS - A comma-seperated list of transformation options. e.g. width=400,format=avif.
• IMAGE URL - The path to the image you want to optimize. This can be a local image path or an external image URL.

The URL can be a relative one if used on the same website or an absolute one. For example, an absolute URL will look like this:

https://example.com/_tilda/image/width=400,format=avif/path/to/local/image.jpg

And a relative URL will look like this:

/_tilda/image/width=400,format=auto/path/to/local/image.jpg

These URLs can be used in different context. For example, an <img> tag:

<img src="/_tilda/image/width=400,format=avif/path/to/local/image.jpg" alt="An optimized image">

Supported options

You must specify at least one option. Multiple options for image transformation can be added as a comma seperated list. Spaces are not allowed in options.

Quality and Format

• quality: Compression level (1-100). Defaults to 85. Use quality=100,format=webp if you want to use lossless WebP.
• format: Output format. Supported formats:
  • auto: Automatically determine the best format based on the client device. In most cases, this will be AVIF or WebP.
  • avif: AV1 Image File Format. WebP will be used as a fallback automatically if the client device doesn't support AVIF.
  • webp: WebP image format.
  • jpeg: JPEG image format.
  • baseline-jpeg: Baseline JPEG image format for devices that support progressive JPEG.

Resizing Options

• width: Resize the image to the specified width in pixels.
• height: Resize the image to the specified height in pixels.
• dpr: Device pixel ratio. Defaults to 1. Makes it easy to specify higher-DPI sizes in <img srcset>.
• fit: Resize the image to fit within the specified dimensions. Supported values:
  • scale-down: Shrinks larger images but does not enlarge smaller ones.
  • cover: Resize the image to cover the specified dimensions, cropping if necessary.
  • contain: Resize the image to fit within the specified dimensions, adding padding if necessary.
  • pad: Resizes the image and adds padding to match dimensions. Use the background option to specify the padding color.

Effects

• blur: Adds a blur effect. Specify a value between 1 (slight) and 250 (maximum).
• sharpen: Adjusts the sharpness. Values range from 0 (no sharpening) to 10 (maximum).
• brightness: Increases or decreases brightness. A value of 1.0 equals no change, 0.5 halves brightness, and 2.0 doubles it.
• contrast: Adjusts contrast. A value of 1.0 equals no change, 0.5 decreases contrast, and 2.0 increases it.
• saturation: Controls color saturation. A value of 0 converts the image to grayscale, 0.5 halves saturation, and 2.0 doubles it.
• gamma: Adjusts gamma. A value of 1.0 equals no change. Values less than 1.0 darken the image, and values greater than 1.0 lighten it. 0 is ignored.

Error handling

Use onerror=redirect to redirect the request to original image URL incase there are fatal errors with fetching or transforming the image. For example:

https://example.com/_tilda/image/width=400,onerror=redirect/path/to/local/image.jpg

This option is ignored if the image is from another domain, but you can use it with subdomains.