Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EDU-6261] Add note about ims parameter placement #1518

Merged
merged 4 commits into from
Mar 5, 2025
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,15 @@ For images, Azion recommends that you choose larger time-to-live (TTL) values, s
- **Content varies by some Query String fields (Allowlist)**: if you want to list all the fields in the Query String that will identify your images. **Image Processor** uses the *ims* field, so this has to be included in the list as one of the required fields for your image manager application. For this, you must enable the [Application Accelerator module](/en/documentation/products/build/edge-application/application-accelerator/).
- **Content varies by Query String, except for some fields (Blocklist)**: if you only want to list those fields in the Query String that should be ignored to identify the objects in your cache. In this case, it guarantees that the *ims* field will be removed from the list. For this, you must enable the [Application Accelerator module](/en/documentation/products/build/edge-application/application-accelerator/).
- **Content varies by all Query String fields**: if you don't know or aren't sure about which fields to list in the Query String because you aren't responsible for all the content in the cache or don't have [Application Accelerator](/en/documentation/products/build/edge-application/application-accelerator/) activated.

:::caution
To ensure proper processing of images, the `ims=` query string parameter must be the last parameter in the URL. If any additional query string parameters are included after `ims=`, the request may return a **504** error.

Example of a **valid** URL: https://example.com/image.jpeg?ts=1234&ims=1000x1000

Example of an **invalid** URL (causes Error 504): https://example.com/image.jpeg?ims=1000x1000&ts=1234
:::

6. Edit the remaining settings as required and click the **Save** button.
7. In the **Rules Engine** tab for the edge application, add or edit a **Request phase** rule for one or more image paths.
8. In the **Criteria** section, select the variable to indicate the path of your images in your origin:
Expand All @@ -50,5 +59,3 @@ To resize, crop, optimize, convert, or apply filters to an image, you'll need to
To confirm whether your image is being optimized, [inspect the page](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) using your browser and find the corresponding path in the image. In the URL's query string, the `ims=VALUExVALUE` field corresponds to the resolution loaded on the page.

In addition, **Image Processor** detects the browser's compatibility with WEBP format and, when possible, it'll convert the image format automatically. BMP images will also be automatically converted to JPEG or WEBP, depending on the browser's compatibility.


Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,14 @@ This module supports an array of image formats, including:

---

:::caution
To ensure proper processing of images, the `ims=` query string parameter must be the last parameter in the URL. If any additional query string parameters are included after `ims=`, the request may return a **504** error.

Example of a **valid** URL: https://example.com/image.jpeg?ts=1234&ims=1000x1000

Example of an **invalid** URL (causes Error 504): https://example.com/image.jpeg?ims=1000x1000&ts=1234
:::

## Resize images

Specify the required size as arguments in the query string using the key-value pair `?ims=WidthxHeight`. The `Width` and `Height` parameters should be changed to the width and height of the image in pixels.
Expand Down Expand Up @@ -207,7 +215,3 @@ Combine the filters you want by separating filter with `:` into one string: `fil
For instance, the query `?ims=fit-in/400x400/filters:fill(00ffff):quality(100)` will resize an image to fit an area of 500 by 500 pixels, fill the resized area with the color `#00ffff` and improve the quality to 100%:

<p align="center">[![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))</p>




Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ permalink: /documentacao/produtos/guias/image-processor/

import Tabs from '~/components/tabs/Tabs'


Para configurar o [Image Processor](/pt-br/documentacao/produtos/build/edge-application/image-processor/), siga os passos:

<Tabs client:visible>
Expand All @@ -32,6 +31,15 @@ Para imagens, a Azion recomenda que você escolha valores maiores de time-to-liv
- **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 Accelerator](/pt-br/documentacao/produtos/build/edge-application/application-accelerator/) esteja ativado.
- **Content varies by Query String, except for some fields (Blacklist)**: 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 Accelerator](/pt-br/documentacao/produtos/build/edge-application/application-accelerator/) 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 Accelerator**.

:::caution
Para garantir o processamento adequado das imagens, o parâmetro de query string `ims=` deve ser o último parâmetro na URL. Se quaisquer parâmetros de query string adicionais forem incluídos após `ims=`, a requisição pode retornar um erro **504**.

Exemplo de uma URL **válida**: https://example.com/image.jpeg?ts=1234&ims=1000x1000

Exemplo de uma URL **inválida** (causa erro 504): https://example.com/image.jpeg?ims=1000x1000&ts=1234
:::

6. Edite as configurações restantes conforme necessário e clique no botão **Save**.
7. Na aba **Rules Engine** da edge application, adicione ou edite uma regra **Request** para um ou mais caminhos de imagem.
8. Na seção **Criteria**, selecione a variável para indicar o caminho das imagens na sua origem:
Expand Down Expand Up @@ -99,4 +107,3 @@ Para confirmar se a imagem está sendo otimizada, [inspecione a página](https:/
Além disso, o **Image Processor** detecta a compatibilidade do navegador com o formato WEBP e, quando possível, converterá o formato da imagem automaticamente. As imagens BMP também serão convertidas automaticamente para JPEG ou WEBP, dependendo da compatibilidade do navegador.

---

Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,14 @@ Esse módulo oferece suporte aos seguintes formatos de imagem:

---

:::caution
Para garantir o processamento adequado das imagens, o parâmetro de query string `ims=` deve ser o último parâmetro na URL. Se quaisquer parâmetros de query string adicionais forem incluídos após `ims=`, a requisição pode retornar um erro **504**.

Exemplo de uma URL **válida**: https://example.com/image.jpeg?ts=1234&ims=1000x1000

Exemplo de uma URL **inválida** (causa erro 504): https://example.com/image.jpeg?ims=1000x1000&ts=1234
:::

## Redimensionar a imagem

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.
Expand Down Expand Up @@ -218,7 +226,4 @@ Por exemplo, a query `?ims=fit-in/400x400/filters:fill(00ffff):quality(100)` red

<p align="center">[![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))</p>



---