Utilização do Thumbor no processamento de imagens
As imagens são partes super importantes de qualquer site. Especialistas em marketing digital indicam que exibir a imagem certa para quem estiver acessando seu site pode propiciar melhores resultados para você. Isto porque as imagens chamam mais atenção que textos, atraem as pessoas pelo apelo visual e facilitam a visualização do assunto tratado no texto.
Existem diversos critérios para definir o que é uma imagem certa (qualidade, correlação com o conteúdo da página, etc). Muitos ignoram a importância do tamanho da imagem. Mas frequentemente uma imagem exibida no desktop fica diferente de uma imagem exibida no celular, já que o tamanho da tela influencia na imagem que será exibida.
A mensagem que você pretende passar com a imagem pode acabar se perdendo ou não fazendo mais tanto sentido se houver um rosto cortado, uma figura deformada ou um corte realizado no lugar errado da imagem.
Para evitar esses problemas podemos nos recorrer a algumas possíveis soluções:
1 — Salvar suas cópias otimizadas para cada dispositivo
Tratar imagens sempre foi uma tarefa computacionalmente custosa. Usa muito da CPU, consome memória e pode se tornar um gargalo para um site muito acessado. Por isso, muitas pessoas optam por fazer todos os tratamentos da imagem no momento do upload e apenas cuidar de servi-las quando forem requisitadas.
O mais comum é definirmos os tamanhos de imagem que serão exibidos para cada dispositivo e realizarmos cópias da imagem principal para os tamanhos desejados. O problema dessa solução é que determinados tamanhos, só sendo acessíveis por alguns dispositivos, podem nunca (ou quase nunca) serem usados, de fato.
Mesmo assim essa cópia estará gastando espaço de armazenamento. Imagine multiplicar o número de cópias por todas as centenas ou milhares de imagens que seu site poderá conter.
É verdade que, nos dias atuais, armazenamento não é mais tão caro quanto costumava ser. Mas é possível buscar melhores soluções.
2 — Gerar as imagens sob demanda
Uma melhor solução é fazer os tratamentos (cortes, centralização de rostos, objetos, etc) na imagem sob demanda.
A nova imagem será criada apenas se houver necessidade. Deve-se pesar o fato de ter maior uso da CPU no momento em que os usuários do site estiverem acessando e isso não pode afetar negativamente a performance do site.
Diversas tecnologias são propostas para facilitar essa abordagem. Por aqui vou destacar o Thumbor.
Thumbor
O Thumbor é um serviço open source desenvolvido pela Globo.com que tem o intuito de facilitar o tratamento de imagens sob demanda oferecendo recursos como cortes, redimensionamentos, filtros, entre outras funcionalidades. (Você pode acessar a lista completa neste link).
Além do tratamento mais simples (como um corte ou redimensionamento) o Thumbor apresenta funcionalidades avançadas como identificação de rostos e figuras. Esse recurso evitaria, por exemplo, que uma foto fosse cortada e excluísse o rosto de uma pessoa que deveria ser mostrado.
Se você realizar um corte nessa imagem à esquerda ou à direita, dependendo do tamanho desejado o rosto seria cortado da imagem. Com a funcionalidade de detecção de rosto do Thumbor a imagem seria cortada no lugar certo (ou seja, centralizada).
Como usar o Thumbor
O Thumbor é uma aplicação independente e por isso deve ser instalado (você pode usar uma imagem docker para facilitar) para que esteja apto a servir as imagens.
O Thumbor é bem flexível com relação à origem das imagens que você planeja manipular. Você pode escolher ler a imagem a partir de uma URL, de um arquivo no disco local ou até mesmo ler diretamente de um serviço de armazenamento externo como um bucket do S3, por exemplo. Como é um projeto open source você pode escrever seu próprio código de leitura de qualquer fonte desejada.
Para usar é bem simples. Com o Thumbor executando, basta fazer uma chamada simples à uma URL com o seguinte formato:
<endereco-thumbor-server>/unsafe/<tamanho-desejado>/<url-imagem-original>
Exemplo:
- Endereço do thumbor: http://localhost:8080
- Tamanho desejado da imagem: 450x450
- Url da imagem: https://minha-imagem.png
O caminho da imagem a ser exibida será uma chamada ao Thumbor com a seguinte URL: http://localhost:8080/unsafe/450x450/https://minha-imagem.png
O termo “unsafe” significa que o Thumbor não deve se preocupar com validações de segurança e deve simplesmente executar o redimensionamento solicitado. Obviamente isso funciona muito bem para testes, mas em produção deve-se sempre estar preocupado com a segurança do serviço. Isso evita possíveis abusos (chamadas infinitas e automatizadas ao serviço no intuito de torná-lo indisponível aos demais usuários).
Para garantir a segurança o Thumbor utiliza o mecanismo de Chave de Segurança: essa chave é privada (apenas o servidor do Thumbor — e o serviço que gera a URL a ser chamada pelo usuário — sabem qual é a chave).
A chave é usada para gerar um hash que representa toda a URL contendo as informações que o Thumbor precisa para executar. Quando uma requisição é enviada para o Thumbor ela deve conter esse hash.
O Thumbor usa a chave de segurança privada para gerar um hash da URL requisitada e então compara o enviado na requisição com o que ele mesmo gerou. Caso os hashes coincidam o Thumbor realiza os procedimentos solicitados para a imagem. Se não, ele rejeita a requisição.
Questões de Performance
Conforme já dito anteriormente, tratar imagens é um trabalho árduo para a CPU. Por isso, é importante traçar estratégias que garantam o contínuo funcionamento do serviço mesmo durante períodos de alto tráfego.
Algumas dessas estratégias passam por mecanismos de cache que podem acontecer em diversos níveis.
- Cache do lado do cliente (browser): evita que a mesma imagem seja requisitada pelo mesmo usuário frequentemente.
- Uso de CDN’s: se uma imagem é requisitada uma vez, ela pode ser salva em uma CDN por algum tempo evitando que o serviço do Thumbor seja bombardeado frequentemente com a mesma solicitação.
- Cache no lado do servidor: ao realizar o tratamento de uma imagem pode-se realizar cache no disco da própria máquina. Essa opção se mostra inviável em ambientes clusterizados, já que cada máquina precisaria realizar o processamento da mesma imagem pelo menos uma vez.
- Cache em um sistema de armazenamento externo (como o S3, por exemplo): O Thumbor permite integração fácil com o S3. Ao processar uma imagem é possível solicitar ao Thumbor que faça cache utilizando um bucket. Sempre que a mesma requisição for recebida pelo serviço ele procurará a imagem já processada nesse bucket de cache e somente realizará o processamento caso a imagem não seja encontrada.
- Clusterização: Utilizar técnicas de auto scaling pode ser essencial quando é necessário responder rapidamente às variações na quantidade de acesso. Clusterizar os servidores que executam o Thumbor ajuda a manter a disponibilidade do serviço e garantir a performance, pois todo o processamento será dividido entre as máquinas do cluster.
O importante é verificar qual estratégia de performance é mais indicada para cada tipo de sistema.
Conclusão
O Thumbor é uma ferramenta muito útil no processamento de imagens sob demanda ou não. Mas se usado para processar imagens sob demanda é possível fazer alterações, aplicar filtros, realizar cortes, redimensionamentos e diversos outros tratamentos sempre que necessário bastando apagar o cache, quando existente, sem precisar realizar o processamento de todas as imagens antes que elas sejam usadas.
Começar a utilizar o Thumbor é muito fácil e sua configuração é bem tranquila. Basta executar o servidor e realizar chamadas para as URL’s desejadas.
Sempre que for necessário disponibilizar um novo tamanho de imagem é só gerar a URL e especificar o tamanho desejado sem se preocupar com a execução de reprocessamento de todas as imagens que serão disponibilizadas.
Para cada projeto é necessário verificar se o uso do Thumbor vai ser o mais indicado ou se o pré-processamento de imagens é a melhor alternativa.
Mas, sem dúvidas, é uma alternativa que não deve ser ignorada.
