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
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 valorcenter
, para centralizar horizontalmente a marca d’água, ou o valorrepeat
, 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 valorcenter
, para centralizar verticalmente a marca d’água, ou o valorrepeat
, 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.