ImageBoss: gerando thumbs de forma inteligente.

Dias atrás estava travado em mais um daqueles problemões, que a gente sempre enfrenta quando decide colocar uma ideia em prática.
Esse não foi o primeiro que encontramos pela frente aqui no Clube do Código…

Já sei…vou fazer aquela ligação direta para Portugal, mais precisamente Lisboa, para trocar aquela ideia com meu grande amigo Igor Escobar e quem sabe entre os vários assuntos que irão surgir ele resolva meu problema como sempre.

O final a gente já sabe, o erro estava na minha cara, como acontece com a grande maioria dessas “tretas brabas” e só de sair um pouco do foco e falar sobre outras tecnologias o negócio clareou…

Bem vindo ao mundo ImageBoss

Nesse vai e vem de assuntos Igor me apresentou seu mais novo projeto(filho) o ImageBoss, que tem como objetivo tomar conta do processamento e entrega das imagens do teu site para você.

On-demand image processing.

Grande parte dos sites hoje em dia em algum momento da sua vida vai precisar gerar algum thumb, nem que seja para exibir a foto do perfil de um usuário, não tem como escapar.

É na hora que o ImageBoss entra no jogo!

Através de parâmetros configurados via url você consegue processar o thumb do teu usuário para infinitos tamanhos ex: [200×200], [350×350] e aplicar efeitos como Blur e Grayscale.

Saca só:

antes
antes
depois
depois

 

https://service.imageboss.me/cover/150×150/grayscale:true/http://imageboss.me/examples/01.jpg

O que fizemos nessas poucas linhas de comando foi utilizar 3 efeitos diferentes para gerar uma thumb perfeita, vou explicar:

Cover

Esse filtro é doidão…ele encontra o ponto mais importante da foto na hora de gerar o thumb. No exemplo utilizamos uma foto onde o casal esta no canto direito da foto e a nova imagem de [150×150] foi gerada com os dois no centro.

Largura x Altura

No caso estamos definido que a imagem processada terá 150 de largura e 150 de altura. Existe a possibilidade de definir apenas a largura ou só altura, mas vou deixar essa parte contigo, ele explicou tudo lá no docs.

Grayscale

O próprio nome já diz, simples e didático: grayscale:true  e pronto, sua foto esta em preto e branco.

CDN

Todos nós aqui sabemos da importância de utilizar uma CDN hoje em dia, certo?
Essa é uma das features que estamos utilizando aqui no Clube do Código e acho que é umas das mais importantes pelo custo/benefício.
Caso ainda exista algumas dúvidas, vou explicar:

Latência

Imagina o seguinte: teus clientes estão aqui no Brasil e teu site está hospedado lá na China, o download das imagens para essa galera vai demorar um pouco né?
Com sua imagem hospedada em uma CDN ela vai estar distribuída geograficamente, ou seja, sempre que for requisitada ela vai ser entregue pelo servidor mais perto possível do cliente.

Downloads paralelos

Os navegadores não gostam de fazer download de muitos arquivos do mesmo domínio, causando aquele travamento de tela, atrapalhando a experiência do usuário e ferrando até mesmo o SEO da página.

Para driblar isso a galera gosta de servir JS, CSS e imagens de domínios diferentes do principal, deixando o carregamento do site muito mais rápido e fluido.

Cache

Uma vez que o Cliente 1 requisitou a imagem, na próxima vez que ele entrar no site, ao invés, de processar e aplicar todos os filtros novamente o navegador vai utilizar uma versão salva em cache para exibi-lá sem nenhum custo de processamento.

Progressive Images

Essa também estamos utilizando e melhora muito a experiência do usuário.

Imagina que você tem uma imagem com uma qualidade muito boa, mas sempre demora muito para ser entregue para seus usuários. Será que se ela não for aparecendo aos poucos o usuário não vai ficar tão irritado?

Essa é a ideia da Progressive Images, vou deixar um exemplo para ficar mais claro:

processando...
processando…
carregada
carregada

 

É coisa pra caramba, né? E não falei sobre a compressão que ele faz nas imagens, mas dai fica contigo conhecer um pouco mais do serviço, tu pode testar por 10 dias!

Entra lá!