Enable image transformation - Edge Security Acceleration: Central de Documentação do Alibaba Cloud

O Edge Security Acceleration (ESA) transforma imagens de origem na borda ao converter formatos, ajustar qualidade, recortar e redimensionar. Em seguida, armazena os resultados em cache para aumentar a velocidade de entrega e reduzir o tráfego de retorno à origem.

Limites

O processamento de imagens está sujeito aos seguintes limites:

Limites da imagem original:

Formatos de imagem compatíveis: JPEG, JPG, PNG, WebP, BMP, GIF, TIFF e JPEG 2000.
O tamanho da imagem original não deve exceder 10 MB.
O product largura × altura não pode ultrapassar 16.777.216 pixels.

Nota
Para imagens GIF, o total de largura × altura corresponde à soma de todos os quadros. Use ferramentas como ImageMagick para visualizar detalhes dos quadros de uma imagem GIF.

Limites da imagem transformada:

O product largura × altura não deve exceder 16.777.216 pixels.
Na conversão para o formato WebP, o product largura × altura não pode ultrapassar 16.777.216 pixels, e nem a largura nem a altura podem exceder 16.384 pixels individualmente. Se a imagem source for animada, ela se tornará estática após a conversão para WebP.

Limites de pré-busca de cache:

As transformações de imagem não se aplicam a conteúdo pré-buscado no cache. Durante a pré-busca, os nós do ESA obtêm apenas os arquivos de imagem originais, sem executar transformações.

Ative transformação de imagem

No console ESA, selecione Websites e, na coluna Websites, clique em o site desejado.
No painel de navegação à esquerda, selecione Websites > Website.
Acesse a aba Speed and Network e ative o botão Optimize. Em seguida, adicione parâmetros de processamento de imagem à URL da solicitação para aplicar diferentes transformações.

Por exemplo, em JavaScript, escreva uma função de manipulação de URL para converter uma imagem para outro formato.
```
function updateImageUrl(format) {
  let baseUrl = "https://example.com/image_01";
  let newUrl = `${baseUrl}.png?image_process=format,${format}`;
  document.getElementById('imageElement').src = newUrl;
}

// Example call to convert to BMP format
updateImageUrl("bmp");

// To convert to another format, such as JPG:
// updateImageUrl("jpg");
```
No código acima, image_process=format,${format} especifica o parâmetro de transformação de imagem. Para obter mais parâmetros compatíveis e seus valores válidos, consulte Supported image processing methods.

WebP Adaptativo e AVIF Adaptativo

Ao ativar o Speed Optimization ou o Status, os nós do ESA detectam a compatibilidade do navegador e convertem as imagens de origem para o formato WebP ou AVIF antes de retorná-las aos clientes, o que reduz o tamanho da transmissão. É possível ativar cada configuração independentemente.

Para ativar o WebP Adaptativo ou o AVIF Adaptativo

No cartão Adaptive WebP, clique em Settings para expandir o formulário de configuração.
Se o botão Adaptive AVIF estiver desativado, ative-o.
Ative o botão Image Transform ou Status. Ambos podem ser ativados simultaneamente.
Clique em Adaptive WebP para salve a configuração.

A conversão adaptativa ocorre somente quando todas as condições abaixo são atendidas:

O cabeçalho Accept da solicitação contém image/avif ou image/webp.
O tamanho e a resolução da imagem de origem não excedem os limites do recurso de transformação de imagem. Para obter detalhes, consulte Limites.
O formato da imagem de origem é JPEG, JPG, PNG, WebP, BMP, GIF, TIFF, JPEG 2000 ou AVIF. O formato é determinado pelo cabeçalho de resposta Content-Type ou pela extensão do arquivo na solicitação.
Se você ativar tanto o Adaptive AVIF quanto o OK, os nós do ESA converterão as imagens para o formato AVIF.

Validação da transformação

Solicitação original

Solicite example.com/bb.jpeg. A resposta retorna uma imagem com orientação normal no formato .jpeg.

Solicitação transformada

Conversão de formato: Para converter uma imagem .jpeg para .png, altere a URL da solicitação para example.com/bb.jpeg?image_process=format,png. A resposta retornará uma imagem .png.
Rotação de imagem: Para girar a imagem 90° no sentido horário, altere a URL da solicitação para example.com/bb.jpeg?image_process=rotate,90. A resposta retornará a imagem rotacionada em 90° no sentido horário.

Métodos de processamento de imagem compatíveis

O ESA permite aplicar um ou mais parâmetros de transformação a uma imagem. A tabela a seguir lista os parâmetros compatíveis.

Recurso de processamento de imagem	Parâmetro de processamento	Descrição
Format conversion	format	Converte o formato da imagem.
Quality conversion	quality	Ajusta a qualidade da imagem.
Image cropping	crop	Recorta a imagem para um tamanho especificado.
Image scaling	resize	Redimensiona a imagem para um tamanho especificado. Atualmente, apenas a redução é compatível; o aumento não está disponível.
Image rotation	Rotação automática: auto-orient Rotação especificada: rotate	Gira a imagem automaticamente com base em seus metadados ou a rotaciona no sentido horário por um ângulo especificado.
Image color	Brilho: bright Contraste: contrast Nitidez: sharpen	Ajusta o brilho, o contraste e a definição da imagem.
Add watermark	watermark	Adiciona uma marca d'água de imagem ou texto à figura.
Get info	info	Recupera informações da imagem, incluindo dimensões, formato e qualidade.

Relação entre recursos globais e baseados em regras

As configurações globais aplicam-se a todas as solicitações de um site. Para ativar transformações de imagem apenas para solicitações específicas, utilize configurações baseadas em regras com condições que correspondam às solicitações desejadas. O equivalente baseado em regras da transformação de imagem global é a Image Optimization.

Comparação com o processamento de imagem do OSS

Tanto a transformação de imagem do ESA quanto o processamento de imagem do OSS modificam imagens por meio de parâmetros de URL. O ESA processa imagens na borda, sendo ideal para cenários de aceleração de borda. Já o Object Storage Service (OSS) processa imagens no lado do service de armazenamento, adequando-se a cenários de storage. Se você já utiliza o processamento de imagem do OSS, escolha conforme seu cenário: use o ESA para aceleração de borda e o OSS para armazenamento.