Skip to main content

Thumbor can be used for free to resize, compress and transform images on demand.

Thumbor is a free, open source imaging CDN that makes it easy to compress, resize, and transform images. This post lets you try Thumbor first-hand without installing anything. We have set up a Thumbor sandbox server for you to test http://34.67.235.246:8888. The image you are experimenting with is available at http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Previous requirements

This post assumes you understand how image CDNs can improve your upload performance. Otherwise, see Use Image CDNs to Optimize Images. It also assumes that you have built basic websites before.

If you want to install Thumbor on your own server and then follow this post, see How to Install Thumbor CDN Image. Whenever you see http://34.67.235.246:8888 In this post, you will need to replace that origin with the origin of your Thumbor instance.

Thumbnail URL format

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

use-thumbor0-5292656
Thumbor URL Format

Origin

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

Security key

the unsafe part of the URL indicates that you are using Thumbor without a security key. A security key prevents a user from making unauthorized changes to their 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 will not cover setup Thumbor 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 resize the image. Thumbor will use different approaches like cropping or scaling to achieve the desired size based 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 see the image displayed in its original size in a new tab: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    use-thumbor1-9279708
    Original image
  2. Resize the image to 100 × 100 pixels: http://34.67.235.246:8888/unsafe/100edrez100/https://web.dev/backdrop-filter/hero.jpg

use-thumbor2-7668204
Image resized to 100 × 100 pixels

Filters

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

Try it now:

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

    use-thumbor3-6838206
    Blurred image
  2. Apply multiple filter. Convert to grayscale and to turn the image 90 degrees: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

use-thumbor4-7302444
Grayscale, rotated image

Transforming images

This section focuses on the features of Thumbor that are most relevant to performance: compression, resizing, and converting between file formats.

Compression

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

Try it now:

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

    use-thumbor5-8750607
    Poor image quality
  2. Compress the image using Thumbor's default compression settings: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

use-thumbor6-7488573
Compressed image

Resize

To resize an image while keeping its original aspect ratio, use the format $WIDTHx0 or 0x$HEIGHT within size part of the url string.

Try it now:

  1. Resize the image to a width of 200 pixels keeping the original aspect ratio: http://34.67.235.246:8888/unsafe/200damientos0/https://web.dev/backdrop-filter/hero.jpg

    use-thumbor7-8111926
    Image resized to a width of 200 pixels
  2. Resize the image to a height of 500 pixels keeping the original aspect ratio: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

use-thumbor8-1110217
Image resized to a height of 500 pixels

You can also resize images to a percentage of the original using the proportion filter. Specifying the size in conjunction with the aspect ratio filter will resize the image and then apply the aspect ratio filter.

Try it now:

  1. Resize the image to 50% from the original: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    use-thumbor9-7898390
    Image resized to 50% of original size
  2. Resize the image to 1000 pixels width, then resize the image to 10% from its current size: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https ://Web. dev / backdrop-filter / hero.jpg

use-thumbor10-9271832
Image resized to a width of 100 pixels

These methods are just a few of Thumbor's many cropping and resizing options. To read about other options, see Use.

File formats

the Format filter converts images to jpeg, webp, gifor png. Note that if you are optimizing performance, you must use JPEG or WebP since PNG and GIF files tend to be significantly larger and don't compress as well.

Try it now:

  1. Convert the image to WebP. If you open the Net DevTools panel of the document Content type response header shows that the server returned a WebP image: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
use-thumbor11-5687756
the content-type response header displayed in DevTools

Next steps

Try others filters and transformations in the hero.jpg picture.

If you are proceeding with your own installation of Thumbor, please see the appendix below that explains how and why to use the thumbor.conf proceedings.

Appendix: thumbor.conf

Many of the configuration options discussed in this post, plus many others, can be set as default by configuring and using a thumbor.conf configuration file. Configuration in the thumbor.conf The file will apply to all images unless the URL string parameters override it.

  1. Run the thumbor-config command to create a new thumbor.conf proceedings.

    thumbor-config > ./thumbor.conf

  2. Open your new thumbor.conf proceedings. the thumbor-config The command generated a file that lists and explains all of the Thumbor configuration options.

  3. Configure the settings by uncommenting the lines and changing the default values. You may find it useful to make the following settings:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH and MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS
  4. Run Thumbor with the --conf flag to use your thumbor.conf settings.

    thumbor --conf /path/to/thumbor.conf

R Marketing Digital