Image Processor
O Azion Image Processor automatiza seu workflow de tratamento de imagens.
A otimização de suas imagens reduz o tamanho das mesmas, sem perda perceptível de qualidade visual, o que reduz o tempo transferência de seu conteúdo e melhora a experiência de usuário. Isso aumenta a fluidez de suas páginas e a velocidade de navegação, sem você precisar fazer praticamente nada.
Você automatiza seu workflow de tratamento de imagens, utilizando as funções para redimensionar, recortar ou aplicar filtros em suas imagens, sem a necessidade de gerenciar dezenas de versões e recortes de cada imagem em seu acervo.
1. Instruções de uso
Desenvolvemos este produto para que você possa otimizar, redimensionar, recortar e aplicar filtros em suas imagens. Assim, proporcionamos mais velocidade e dinamismo à experiência de seu usuário.
Os formatos de imagem suportados são JPEG, GIF, PNG, BMP, ICO e WEBP (para browsers compatíveis).
Como configurar o Azion **Image Processor**
Para configurar o Azion Image Processor, siga as seguintes etapas, consultando as demais documentações técnicas, sempre que necessário:
Etapa 1. Crie ou edite a configuração de Edge Application para distribuição de suas imagens
- Acesse o Real-Time Manager e entre no menu Edge Services e selecione Edge Application.
- Se você já tiver criado uma configuração de Edge Application para distribuição de suas imagens, pule diretamente para a Etapa 2.
- Caso contrário, crie uma configuração de Edge Application para distribuição de suas imagens, seguindo a documentação de Primeiros Passos
Etapa 2. Habilite Advanced Cache Key para suas imagens
Para utilizar as funcionalidades de redimensionamento, recorte ou aplicação de filtros em imagens, você precisará configurar a variação de conteúdo por Query String:
- Edite a configuração de Edge Application responsável pela distribuição de suas imagens, criada na Etapa 1.
- Na aba Cache Settings, adicione ou edite uma política de cache customizada para suas imagens.
- Atribua um nome sugestivo para sua política, você irá precisar dele na Etapa 3.
- Na seção Expiration Settings, configure a política de expiração de suas imagens no Edge Caching, seguindo o que você aprendeu na documentação de Primeiros Passos; para imagens, a Azion recomenda que você utilize tempos mais longos como Maximum TTL para CDN Cache, como por exemplo, 7.776.000 segundos (3 meses).
- Na seção Advanced Cache Key, selecione uma das opções:
- Content varies by some Query String fields (Whitelist): se você desejar listar todos os campos da Query String que diferenciam suas imagens. O **Image Processor** utiliza o campo ims, que deverá ser incluído na listagem com os demais campos necessários por sua aplicação de gestão de imagens. Essa opção requer o produto Application Acceleration.
- Content varies by Query String, except for some fields (Blacklist): se você desejar listar apenas quais campos da Query String devem ser ignorados ao diferenciar os objetos em cache. Nesse caso, garanta que o campo ims seja removido da listagem. Essa opção requer o produto Application Acceleration.
- Content varies by all Query String fields: se você não sabe ou não se sente seguro para listar os campos da Query String que são responsáveis pela variação do seu conteúdo em cache, ou se não possui o produto Application Acceleration.
- Nas demais seções, edite as configurações de acordo com sua necessidade e salve sua configuração de cache.
Etapa 3. Habilite o **Image Processor**
- Na aba Rules Engine do Edge Application, adicione ou edite uma regra customizada para um ou mais paths de imagens.
-
No campo Path, digite o caminho para suas imagens ou use a regex recomendada pela Azion:
- Caso selecionar o parâmetro
${request_uri}
, utilize a regex abaixo:\.(jpg|jpeg|gif|bmp|png)
- Caso selecionar o parâmetro
${uri}
, utilize a regex abaixo:\.(jpg|jpeg|gif|bmp|png)$
- Caso selecionar o parâmetro
- Escolha o operador lógico Matches, se estiver utilizando expressão regular no campo Path.
- No campo Behavior Set Cache Settings, selecione o preset criado na Etapa 2.
- Também no campo Behavior, selecione Optimize Images.
- Em todas as demais seções, utilize as configurações adequadas para sua necessidade e salve a regra.
A partir de agora, as imagens do path configurado serão automaticamente otimizadas. Além disso, o Image Processor detecta o compatibilidade do browser com o formato WEBP e, quando possível, irá converter o formato da imagem automaticamente, trazendo ainda mais ganhos para você. Imagens BMP também serão automaticamente convertidas para JPEG ou WEBP, dependendo da compatibilidade do browser.
Acompanhe por meio do Real-Time Metrics o gráfico de Bandwidth Saving para monitorar a economia de tráfego resultante da otimização.
Conheça, a seguir, as demais funcionalidades do produto, configuradas como argumentos na Query String da URL da imagem.
2. Redimensionar a imagem com auto-crop
Você pode utilizar o Image Processor da Azion para redimensionar suas imagens, sem a necessidade de ter que gerenciar múltiplos arquivos em seu acervo de imagens.
A partir de uma imagem original de seu acervo, o Image Processor poderá criar imagens derivadas, sob demanda, do tamanho que melhor se adapte à sua página.
Você especifica as dimensões desejadas como argumentos na Query String, no formato:
ims=WidthxHeight
- Width: largura, em pixels, para a imagem derivada
- Height: altura, em pixels, para a imagem derivada
Para redimensionar a imagem preservando o aspect ratio, exclua um dos dois valores, o qual será calculado automaticamente. Utilize Widthx para especificar apenas a largura e deixar que a altura seja calculada proporcionalmente, ou xHeight, para especificar apenas a altura e deixar que a largura seja calculada automaticamente.
Você também pode especificar ambas as dimensões, Width e Height, para recortar (auto-crop) a imagem, nas dimensões desejadas. O recorte é centralizado e pode ocorrer tanto na vertical quanto na horizontal, dependendo do melhor encaixe das dimensões originais nas dimensões especificadas.
Utilize o valor orig em qualquer das dimensões da imagem, se desejar manter a dimensão original. **Exemplos de aplicação
http://yourdomain.com/image.jpg?ims=880x (880 pixels de largura, altura automática)
http://yourdomain.com/image.jpg?ims=880xorig (880 pixels de largura, altura original)
http://yourdomain.com/image.jpg?ims=400x (400 pixels de largura, altura automática)
http://yourdomain.com/image.jpg?ims=400x400 (400 pixels de largura, 400 pixels de altura)
http://yourdomain.com/image.jpg?ims=x100 (largura automática, 100 pixels de altura)
3. Redimensionar a imagem com fit-in
Outra forma de redimensionar a imagem é utilizando fit-in:
ims=fit-in/WidthxHeight
- Width: largura máxima, em pixels, para a imagem derivada
- Height: altura máxima, em pixels, para a imagem derivada
A imagem derivada será redimensionada para caber na área especificada por WidthxHeight. O aspect ratio da imagem original é preservado e, se desejar, você pode ocultar um dos valores.
Caso a área especificada seja maior do que as dimensões da imagem, a imagem não será aumentada. As dimensões especificadas como parâmetros do fit-in representam os limites de tamanho máximo da área que a imagem pode ocupar. Uma ou ambas as dimensões da imagem poderá ser menor do que a área delimitadora.
Exemplo de aplicação
https://yourdomain.com/image.jpg?ims=fit-in/400x400 (largura máxima de 400 pixels e altura máxima de 400 pixels)
4. Recortar a imagem
O recorte da imagem pode ser feito informando um ponto inicial (AxB) e um ponto final (CxD), como argumento na Query String da URL da imagem:
ims=AxB:CxD
- AxB: ponto inicial do recorte indicando a posição, em pixels, do canto superior esquerdo da área a ser recortada.
- CxD: ponto final do recorte indicando a posição, em pixels, do canto inferior direito da área a ser recortada.
Exemplo de aplicação
http://yourdomain.com/image.jpg?ims=430x20:910x730
5. Alterar qualidade da imagem
O Image Processor otimiza suas imagens, reduzindo o tamanho do arquivo e, portanto, o tempo de transferência do mesmo. O valor default de qualidade utilizado é de 85%, o que proporciona otimização sem perda perceptível de qualidade visual.
Se necessário, você pode definir uma qualidade customizada para suas imagens, utilizando o filtro:
filters:quality(Number)
Onde Number deve ser um número inteiro entre 0 e 100, que representa a qualidade desejada.
Exemplo de aplicação~
http://yourdomain.com/image.jpg?ims=filters:quality(100)
http://yourdomain.com/image.jpg?ims=filters:quality(85)
http://yourdomain.com/image.jpg?ims=filters:quality(15)
6. Adicionar marca d’água na imagem
Para adicionar marca d’água em imagens utilizando o Image Processor, utilize o filtro:
filters:watermark(ImageURL,X,Y,Alpha)
- ImageURL: é a URL da imagem que deve ser inserida como marca d’água. Caso a URL contenha parênteses, eles devem ser codificados como %28 para “(” e %29 para “)”.
- X: posição horizontal de inserção da marca d’água. Números positivos representam deslocamento, em pixels, da borda à esquerda para a direita, enquanto números negativos reprentam deslocamento da borda à direita para a esquerda. Pode ser utilizado o valor center, para centralizar horizontalmente a marca d’água, ou o valor repeat, para preencher horizontalmente a imagem com repetições da marca d’água.
- Y: posição vertical de inserção da marca d’água. Números positivos representam um deslocamento, em pixels, do topo para a base, enquanto números negativos representam deslocamento da base para o topo. Pode ser utilizado o valor center, para centralizar verticalmente a marca d’água, ou o valor repeat, para preencher verticalmente a imagem com repetições da marca d’água.
- Alpha: transparência da marca d’água. Deve ser um número entre 0 (completamente opaco) e 100 (completamente transparente).
Exemplo de aplicação
http://yourdomain.com/image.jpg?ims=filters:watermark(http://yourdomain.com/watermark-image.png,-25,-10,50)
7. Converter o formato de uma imagem
Você pode converter o formato de uma imagem utilizando o filtro:
filters:format(ImageFormat)
Onde ImageFormat pode assumir os valores webp, jpeg, gif ou png.
Exemplo de aplicação
Para converter uma image jpeg para gif:
http://yourdomain.com/image.jpg?ims=filters:format(gif)
8. Preencher imagem
O Image Processor também pode ser utilizado para gerar uma imagem derivada em um tamanho maior do que o da original, mas ao invés de redimensioná-la para o tamanho desejado, preencher o espaço com uma cor customizada. Utilize o parâmetro de fit-in com as dimensões desejadas associado com filtro fill:
filters:fill(Color)
Onde Color é a cor de preenchimento, seguindo a nomenclatura e códigos especificados para o padrão HTML.
Exemplo de aplicação
http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(gray)
http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(008080)
http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(00ffff)
9. Combinar filtros
O Image Processor permite que você combine os filtros desejados separando os mesmos por “:”.
filters:filter1(arg1):filter2(arg2)
Onde filter1(arg1) e filter2(arg2) são os filtros que você deseja aplicar.
Exemplo de aplicação
http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(gray):quality(100)
Não encontrou o que procurava? Abra um ticket.