Optimize images with Thumbor

Thumbor is a free, open source image CDN that makes it easy to compress, resize, and transform images. This post lets you try out Thumbor firsthand without needing to install anything. We’ve set up a sandbox Thumbor server for you to try out at . The image that you’re going to experiment with is available at /unsafe/https://web.dev/backdrop-filter/hero.jpg.

Prequisites #

This post assumes that you understand how image CDNs can improve your load performance. If not, check out Use image CDNs to optimize images. It also assumes that you’ve built basic websites before.

Thumbor URL Format #

As mentioned in Use Image CDNs to Optimize Images, each image CDN uses a slightly different URL format for images. Figure 1 represents Thumbor’s format.

Origin #

Like all origins, the origin of a Thumbor URL is composed of three parts: a scheme (which is almost always http or https), a host, and a port. In this example, the host is identified using an IP address, but if you’re using a DNS server it might look like thumbor-server.my-site.com. By default, Thumbor uses port 8888 to serve images.

Security Key #

The unsafe part of the URL indicates that you’re using Thumbor without a security key. A security key prevents a user from making unauthorized changes to your image URLs. By changing the image URL, a user could use your server (and your hosting bill) to resize their images, or, more maliciously, to overload your server. This guide won’t cover setting up Thumbor’s security key feature.

Size #

This part of the URL specifies the desired size of the output image. This can be omitted if you don’t want to change the size of the image. Thumbor will use different approaches like cropping or scaling to achieve the desired size depending on the other URL parameters. The next section of this post explains how to resize images in more detail.

Try it now:

1. Click the following URL to view the image served at its original size in a new tab: /unsafe/https://web.dev/backdrop-filter/hero.jpg

2. Resize the image to 100×100 pixels: /unsafe/100×100/https://web.dev/backdrop-filter/hero.jpg

Filters #

Filters transform an image. The filters part of the URL segment starts with filters: followed by a colon-separated list of filters; this can be omitted if you are not using any filters. The syntax for individual filters resembles a function call (for example grayscale()) containing zero or more arguments.

Try it now:

1. Apply a single filter: a Gaussian blur effect with a radius of 25 pixels: /unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

2. Apply multiple filter. Convert to grayscale and rotate the image 90 degrees: /unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Transforming Images #

This section focuses on the Thumbor functionalities most relevant to performance: compression, resizing, and conversion between file formats.

Compression #

The quality filter compresses JPEG images to the desired image quality level (1-100). If no quality level is provided, Thumbor compresses the image to a quality level of 80. This is a good default: quality levels 80-85 typically have little noticeable effect on image quality, but usually decrease image size by 30-40%.

Try it now:

1. Compress the image to a quality of 1 (very bad): /unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

2. Compress the image using Thumbor’s default compression settings: /unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Resizing #

To resize an image while maintaining its original proportions use the format $WIDTHx0 or 0x$HEIGHT within the size portion of the URL string.

Try it now:

1. Resize the image to a width of 200 pixels while maintaining original proportions: /unsafe/200×0/https://web.dev/backdrop-filter/hero.jpg

2. Resize the image to a height of 500 pixels while maintaining original proportion: /unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg