Перейти к основному содержимому

Оптимизация изображений

Последнее изменение:

Оптимизация изображений позволяет уменьшать их вес в форматах JPEG, PNG, GIF за счет:

  • снижения качества;
  • конвертации файла в формат WebP;
  • изменения размера;
  • использования прогрессивного JPEG — постепенной отрисовки изображения при загрузке.

Если изображение не было оптимизировано, пользователь получит его исходную версию, которая тоже сохраняется в кэш.

Принцип работы

Изображения на источнике хранятся в исходном виде. Когда на источник поступает запрос с CDN-сервера на загрузку изображения формата JPEG, PNG, GIF, изображение конвертируется в формат WebP и попадает в кэш CDN-сервера, который отправил запрос.

При первом запросе изображения CDN-сервер может вернуть исходный вариант, чтобы не создавать задержек. Следом в кэш CDN-сервера загружается сжатое изображение. Его пользователь будет получать при каждом новом запросе.

Для изменения настроек отдельных изображений используются URI-параметры, которые указываются в ссылке на изображение в коде сайта. Настройки применяются сразу после сохранения кода.

Стоимость

Оптимизация оплачивается ежемесячно по тарифному плану. Тарифный план включает в себя пакет из 10 000 запросов на сжатие в месяц, который расходуется на все CDN-ресурсы аккаунта с включенной оптимизацией. В одном запросе на сжатие обрабатывается одно изображение.

Первый платеж по тарифному плану списывается при первом подключении опции для любого из CDN-ресурсов аккаунта. Следующие платежи списываются первого числа каждого календарного месяца. Если пакет запросов по тарифному плану исчерпан, каждый запрос сверх пакета тарифицируется отдельно по модели pay-as-you-go.

Лимиты и ограничения

Некоторые изображения не могут быть конвертированы в формат WebP:

  • если изображение весит больше 2 МБ. Если вы хотите конвертировать изображения больше 2 МБ, создайте тикет;

  • если браузер пользователя не поддерживает формат WebP.

Такие изображения будут переданы в исходном виде.

Настроить оптмизацию изображений

  1. Включите оптимизацию в панели управления.
  2. Если вы хотите настроить индивидуальные параметры обработки для отдельных изображений, настройте URI-параметры на сайте.
  3. Проверьте работу сжатия.

1. Включить оптимизацию в панели управления

  1. В панели управления в верхнем меню нажмите Продукты и выберите CDN.
  2. В разделе CDN-ресурсы откройте страницу ресурса → вкладка Оптимизация.
  3. В блоке Оптимизация изображений отметьте чекбокс Оптимизация изображений.
  4. Нажмите Применить. Во время применения настроек ресурс будет находиться в статусе PROCESSING. В это время применение других настроек недоступно. Настройки применятся, когда ресурс перейдет в статус ACTIVE.

2. Настроить URI-параметры на сайте

  1. Откройте код вашего сайта, на котором размещены изображения.

  2. Вставьте URI-параметр в ссылку на изображение в коде:

    https://<domain>/ioss(<parameter>=<value>)/<image_path>

    Укажите:

  3. Если нужно добавить несколько параметров, перечислите их через запятую без пробела. Например:

    https://cdn.example.com/ioss(resize=300,quality=75)/image.png

URI-параметры для изменения изображения

ПараметрИмя параметраЗначение
Качествоquality

Значение от 1 до 100. Чем больше значение, тем выше качество. Например:

https://cdn.ex.com/ioss(quality=70)/pic.png

Размерresize

Значение в пикселях от 1 до 4000. Изменить размер без потери качества можно только в меньшую сторону. Возможные варианты значений:

  • <width>x<height> — изменение размера с фиксированными шириной и высотой. Протестируйте разные значения — настройка может искажать пропорции. Например:

    https://cdn.ex.com/ioss(resize=400x300)/pic.png

  • <width> — масштабирование по ширине с сохранением пропорций. Например:

    https://cdn.ex.com/ioss(resize=400)/pic.png

  • x<height> — масштабирование по высоте с сохранением пропорций. Например:

    https://cdn.ex.com/ioss(resize=x200)/pic.png

Прогрессивный JPEGprogressive

Постепенная отрисовка изображения при загрузке. Параметр доступен только для изображений в формате JPEG. Возможные значения:

  • y — включить опцию;
  • n — отключить опцию.

Например:

https://cdn.ex.com/ioss(progressive=y)/pic.jpeg

3. Проверить работу оптимизации

  1. Откройте браузер в режиме инкогнито.

  2. Откройте страницу, на которой должны быть сжатые изображения.

  3. Откройте инструменты разработчика → вкладка Network.

  4. В блоке Name нажмите на строку с изображением, которое должно было загрузиться из кэша CDN.

  5. На вкладке Headers в блоке Response headers найдите заголовок Content-Type — если рядом указано image/webp, значит, изображение было конвертировано.

  6. Если вы изменяли размер или качество изображения, сравните изображение с исходныи.