Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Thumbor se puede usar sin costo para cambiar el tamaño, comprimir y transformar imágenes a pedido.
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.
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.
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.
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%.
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.
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.
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.
Ejecuta el comando thumbor-config para crear un archivo thumbor.conf nuevo.
thumbor-config > ./thumbor.conf
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.
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
Ejecuta Thumbor con la marca --conf para usar tu configuración de thumbor.conf.
