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.

Instruções de uso

Redimensionar a imagem com auto-crop

Redimensionar a imagem com fit-in

Recortar a imagem

Alterar qualidade da imagem

Adicionar marca d’água na imagem

Converter o formato de uma imagem

Preencher imagem

Combinar filtros

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)$
```
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.