Otimizar imagens com o Thumbor

O Thumbor pode ser usado sem custo financeiro para redimensionar, compactar e transformar imagens sob demanda.

Katie Hempenius
Katie Hempenius
X

O Thumbor é uma CDN de imagens sem custo financeiro e de código aberto que facilita a compactação, o redimensionamento e a transformação de imagens. Esta postagem permite que você teste o Thumbor sem precisar instalar nada. Configuramos um servidor Thumbor sandbox para você testar em http://34.67.235.246:8888. A imagem com que você vai fazer o experimento está disponível em http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Pré-requisitos

Nesta postagem, presumimos que você entenda como as CDNs de imagem podem melhorar seu desempenho de carregamento. Caso contrário, confira Usar CDNs de imagens para otimizar imagens. Você também precisa já ter criado sites básicos.

Formato de URL Thumbor

Conforme mencionado em Usar CDNs de imagem para otimizar imagens, cada CDN de imagem usa um formato de URL um pouco diferente para imagens. A figura 1 representa o formato Thumbor.

Um URL do Thumbor tem os seguintes componentes: origem, chave de segurança, tamanho, filtros e imagem.
Formato de URL do Thumbor

Origem

Como todas as origens, a origem de um URL do Thumbor é composta por três partes: um esquema (quase sempre http ou https), um host e uma porta. Neste exemplo, o host é identificado pelo endereço IP, mas, se você estiver usando um servidor DNS, ele será semelhante ao thumbor-server.my-site.com. Por padrão, o Thumbor usa a porta 8888 para disponibilizar imagens.

Chave de segurança

A parte unsafe do URL indica que você está usando o Thumbor sem uma chave de segurança. Uma chave de segurança impede que um usuário faça alterações não autorizadas nos URLs das imagens. Ao alterar o URL da imagem, um usuário pode usar seu servidor (e a fatura de hospedagem) para redimensionar as imagens ou, de forma mais maliciosa, sobrecarregar seu servidor. Este guia não abrange a configuração do recurso de chave de segurança do Thumbor.

Tamanho

Essa parte do URL especifica o tamanho desejado da imagem de saída. Omita essa opção se você não quiser alterar o tamanho da imagem. O Thumbor usa abordagens diferentes, como corte ou dimensionamento, para atingir o tamanho desejado, dependendo dos outros parâmetros de URL. A próxima seção desta postagem explica como redimensionar imagens com mais detalhes.

Experimente agora:

  1. Clique no seguinte URL para visualizar a imagem veiculada no tamanho original em uma nova guia: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    Imagem em tamanho original
    Imagem original

  2. Redimensione a imagem para 100 x 100 pixels: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

Imagem em 100 x 100 pixels
Imagem redimensionada para 100 x 100 pixels

Filtros

Os filtros transformam uma imagem. A parte de filtros do segmento do URL começa com filters:, seguido por uma lista de filtros separados por dois-pontos. Isso poderá ser omitido se você não estiver usando filtros. A sintaxe dos filtros individuais é semelhante a uma chamada de função (por exemplo, grayscale()) que contém zero ou mais argumentos.

Experimente agora:

  1. Aplique um único filtro: um efeito de desfoque gaussiano com um raio de 25 pixels: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    Imagem desfocada
    Imagem desfocada

  2. Aplicar vários filtros. Mude para escala de cinza e gire a imagem em 90 graus: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Imagem em escala de cinza que foi girada em 90 graus
Escala de cinza, imagem girada

Como transformar imagens

Esta seção se concentra nas funcionalidades do Thumbor mais relevantes para o desempenho: compactação, redimensionamento e conversão entre formatos de arquivo.

Compactação

O filtro qualidade compacta as imagens JPEG no nível de qualidade desejado (1 a 100). Se nenhum nível de qualidade for fornecido, o Thumbor compactará a imagem até 80. Esse é um bom padrão: os níveis de qualidade 80 a 85 normalmente têm pouco efeito perceptível na qualidade da imagem, mas costumam diminuir o tamanho da imagem em 30% a 40%.

Experimente agora:

  1. Compacte a imagem para uma qualidade de 1 (muito ruim): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    Imagem de baixa qualidade
    Imagem de baixa qualidade

  2. Compacte a imagem usando as configurações padrão do Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Imagem compactada sem problemas de qualidade perceptíveis
Imagem compactada

Redimensionamento

Para redimensionar uma imagem e manter as proporções originais, use o formato $WIDTHx0 ou 0x$HEIGHT na parte size da string do URL.

Experimente agora:

  1. Redimensione a imagem para uma largura de 200 pixels mantendo as proporções originais: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    Imagem com 200 pixels de largura
    Imagem redimensionada para uma largura de 200 pixels

  2. Redimensione a imagem para uma altura de 500 pixels, mantendo a proporção original: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Imagem com 500 pixels de altura
Imagem redimensionada para uma altura de 500 pixels

Você também pode redimensionar as imagens para uma porcentagem do original usando o filtro proporção. Se o tamanho for especificado em conjunto com o filtro de proporção, a imagem será redimensionada, e o filtro de proporção será aplicado.

Experimente agora:

  1. Redimensione a imagem para 50% da original: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    Imagem com 50% do tamanho da original
    Imagem redimensionada para 50% do tamanho da original

  2. Redimensione a imagem para uma largura de 1.000 pixels e, em seguida, redimensione-a para 10% do tamanho atual: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

Imagem com 100 pixels de largura
Imagem redimensionada para uma largura de 100 pixels

Esses métodos são apenas algumas das muitas opções de corte e redimensionamento do Thumbor. Para ler sobre outras opções, consulte Uso.

Formatos de arquivo

O filtro format converte imagens em jpeg, webp, gif ou png. Se você estiver otimizando para melhorar o desempenho, use JPEG ou WebP, já que os arquivos PNG e GIF tendem a ser significativamente maiores e não compactam também.

Experimente agora:

  1. Converta a imagem para WebP. Se você abrir o painel Network do DevTools, o cabeçalho de resposta do Content-Type do documento vai mostrar que o servidor retornou uma imagem WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
Captura de tela do DevTools mostrando o tipo de conteúdo (WebP) de uma imagem
O cabeçalho de resposta content-type mostrado no DevTools

Próximas etapas

Teste outros filtros e transformações na imagem hero.jpg.

Se você está acompanhando com sua própria instalação do Thumbor, consulte o apêndice abaixo, que explica como e por que usar o arquivo thumbor.conf.

Apêndice: thumbor.conf

Muitas das opções de configuração discutidas nesta postagem, entre muitas outras, podem ser estabelecidas como padrões com a configuração e o uso de um arquivo de configuração thumbor.conf. As configurações no arquivo thumbor.conf serão aplicadas a todas as imagens, a menos que sejam substituídas pelos parâmetros da string de URL.

  1. Execute o comando thumbor-config para criar um novo arquivo thumbor.conf.

    thumbor-config > ./thumbor.conf

  2. Abra seu novo arquivo thumbor.conf. O comando thumbor-config gerou um arquivo que lista e explica todas as opções de configuração do Thumbor.

  3. Para definir as configurações, remova a marca de comentário das linhas e altere os valores padrão. Pode ser útil definir as seguintes configurações:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH e MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. Execute o Thumbor com a flag --conf para usar as configurações de thumbor.conf.

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