1. Documentação
2. Produtos
3. Image Processor

Image Processor

Edite no GitHub

O Azion Image Processor automatiza seu workflow de tratamento de imagens.

O processamento de suas imagens reduz o tamanho das mesmas, sem perda perceptível de qualidade visual, o que reduz o tempo de 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
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

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

Configure o Azion Image Processor, conforme as etapas a seguir e consulte 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

1. Acesse o Real-Time Manager e entre no menu Edge Computing > Edge Application;
2. Se você já tiver criado uma configuração de Edge Application para distribuição de suas imagens, pule diretamente para a Etapa 2;
3. 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:

1. Edite a configuração de Edge Application responsável pela distribuição de suas imagens, criada na Etapa 1;
2. Na aba Cache Settings, adicione ou edite uma política de cache customizada para suas imagens;
3. Atribua um nome sugestivo para sua política, você irá precisar dele na Etapa 3;
4. 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);
5. Na seção 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 o produto Application Acceleration.
   • 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 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.
6. Nas demais seções, edite as configurações de acordo com sua necessidade e clique no botão Save para salvar a sua configuração de cache.

Etapa 3. Habilite o Image Processor

1. Na aba Rules Engine do Edge Application, adicione ou edite uma regra customizada para um ou mais paths de imagens;

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

3. Escolha o operador lógico Matches, se estiver utilizando expressão regular no campo Path;

4. No campo Behavior Set Cache Settings, selecione o preset criado na Etapa 2;

5. Também no campo Behavior, selecione Optimize Images;

6. Em todas as demais seções, utilize as configurações adequadas para sua necessidade;

7. 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 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 do processamento de imagens.

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.

Exemplo 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 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: 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.