title | description | meta_tags | namespace | permalink |
---|---|---|---|---|
Image Processor |
Otimize, redimensione, recorte e aplique filtros em suas imagens automaticamente, proporcionando mais velocidade e dinamismo à experiência do seu usuário nas suas aplicações web. |
Image Processor, edge computing |
documentation_products_image_optimization |
/documentacao/produtos/build/edge-application/image-processor/ |
import Button from '~/components/Button.astro'
O Image Processor é um módulo do Edge Application que pode manipular e processar imagens diretamente no edge, otimizando os tempos de transferência de conteúdo e elevando a experiência do usuário em suas aplicações.
Começando com uma imagem original da sua biblioteca, o Image Processor pode criar imagens derivadas sob demanda, permitindo que você:
- Redimensione imagens para atender às suas necessidades.
- Corte imagens com precisão.
- Otimize os tempos de processamento mantendo a qualidade das imagens.
- Converta formatos de imagem no edge.
- Aplique filtros ou adicione marcas d'água para aprimorar a imagem.
:::tip 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. :::
Escopo | Recurso |
---|---|
Primeiros passos | Primeiros passos do Image Processor |
Esse módulo oferece suporte aos seguintes formatos de imagem:
- JPEG
- GIF
- PNG
- BMP
- ICO
- WEBP (para navegadores compatíveis)
Você especifica as dimensões desejadas como argumentos na query da URL no formato ims=WidthxHeight
. Os parâmetros Width
e Height
devem ser alterados para a largura e altura da imagem, respectivamente, em pixels.
O arquivo /image.jpg?ims=WidthxHeight
a seguir seria redimensionado de acordo com os parâmetros Width
e Height
definidos:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=880x)](/assets/docs/images/image-processor/Image_Processor_1.png?ims=880x)
Ao especificar Width
e Height
, a imagem pode ser cortada automaticamente para se ajustar ao tamanho necessário. O corte é centralizado e pode ser vertical ou horizontal, dependendo da adequação das dimensões originais às dimensões especificadas.
Ao adicionar a query ?ims=400x400
à URL da imagem, ela será redimensionada para 400 por 400 pixels com corte automático. Por exemplo:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=400x400)](/assets/docs/images/image-processor/Image_Processor_1.png?ims=400x400)
A proporção pode ser preservada mantendo-se apenas um dos dois parâmetros na query da URL. Você pode preservar a largura usando Widthx
para calcular a altura correspondente, ou xHeight
para especificar apenas a altura e calcular a largura correspondente.
Ao alterar a query da imagem para ?ims=400x
, a altura será calculada automaticamente e a largura será definida como 400 pixels:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=400x)](/assets/docs/images/image-processor/Image_Processor_1.png?ims=400x)
Por outro lado, ao usar a query ?ims=x100
, a largura será calculada automaticamente, mas a altura será definida como 100 pixels:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=x100)](/assets/docs/images/image-processor/Image_Processor_1.png?ims=x100)
O valor orig
pode ser substituído para manter a dimensão original da imagem sem o corte automático.
A imagem a seguir tem a query ?ims=450xorig
, mantendo a altura original, mas definindo a largura para 450 pixels:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=450xorig)](/assets/docs/images/image-processor/Image_Processor_1.png?ims=450xorig)
Outra maneira de redimensionar uma imagem para ajustá-la a uma área específica é usar a query ?ims=fit-in/WidthxHeight
.
A proporção da imagem original é preservada. Se a área especificada for maior que as dimensões da imagem, a imagem manterá seu tamanho original. Não é necessário especificar ambas as dimensões, pois uma ou ambas as dimensões da imagem podem ser menores que seus limites.
Uma imagem com a query ?ims=fit-in/400x400
será redimensionada para se ajustar ao limite máximo de tamanho da área que pode ocupar; nesse caso, 400 pixels de largura ou 400 pixels de altura, o que for atingido primeiro:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/400x400)](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/400x400)
Corte imagens de uma coordenada para outra usando a query ims=AxB:CxD
, onde:
AxB
é o ponto de partida para o corte. Ele indica as coordenadas, em pixels, do canto superior esquerdo da imagem onde o corte começa.CxD
é o ponto final do corte. Indica as coordenadas, em pixels, do canto inferior direito da imagem, onde o corte termina.
Por exemplo, a query da URL da imagem ?ims=430x20:910x730
iniciará o corte na coordenada inicial de 430x20 pixels e terminará na coordenada 910x730 pixels.
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=430x20:910x730)](/assets/docs/images/image-processor/Image_Processor_1.png?ims=430x20:910x730)
Você pode rotacionar uma imagem à esquerda usando a query ?ims=filters:rotate(Angle)
. Você pode especificar Angle
como os seguintes valores:
0
: não rotaciona.90
: rotaciona a imagem 90° à esquerda.180
: rotaciona a imagem 180° à esquerda.270
: rotaciona a imagem 270° à esquerda.360
: não rotaciona.
Valores diferentes dos listados acima não irão rotacionar a imagem.
:::caution[atenção]
Imagens com uma proporção de 1:1 não irão ser redimensionadas. Porém, imagens que não são quadradas, quando rotacionadas a 90
e 270
graus, terão seus valores de altura e largura modificados.
:::
Essa imagem foi rotacionada por 270° através da query ?ims=filters:rotate(270)
:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:rotate(270))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:rotate(270))
Reduza o tamanho do arquivo e o tempo de transferência processando valores de qualidade mais baixos sem afetar o visual da imagem, adicionando a query ?ims=filters:quality(value)
. O valor
deve ser um número inteiro entre 0
e 100
, que representa o nível de qualidade que você deseja aplicar à imagem.
O valor de qualidade recomendado, que fornece otimização sem nenhuma perda perceptível de qualidade visual, é 85%.
A imagem a seguir tem a query ?ims=filters:quality(100)
, para 100% de qualidade:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:quality(100))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:quality(100))
A próxima imagem tem a qualidade recomendada de 85% por meio da query ?ims=filters:quality(85)
:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:quality(85))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:quality(85))
Por fim, a próxima imagem foi ajustada para 15% de qualidade com a query ?ims=filters:quality(15)
:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:quality(15))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:quality(15))
:::note Se você inserir uma resolução maior que a original, a imagem será exibida com a maior resolução possível. :::
Adicione marcas d'água às suas imagens acrescentando a query ?ims=filters:watermark(WatermarkURL,X,Y,Alpha,WidthRatio,HeightRatio)
, onde:
WatermarkURL
é a URL da imagem que você deseja inserir como marca d'água. Se a URL contém parênteses, eles devem ser codificados como%28
para(
e%29
para)
.X
representa a posição horizontal para a inserção da marca d'água. Números positivos representam o deslocamento, em pixels, da esquerda para a direita, enquanto números negativos representam o deslocamento da direita para a esquerda.- Insira o valor
center
para centralizar a marca d'água horizontalmente. - Insira o valor
repeat
para preencher a imagem com repetições horizontais da marca d'água. - Insira um número positivo ou negativo seguido de um
p
(por exemplo,20p
) para calcular a posição horizontal como uma porcentagem da largura da imagem.
- Insira o valor
Y
representa a posição vertical para a inserção da marca d'água. Números positivos representam o deslocamento, em pixels, de cima para baixo, enquanto números negativos representam o deslocamento de baixo para cima.- Insira o valor
center
para centralizar a marca d'água verticalmente. - Insira o valor
repeat
para preencher a imagem com repetições verticais da marca d'água. - Insira um número positivo ou negativo seguido por um
p
(por exemplo,20p
) para calcular a posição vertical como uma porcentagem da largura da imagem.
- Insira o valor
Alpha
define a transparência da marca d'água. Deve ser um número entre0
(completamente opaco) e100
(completamente transparente).WidthRatio
é um parâmetro opcional que define a largura da marca d'água como uma porcentagem em relação à imagem. Se você não especificar um valor, ele será definido comonone
.HeightRatio
é um parâmetro opcional que define a altura da marca d'água como uma porcentagem em relação à imagem. Se você não especificar um valor, ele será definido comonone
.
Por exemplo, a query ?ims=filters:watermark(http://seudominio.com/imagens-marca-dagua.png,repeat,20p,50,10,none)
repetirá a marca d'água horizontalmente, a 20% da altura da imagem, com 50% de transparência, redimensionada para 10% da largura da imagem.
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_2.png?ims=filters:watermark(https://raw.githubusercontent.com/aziontech/docs/main/public/assets/docs/images/azion-logo.png,repeat,20p,50,10,none))](/assets/docs/images/image-processor/Image_Processor_2.png?ims=filters:watermark(https://raw.githubusercontent.com/aziontech/docs/main/public/assets/docs/images/azion-logo.png,repeat,20p,50,10,none))
Você pode converter a imagem em outro formato usando a query ?ims=filters:format(ImageFormat)
. O ImageFormat
pode ser substituído por webp
, jpeg
, gif
ou png
.
Portanto, a imagem PNG http://yourdomain.com/image.png?ims=filters:format(gif)
será convertida para o formato GIF:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:format(gif))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=filters:format(gif))
:::caution
Para converter uma imagem em WEBP, você deve enviar o cabeçalho Accept: image/webp
na requisição.
:::
Crie uma imagem derivada que seja maior que a original, mas, em vez de redimensioná-la para o tamanho necessário, você pode preencher a área com uma cor personalizada adicionando a query ?ims=fit-in/WidthxHeight/filters:fill(Color)
a URL. Você pode usar os mesmos [parâmetros de redimensionamento] (#resize-to-fit-dimensions) com as dimensões desejadas para Width
e Height
.
Color
é a cor de preenchimento, seguindo os valores de código hexadecimal.
Por exemplo, uma imagem com a query ?ims=fit-in/400x400/filters:fill(gray)
terá seu entorno redimensionado para caber em uma área de 400x400 pixels, e a cor em torno dessa área será cinza:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/400x400/filters:fill(gray))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/400x400/filters:fill(gray))
Ao alterar o código de cor, você pode modificar a cor ao redor da área redimensionada, como ?ims=fit-in/300x400/filters:fill(008080)
:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/300x400/filters:fill(008080))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/300x400/filters:fill(008080))
Combine os filtros desejados separando-os com :
em uma única string: filters:filter1(arg1):filter2(arg2)
.
Por exemplo, a query ?ims=fit-in/400x400/filters:fill(00ffff):quality(100)
redimensionará uma imagem para caber em uma área de 500 por 500 pixels, preencherá a área redimensionada com a cor #00ffff
e melhorará a qualidade para 100%:
[![Image_Processor_1](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/500x500/filters:fill(f3652b):quality(100))](/assets/docs/images/image-processor/Image_Processor_1.png?ims=fit-in/500x500/filters:fill(f3652b):quality(100))
import ContributorList from '~/components/ContributorList.astro'
Contribuidores Contributor