Optimiza imágenes con Thumbor

Thumbor se puede usar sin costo para cambiar el tamaño, comprimir y transformar imágenes a pedido.

Katie Hempenius
Katie Hempenius

Thumbor es una CDN de imágenes de código abierto y gratuita que facilita comprimir imágenes, cambiar su tamaño y transformarlas. Esta publicación te permite probar Thumbor de primera mano sin tener que instalar nada. Configuramos un servidor Thumbor de zona de pruebas para que lo pruebes en http://34.67.235.246:8888. La imagen con la que experimentarás está disponible en http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Requisitos previos

En esta publicación, se supone que comprendes cómo las CDN de imágenes pueden mejorar el rendimiento de carga. De lo contrario, consulta Usa CDNs de imágenes para optimizar las imágenes. También supone que ya creaste sitios web básicos antes.

Formato de URL de Thumbor

Como se mencionó en Cómo usar CDN de imágenes para optimizar imágenes, cada CDN de imagen usa un formato de URL ligeramente diferente para las imágenes. La Figura 1 representa el formato de Thumbor.

Una URL de Thumbor tiene los siguientes componentes: origen, llave de seguridad, tamaño, imágenes y filtros.
Formato de URL de Thumbor

Origen

Al igual que todos los orígenes, el origen de una URL de Thumbor se compone de tres partes: un esquema (que casi siempre es http o https), un host y un puerto. En este ejemplo, el host se identifica mediante una dirección IP, pero si usas un servidor DNS, podría verse como thumbor-server.my-site.com. De forma predeterminada, Thumbor usa el puerto 8888 para entregar imágenes.

Llave de seguridad

La parte unsafe de la URL indica que utilizas Thumbor sin una llave de seguridad. Una llave de seguridad impide que un usuario realice cambios no autorizados en las URLs de tus imágenes. Al cambiar la URL de la imagen, un usuario podría usar tu servidor (y tu factura de hosting) para cambiar el tamaño de sus imágenes o, de manera malintencionada, sobrecargar tu servidor. En esta guía, no se abarcará la configuración de la función de llave de seguridad de Thumbor.

Tamaño

Esta parte de la URL especifica el tamaño deseado de la imagen de salida. Esto se puede omitir si no deseas cambiar el tamaño de la imagen. Thumbor usará diferentes enfoques, como recortes o ajustes, para lograr el tamaño deseado según los otros parámetros de URL. La siguiente sección de esta publicación explica con más detalle cómo cambiar el tamaño de las imágenes.

Probar ahora:

  1. Haz clic en la siguiente URL para ver la imagen publicada en su tamaño original en una pestaña nueva: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    Imagen en tamaño original
    Imagen original
  2. Cambia el tamaño de la imagen a 100 x 100 píxeles: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

Imagen de 100 x 100 píxeles
Se cambió el tamaño de la imagen a 100 x 100 píxeles
.

Filtros

Los filtros transforman una imagen. La parte de filtros del segmento de URL comienza con filters: seguido de una lista de filtros separados por dos puntos. puedes omitirlo si no usas ningún filtro. La sintaxis de los filtros individuales se asemeja a una llamada a función (por ejemplo, grayscale()) que contiene cero o más argumentos.

Probar ahora:

  1. Aplica un solo filtro: un efecto de desenfoque gaussiano con un radio de 25 píxeles: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    Imagen borrosa
    Imagen borrosa
  2. Aplicar varios filtros. Convierte la imagen a escala de grises y rotate la imagen a 90 grados: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Imagen en escala de grises rotada 90 grados
Imagen girada en escala de grises
.

Cómo transformar imágenes

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

Compresión

El filtro de calidad comprime las imágenes JPEG hasta el nivel de calidad 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 parámetro predeterminado: los niveles de calidad del 80 al 85 suelen tener poco efecto notable en la calidad de la imagen, pero suelen disminuir el tamaño de la imagen entre un 30% y un 40%.

Probar ahora:

  1. Comprime la imagen hasta una calidad de 1 (muy mala): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    Imagen de baja calidad
    Imagen de baja calidad
  2. Comprime la imagen con la configuración de compresión predeterminada de Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Imagen comprimida sin problemas de calidad notorios
Imagen comprimida
.

Cambiar el tamaño

Para cambiar el tamaño de una imagen y mantener sus proporciones originales, usa el formato $WIDTHx0 o 0x$HEIGHT en la parte size de la cadena de URL.

Probar ahora:

  1. Cambia el tamaño de la imagen a un ancho de 200 píxeles manteniendo las proporciones originales: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    Imagen de 200 píxeles de ancho
    Se cambió el tamaño de la imagen a 200 píxeles
    .
  2. Cambia el tamaño de la imagen a una altura de 500 píxeles manteniendo la proporción original: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Imagen de 500 píxeles de alto
Se cambió el tamaño de la imagen a 500 píxeles de alto

También puedes cambiar el tamaño de las imágenes a un porcentaje determinado con el filtro de proporción. Si se especifica el tamaño junto con el filtro de proporción, se cambiará el tamaño de la imagen y luego se aplicará el filtro de proporción.

Probar ahora:

  1. Cambia el tamaño de la imagen al 50% de la original: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    La imagen tiene un 50% del tamaño de la original
    Se cambió el tamaño de la imagen a un 50% del original
  2. Cambia el tamaño de la imagen a un ancho de 1,000 píxeles y, luego, cambia el tamaño a un 10% de su tamaño actual: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

Imagen de 100 píxeles de ancho
Se cambió el tamaño de la imagen a 100 píxeles
.

Estos métodos son solo algunas de las muchas opciones de recorte y cambio de tamaño de Thumbor. Para obtener más información sobre otras opciones, consulta la sección Uso.

Formatos de archivo

El filtro format convierte imágenes a jpeg, webp, gif o png. Ten en cuenta que, si optimizas el rendimiento, debes usar JPEG o WebP, ya que los archivos PNG y GIF suelen ser mucho más grandes y no se comprimen tan bien.

Probar ahora:

  1. Convierte la imagen a WebP. Si abres el panel Red de Herramientas para desarrolladores, el encabezado de respuesta Content-Type del documento muestra que el servidor devolvió una imagen WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg.
Captura de pantalla de Herramientas para desarrolladores en la que se muestra el tipo de contenido (WebP) de una imagen
El encabezado de respuesta content-type que se muestra en las Herramientas para desarrolladores

Próximos pasos

Prueba otros filtros y transformaciones en la imagen hero.jpg.

Si estás probando tu propia instalación de Thumbor, consulta el siguiente apéndice, que explica cómo y por qué usar el archivo thumbor.conf.

Apéndice: thumbor.conf

Muchas de las opciones de configuración que se analizan en esta publicación, junto con muchas otras, se pueden establecer como predeterminadas configurando y usando un archivo de configuración thumbor.conf. La configuración del archivo thumbor.conf se aplicará a todas las imágenes, a menos que los parámetros de la cadena de URL la anulen.

  1. Ejecuta el comando thumbor-config para crear un archivo thumbor.conf nuevo.

    thumbor-config > ./thumbor.conf
    
  2. Abre el nuevo archivo thumbor.conf. El comando thumbor-config generó un archivo en el que se enumeran y explican todas las opciones de configuración de Thumbor.

  3. Para definir la configuración, quita los comentarios de las líneas y cambia los valores predeterminados. Puede resultarte útil establecer los siguientes parámetros de configuración:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH y MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS
  4. Ejecuta Thumbor con la marca --conf para usar tu configuración de thumbor.conf.

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