Thumbor se puede usar sin costo para cambiar el tamaño, comprimir y transformar imágenes a pedido.
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.
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:
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
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
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:
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
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
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:
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
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
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:
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
.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
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:
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
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
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:
- 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.
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.
Ejecuta el comando
thumbor-config
para crear un archivothumbor.conf
nuevo.thumbor-config > ./thumbor.conf
Abre el nuevo archivo
thumbor.conf
. El comandothumbor-config
generó un archivo en el que se enumeran y explican todas las opciones de configuración de Thumbor.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
yMAX_HEIGHT
ALLOW_ANIMATED_GIFS
Ejecuta Thumbor con la marca
--conf
para usar tu configuración dethumbor.conf
.thumbor --conf /path/to/thumbor.conf