Optimize images with Thumbor

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

September 23, 2019

Thumbor es un CDN de imágenes de Open Source y gratuito que facilita la compresión, el cambio de tamaño y la transformación de imágenes. Esta publicación te permite probar Thumbor de primera mano sin necesidad de instalar nada. Hemos configurado un server Thumbor sandbox para que lo pruebes 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

Esta publicación asume que comprende cómo las CDN de imagen pueden mejorar el rendimiento de su carga. De lo contrario, consulte Usar CDN de imágenes para optimize imágenes. También asume que ha creado sitios Web básicos antes.

Formato de Url en miniatura

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.

Origin

Like everything origins, the origin of a URL Thumbor consists of three parts: a scheme (which is almost always http or https), un host y un puerto. En este ejemplo, el host se identifica mediante una IP adress, pero si está utilizando un servidor DNS, podría verse como thumbor-server.my-site.com. By default, Thumbor uses the port 8888 to serve images.

Security key

the unsafe parte de la URL indica que estás usando Thumbor sin una clave de seguridad. Una clave de seguridad evita que un Username realice cambios no autorizados en las URL de sus imágenes. Al cambiar la URL de la imagen, un usuario podría usar su servidor (y su factura de alojamiento) para cambiar el tamaño de sus imágenes o, más maliciosamente, para sobrecargar su servidor. Esta guía no cubrirá la configuración 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

   

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

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

   

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

Transforming images

Esta sección se centra en las funcionalidades de Thumbor más relevantes para el rendimiento: compresión, cambio de tamaño y conversion entre formatos de archivo.

Compression

the quality El filtro comprime las imágenes JPEG al quality level de imagen deseado (1-100). Si no se proporciona un nivel de calidad, Thumbor comprime la imagen a un nivel de calidad de 80. Este es un buen valor predeterminado: los niveles de calidad 80-85 normalmente tienen un efecto poco notable en la calidad de la imagen, pero normalmente reducen el tamaño de la imagen en un 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

   

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

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

   

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

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

   

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

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 Encabezado de respuesta de type of content 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

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