--- title: "Image Optimization" sidebar_label: "Image Optimization" description: "How image optimization works, how to enable it, and how to configure optimization settings on your website" sidebar_position: 4 --- import Formbricks from '@theme/MDXComponents/Formbricks'; import { CustomTable } from 'docs-kit/components'; # Image optimization Image optimization allows you to reduce the size of `JPEG`, `PNG`, `GIF`. Optimization can be achieved by: * quality reduction; * file conversion to `WebP`; * resizing; * using progressive `JPEG` — gradual image rendering during loading. If an image has not been optimized, the user will receive the original version, which is also saved to the cache. ## How it works \{#principle-of-operation} Images are stored on the source in their original form. When a request to load a `JPEG`, `PNG`, `GIF` image is sent from a CDN server to the source, the image is converted to `WebP` and cached on the CDN server that sent the request. To compress, resize, and apply progressive encoding to `JPEG` for individual images, use URI parameters specified in the image link in your website code. Settings are applied immediately after saving the code. Upon the first image request, the CDN server may return the original version to avoid delays. Subsequently, the compressed image is loaded into the CDN server cache. The user will receive this version with every new request. ## Pricing \{#price} Optimization is billed monthly according to the subscription plan. The subscription plan includes a package of 10 000 compression requests per month, which applies to all CDN resources on the account where optimization is enabled. One image is processed per compression request. The first payment for the subscription plan is charged when the option is enabled for any of the account's CDN resources. Subsequent payments are charged on the first day of each calendar month. If the request package under the subscription plan is exhausted, each additional request is billed separately according to the [pay-as-you-go](/balance-and-payments/payment-models.mdx#pay-as-you-go). model. You can view prices on [selectel.ru](https://selectel.ru/prices/calculator/?product=cdn). ## Limits and restrictions \{#limits-and-restrictions} Some images cannot be converted to `WebP`: * if the image size exceeds 2 MB. If you want to convert images larger than 2 MB, [create a ticket](https://my.selectel.ru/tickets/create/); * if the user's browser does not support the `WebP` format. Such images will be delivered in their original form. ## Configuring image optimization \{#set-optimization} 1. [Enable optimization in the control panel](#enable-optimization-in-control-panel). 2. If you want to configure custom processing parameters for specific images, [configure URI parameters on your site](#set-uri-parameters). 3. [Verify that compression is working](#check-optimization). ### 1. Enable optimization in the control panel \{#enable-optimization-in-control-panel} 1. In the [control panel](https://my.selectel.ru/cdn-v3), go to the top menu, click **Products**, and select **CDN**. 2. In the **CDN Resources** section, open the resource page → tab **Optimization**. 3. Ensure that in the **Optimization type** block, **Static \*\*\*\* is selected**. 4. In the **Image optimization** block, check the **Image optimization \*\*\*\* checkbox**. 5. Click **Apply**. While settings are being applied, the CDN resource status will be `PROCESSING`. You cannot apply other settings during this time. Settings will take effect when the CDN resource transitions to the `ACTIVE`` status`. ### 2. Optional: configure URI parameters on your website \{#set-uri-parameters} 1. Open the source code of the website where your images are hosted. 2. Insert the URI parameter into the image link in your code: ```bash https:///ioss(=)/ ``` Specify: * `` — [default domain](/cdn/resources/domains.mdx#default-domain) or [personal domain](/cdn/resources/domains.mdx#personal-domain); * `` — a parameter for image modification. You can view available parameters in the [URI image modification parameters](#uri-modification-parameters)[ table](#uri-modification-parameters); * `` — the value of the image modification parameter. You can view available values in the [URI image modification parameters](#uri-modification-parameters)[ table](#uri-modification-parameters); * `` — the path to the image. 3. If you need to add multiple parameters, separate them with a comma and no spaces. For example: ```bash https://cdn.example.com/ioss(resize=300,quality=75)/image.png ``` #### URI image modification parameters \{#uri-modification-parameters}
ParameterParameter nameValue
Quality`quality` A value from 1 to 100. Higher values indicate higher quality. For example: `https://cdn.ex.com/ioss(quality=70)/pic.png`
Size`resize` A value in pixels from 1 to 4000. You can only downscale images without loss of quality. Available options: * `x` — resize using fixed width and height. Test different values, as this setting may distort aspect ratios. For example: `https://cdn.ex.com/ioss(resize=400x300)/pic.png` * `` — scale by width while maintaining the aspect ratio. For example: `https://cdn.ex.com/ioss(resize=400)/pic.png` * `x` — scale by height while maintaining the aspect ratio. For example: `https://cdn.ex.com/ioss(resize=x200)/pic.png`
Progressive JPEG`progressive` Gradual loading with progressive quality improvement. This parameter is only available for JPEG images. Available values: * `y` — enable the option; ; * `n` — disable the option.
For example: `https://cdn.ex.com/ioss(progressive=y)/pic.jpeg`
### 3. Verify the optimization \{#check-optimization} 1. Open your browser in incognito mode. 2. Open the page where images should be compressed. 3. Open developer tools → tab **Network**. 4. In the **Name** block, click the row for the image that should have been loaded from the CDN cache. 5. In the **Headers** tab, in the **Response headers** pane, find the **Content-Type** header; if the value is `image/webp`, the image has been converted. 6. If you resized or changed the image quality, compare the image with the original.