--- title: 'Оптимизация изображений' sidebar_label: 'Оптимизация изображений' description: 'Как работает оптимизация изображений, включить оптимизацию и настроить параметры оптимизации на сайте' sidebar_position: 4 --- import Formbricks from '@theme/MDXComponents/Formbricks'; import { CustomTable } from '@selectel/docux/components'; # Оптимизация изображений Оптимизация изображений позволяет уменьшать вес изображений формата `JPEG`, `PNG`, `GIF`.Оптимизация может происходить за счет: * снижения качества; * конвертации файла в формат `WebP`; * изменения размера; * использования прогрессивного `JPEG` — постепенной отрисовки изображения при загрузке. Если изображение не было оптимизировано, пользователь получит его исходную версию, которая тоже сохраняется в кэш. ## Принцип работы \{#principle-of-operation} Изображения на источнике хранятся в исходном виде. Когда на источник поступает запрос с CDN-сервера на загрузку изображения формата `JPEG`, `PNG`, `GIF`, изображение конвертируется в формат `WebP` и попадает в кэш CDN-сервера, который отправил запрос. Для сжатия, изменения размера и применения прогрессивного `JPEG` для отдельных изображений используются URI-параметры, которые указываются в ссылке на изображение в коде сайта. Настройки применяются сразу после сохранения кода. При первом запросе изображения CDN-сервер может вернуть исходный вариант, чтобы не создавать задержек. Следом в кэш CDN-сервера загружается сжатое изображение. Его пользователь будет получать при каждом новом запросе. ## Стоимость \{#price} Оптимизация оплачивается ежемесячно по тарифному плану. Тарифный план включает в себя пакет из 10 000 запросов на сжатие в месяц, который расходуется на все CDN-ресурсы аккаунта с включенной оптимизацией. В одном запросе на сжатие обрабатывается одно изображение. Первый платеж по тарифному плану списывается при включении опции для любого из CDN-ресурсов аккаунта. Следующие платежи списываются первого числа каждого календарного месяца. Если пакет запросов по тарифному плану исчерпан, каждый запрос сверх пакета тарифицируется отдельно по модели [pay-as-you-go](/balance-and-payments/payment-models.mdx#pay-as-you-go). Посмотреть цены можно на [selectel.ru](https://selectel.ru/prices/calculator/?product=cdn). ## Лимиты и ограничения \{#limits-and-restrictions} Некоторые изображения не могут быть конвертированы в формат `WebP`: * если изображение весит больше 2 МБ. Если вы хотите конвертировать изображения больше 2 МБ, [создайте тикет](https://my.selectel.ru/tickets/create/); * если браузер пользователя не поддерживает формат `WebP`. Такие изображения будут переданы в исходном виде. ## Настроить оптимизацию изображений \{#set-optimization} 1. [Включите оптимизацию в панели управления](#enable-optimization-in-control-panel). 2. Если вы хотите настроить индивидуальные параметры обработки для отдельных изображений, [настройте URI-параметры на сайте](#set-uri-parameters). 3. [Проверьте работу сжатия](#check-optimization). ### 1. Включить оптимизацию в панели управления \{#enable-optimization-in-control-panel} 1. В [панели управления](https://my.selectel.ru/cdn-v3) в верхнем меню нажмите **Продукты** и выберите **CDN**. 2. В разделе **CDN-ресурсы** откройте страницу ресурса → вкладка **Оптимизация**. 3. Убедитесь, что в блоке **Тип оптимизации раздачи** выбрано **Статика**. 4. В блоке **Оптимизация изображений** отметьте чекбокс **Оптимизация изображений**. 5. Нажмите **Применить**. Во время применения настроек CDN-ресурс будет находиться в статусе `PROCESSING`. В это время применение других настроек недоступно. Настройки применятся, когда CDN-ресурс перейдет в статус `ACTIVE`. ### 2. Опционально: настроить URI-параметры на сайте \{#set-uri-parameters} 1. Откройте код вашего сайта, на котором размещены изображения. 2. Вставьте URI-параметр в ссылку на изображение в коде: ```bash https:///ioss(=)/ ``` Укажите: * `` — [домен по умолчанию](/cdn/resources/domains.mdx#default-domain) или [персональный домен](/cdn/resources/domains.mdx#personal-domain); * `` — параметр для изменения изображения. Посмотреть возможные параметры можно в таблице [URI-параметры для изменения изображения](#uri-modification-parameters); * `` — значение параметра для изменения изображения. Посмотреть возможные значения можно в таблице [URI-параметры для изменения изображения](#uri-modification-parameters); * `` — путь к изображению. 3. Если нужно добавить несколько параметров, перечислите их через запятую без пробела. Например: ```bash https://cdn.example.com/ioss(resize=300,quality=75)/image.png ``` #### URI-параметры для изменения изображения \{#uri-modification-parameters}
Параметр Имя параметра Значение
Качество `quality` Значение от 1 до 100. Чем больше значение, тем выше качество. Например: `https://cdn.ex.com/ioss(quality=70)/pic.png`
Размер `resize` Значение в пикселях от 1 до 4000. Изменить размер без потери качества можно только в меньшую сторону. Возможные варианты значений: * `x` — изменение размера с фиксированными шириной и высотой. Протестируйте разные значения — настройка может искажать пропорции. Например: `https://cdn.ex.com/ioss(resize=400x300)/pic.png` * `` — масштабирование по ширине с сохранением пропорций. Например: `https://cdn.ex.com/ioss(resize=400)/pic.png` * `x` — масштабирование по высоте с сохранением пропорций. Например: `https://cdn.ex.com/ioss(resize=x200)/pic.png`
Прогрессивный JPEG `progressive` Постепенная загрузка с улучшением качества. Параметр доступен только для изображений в формате JPEG. Возможные значения: * `y` — включить опцию; * `n` — отключить опцию.
Например: `https://cdn.ex.com/ioss(progressive=y)/pic.jpeg`
### 3. Проверить работу оптимизации \{#check-optimization} 1. Откройте браузер в режиме инкогнито. 2. Откройте страницу, на которой должны быть сжатые изображения. 3. Откройте инструменты разработчика → вкладка **Network**. 4. В блоке **Name** нажмите на строку с изображением, которое должно было загрузиться из кэша CDN. 5. На вкладке **Headers** в блоке **Response headers** найдите заголовок **Content-Type** — если рядом указано `image/webp`, значит, изображение было конвертировано. 6. Если вы изменяли размер или качество изображения, сравните изображение с исходным.