Thumbor se puede utilizar de forma gratuita para cambiar el tamaño de las imágenes, comprimirlas y transformarlas a pedido.
Thumbor es una CDN de imágenes de código abierto que facilita la compresión, el tamaño y la transformación de imágenes. En esta publicación, podrás probar Thumbor de primera mano sin necesidad de instalar nada. Hemos configurado un servidor de 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 el artículo Usa CDN de imágenes para optimizar las imágenes. También supone que ya creaste sitios web básicos.
Formato de URL de Thumbor
Como se mencionó en Usa CDN de imágenes para optimizar las imágenes, cada CDN de imagen usa un formato de URL ligeramente diferente para las imágenes. En la figura 1, se 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 con una dirección IP, pero si usas un servidor DNS, es posible que se vea 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 estás usando Thumbor sin una llave de seguridad. Una llave de seguridad evita que un usuario realice cambios no autorizados en las URLs de tus imágenes. Si lo haces, el usuario podría usar tu servidor (y tu factura de hosting) para cambiar el tamaño de las imágenes o, de forma malintencionada, sobrecargar tu servidor. En esta guía, no se abarca la configuración de la función de llave de seguridad de Thumbor.
del vocab.
Esta parte de la URL especifica el tamaño deseado de la imagen de salida. Se puede omitir si no quieres cambiar el tamaño de la imagen. Thumbor usará diferentes enfoques, como el recorte o la escala para lograr el tamaño deseado en función de los otros parámetros de URL. En la siguiente sección de esta publicación, se explica cómo cambiar el tamaño de las imágenes con más detalle.
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:
seguida de una lista de filtros separados por dos puntos. Esto se puede omitir si no usas ningún filtro. La sintaxis de filtros individuales se parece 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 rota la imagen 90 grados: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
Transforma imágenes
Esta sección se centra en las funciones de Thumbor más relevantes 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 al 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 un efecto leve en la calidad de la imagen, pero suelen disminuir el tamaño de la imagen en un 30% a 40%.
Probar ahora:
Comprime la imagen a 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
Redimensionamiento
Para cambiar el tamaño de una imagen y, a la vez, 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 200 píxeles y mantén 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 500 píxeles y mantén 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 del original mediante el filtro de proporción. Si el tamaño se especifica 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% del 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 al 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 diversas opciones de recorte y cambio de tamaño de Thumbor. Para obtener información sobre otras opciones, consulta Uso.
Formatos de archivo
El filtro de formato convierte las imágenes en jpeg
, webp
, gif
o png
. Ten en cuenta que si optimizas el rendimiento, deberías usar JPEG o WebP, ya que estos formatos suelen ser considerablemente más grandes y no se comprimen bien.
Probar ahora:
- Convierte la imagen a WebP. Si abres el panel Network de Herramientas para desarrolladores, el encabezado de respuesta Content-Type del documento mostrará que el servidor mostró 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 sigues usando tu propia instalación de Thumbor, consulta el apéndice a continuación 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, y muchas otras, se pueden establecer como predeterminadas mediante la configuración y el uso de un archivo de configuración thumbor.conf
. Se aplicará la configuración del archivo thumbor.conf
a todas las imágenes, a menos que los parámetros de cadena de URL la anulen.
Ejecuta el comando
thumbor-config
para crear un nuevo archivothumbor.conf
.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 los parámetros de 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