Image Processor

Image Processor é um módulo para Edge Application que aplica filtros em suas imagens e reduz o tamanho das mesmas, sem perda perceptível de qualidade visual. Com Image Processor, você consegue reduzir o tempo de transferência de seu conteúdo e aumenta a velocidade de navegação para seus usuários em suas aplicações.

Instruções de uso

Redimensionar a imagem com auto-crop

Redimensionar a imagem com fit-in

Recortar a imagem

Alterar a qualidade da imagem

Adicionar marca d’água na imagem

Converter o formato de uma imagem

Preencher a imagem

Combinar filtros

1. Instruções de uso

Esse módulo oferece suporte aos seguintes formatos de imagem:

JPEG
GIF
PNG
BMP
ICO
WEBP (para navegadores compatíveis)

Para configurar esse módulo, siga os passos:

Acesse o Real-Time Manager.
No canto superior esquerdo da página, acesse o Products menu > Edge Application.
Selecione a Edge Application responsável pela distribuição de suas imagens da sua lista de aplicações ou crie uma nova aplicação.
Na aba Main Settings, habilite o módulo Image Processor.
Na aba Cache Settings, adicione ou edite uma política de cache customizada para suas imagens.
Na seção Expiration Settings, configure a política de expiração de suas imagens no Edge Caching.

Dica: 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çao Advanced Cache Key, selecione uma das opções:
- Content varies by some Query String fields (Allowlist): 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 que o módulo Application Acceleration esteja ativado.
- Content varies by Query String, except for some fields (Blocklist): 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 módulo Application Acceleration esteja ativado.
- 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.
Altere as demais seções e clique no botão Save para salvar a sua configuração de cache.
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 expressão regular recomendada pela Azion:

Caso você selecione o parâmetro ${request_uri}, utilize a regex abaixo:**
```
\.(jpg|jpeg|gif|bmp|png)
```
Caso você selecione o parâmetro ${uri}, utilize a regex abaixo:**
```
\.(jpg|jpeg|gif|bmp|png)$
```
Se você estiver utilizando expressão regular no campo Path, utilize o operador lógico Matches.
No campo Behavior > Set Cache Settings, selecione o preset criado.
No campo Behavior, selecione Optimize Images.
Clique no botão Save para salvar a sua regra.

A partir de agora, as imagens do path configurado serão automaticamente processadas. Além disso, o Image Processor detecta a compatibilidade do navegador 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 navegador.

Acompanhe por meio do Real-Time Metrics o gráfico de Bandwidth Saving para monitorar a economia de tráfego resultante do processamento de imagens.

2. Redimensionar a imagem com auto-crop

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

Os parâmetros Width e Height devem ser alterados para a largura e altura da imagem, respectivamente, em pixels.

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:

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

Os parâmetros Width e Height devem ser alterados para a largura e altura da imagem, respectivamente, em pixels.

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ão ser menores do que a área delimitadora.

Exemplo:

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 é o ponto inicial do recorte indicando a posição, em pixels, do canto superior esquerdo da área a ser recortada.
CxD é o ponto final do recorte indicando a posição, em pixels, do canto inferior direito da área a ser recortada.

Exemplo:

http://yourdomain.com/image.jpg?ims=430x20:910x730 (coordenada inicial de 430x20 pixels e coordenada final 910x730 pixels)

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.

Você pode definir uma qualidade customizada para suas imagens, utilizando o filtro:

filters:quality(Number)

Number deve ser um número inteiro entre 0 e 100, que representa a qualidade desejada.

Exemplo:

http://yourdomain.com/image.jpg?ims=filters:quality(100) (100% de qualidade)

http://yourdomain.com/image.jpg?ims=filters:quality(85) (85% de qualidade)

http://yourdomain.com/image.jpg?ims=filters:quality(15) (15% de qualidade)

Para confirmar que sua imagem está sendo otimizada, inspecione a página pelo seu navegador e localize o caminho correspondente da imagem. Na query string da URL, o campo ims=VALORxVALOR corresponde à resolução que será carregada na página.

O campo ims também permite que você altere a otimização, a qualidade e o tamanho conforme necessário. Para visualizar o arquivo original, basta remover a query string da URL.

Nota: Se for inserida uma resolução maior que a original, o IMS irá exibir a imagem com a maior resolução possível.

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 é a 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 representam 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 é a 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 é a transparência da marca d’água. Deve ser um número entre 0 (completamente opaco) e 100 (completamente transparente).

Exemplo:

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)

ImageFormat pode assumir os valores webp, jpeg, gif ou png.

Exemplo:

http://yourdomain.com/image.jpg?ims=filters:format(gif) (converte uma imagem JPEG para 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, preenche 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)

Color é a cor de preenchimento, seguindo a nomenclatura e códigos especificados para o padrão HTML.

Exemplo:

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)

filter1(arg1) e filter2(arg2) são os filtros que você deseja aplicar.

Exemplo:

http://yourdomain.com/image.jpg?ims=fit-in/400x400/filters:fill(gray):quality(100)

Não encontrou o que procurava? Abra um ticket.