1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

doc

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.

  1. Instruções de uso
  2. Redimensionar a imagem com auto-crop
  3. Redimensionar a imagem com fit-in
  4. Recortar a imagem
  5. Alterar a qualidade da imagem
  6. Adicionar marca d’água na imagem
  7. Converter o formato de uma imagem
  8. Preencher a imagem
  9. Combinar filtros

1. Instruções de uso

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

Para configurar esse módulo, siga os passos:

  1. Acesse o Real-Time Manager.
  2. No canto superior esquerdo da página, acesse o Products menu > Edge Application.
  3. Selecione a Edge Application responsável pela distribuição de suas imagens da sua lista de aplicações ou crie uma nova aplicação.
  4. Na aba Main Settings, habilite o módulo Image Processor.
  5. Na aba Cache Settings, adicione ou edite uma política de cache customizada para suas imagens.
  6. 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).

  7. 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.
  8. Altere as demais seções e clique no botão Save para salvar a sua configuração de cache.
  9. Na aba Rules Engine do Edge Application, adicione ou edite uma regra customizada para um ou mais paths de imagens.
  10. 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)$
    
  11. Se você estiver utilizando expressão regular no campo Path, utilize o operador lógico Matches.
  12. No campo Behavior > Set Cache Settings, selecione o preset criado.
  13. No campo Behavior, selecione Optimize Images.
  14. 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)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=880xorig (880 pixels de largura, altura original)

Image_Processor_2

http://yourdomain.com/image.jpg?ims=400x (400 pixels de largura, altura automática)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=400x400 (400 pixels de largura, 400 pixels de altura)

Image_Processor_1

http://yourdomain.com/image.jpg?ims=x100 (largura automática, 100 pixels de altura)

Image_Processor_1


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)

Image_Processor_1


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)

Image_Processor_7


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)

Image_Processor_1

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

Image_Processor_1

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

Image_Processor_1

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)

Image_Processor_1


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)

Image_Processor_1

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

Image_Processor_1

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

Image_Processor_1


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.