O Thumbor pode ser usado sem custo financeiro para redimensionar, compactar e transformar imagens sob demanda.
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.](https://web.developers.google.cn/static/articles/use-thumbor/image/a-thumbor-url-has-follow-485047f95e001.jpg?authuser=5&hl=pt-br)
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:
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 original 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](https://web.developers.google.cn/static/articles/use-thumbor/image/image-100x100-pixels-3848e03e36905.jpg?authuser=5&hl=pt-br)
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:
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 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](https://web.developers.google.cn/static/articles/use-thumbor/image/grayscale-image-has-been-787f2eb50dfd7.jpg?authuser=5&hl=pt-br)
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:
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 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](https://web.developers.google.cn/static/articles/use-thumbor/image/compressed-image-no-noti-ba38af80f42a4.jpg?authuser=5&hl=pt-br)
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:
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 redimensionada para uma largura de 200 pixels 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](https://web.developers.google.cn/static/articles/use-thumbor/image/image-is-500-pixels-tall-992a9e041c75d.jpg?authuser=5&hl=pt-br)
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:
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 redimensionada para 50% do tamanho da original 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](https://web.developers.google.cn/static/articles/use-thumbor/image/image-is-100-pixels-wide-07aa661c4581b.jpg?authuser=5&hl=pt-br)
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:
- 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](https://web.developers.google.cn/static/articles/use-thumbor/image/devtools-screenshot-showi-0e757c2215957.jpg?authuser=5&hl=pt-br)
content-type
mostrado no DevToolsPró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.
Execute o comando
thumbor-config
para criar um novo arquivothumbor.conf
.thumbor-config > ./thumbor.conf
Abra seu novo arquivo
thumbor.conf
. O comandothumbor-config
gerou um arquivo que lista e explica todas as opções de configuração do Thumbor.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
eMAX_HEIGHT
ALLOW_ANIMATED_GIFS
Execute o Thumbor com a flag
--conf
para usar as configurações dethumbor.conf
.thumbor --conf /path/to/thumbor.conf