Optimiza imágenes con Thumbor

Thumbor se puede utilizar de forma gratuita para cambiar el tamaño de las imágenes, comprimirlas y transformarlas a pedido.

Katie Hempenius
Katie Hempenius
X

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.

Una URL de Thumbor tiene los siguientes componentes: origen, llave de seguridad, tamaño, imágenes y filtros.
Formato de la 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 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:

  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: 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:

  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 desenfocada

  2. 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

Imagen en escala de grises que se rotó 90 grados
Imagen rotada en escala de grises

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:

  1. 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

    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 perceptibles
Imagen comprimida

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:

  1. 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

    La imagen tiene 200 píxeles de ancho.
    Se cambió el tamaño de la imagen a un ancho de 200 píxeles

  2. 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

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

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:

  1. 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

    Imagen que tiene un 50% del tamaño del original
    Se cambió el tamaño de la imagen al 50% del tamaño original

  2. 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

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

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:

  1. 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
Captura de pantalla de Herramientas para desarrolladores que muestra el tipo de contenido (WebP) de una imagen
El encabezado de respuesta content-type que se muestra en Herramientas para desarrolladores

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.

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

    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 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 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