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

Настроить сжатие изображений Image stack

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

Настроить сжатие изображений Image stack

Сжатие изображений Image stack позволяет уменьшать вес изображений в форматах .jpg и .png:

  • конвертировать в формат .avif или .webp;
  • менять качество;
  • обрезать;
  • менять размер.

Изображения на источнике хранятся в несжатом виде и сжимаются перед тем, как попасть в кеш.

Стоимость

Стоимость опции Image stack зависит от количества запросов на сжатие. Чтобы узнать стоимость для вашего ресурса, создайте тикет и укажите имя ресурса.

Включить сжатие изображений Image stack

  1. Создайте тикет и укажите:

    • имя CDN-ресурса, для которого нужно включить сжатие;
    • формат, который вы хотите использовать — .avif или .webp. Вы можете использовать два формата: если браузер пользователя поддерживает оба формата, он получит изображение в формате .avif;
    • качество финальных изображений в процентах от качества исходного изображения.

    Формат и качество изображений также можно задавать через параметры в URL изображения (см. шаг 2). Параметры обрезки и изменения размера можно задать только через параметр в URL.

  2. Опционально: чтобы применять настройки формата, качества, обрезки и изменения размера через код на источнике, настройте параметры URL-запросов в коде:

    https://<url>?<parameter1>=<value>&<parameter2>=<value>

    Укажите:

    • <url> — путь до файла;
    • <parameter>=<value> — имя параметра для изменения и его значение. Чтобы указать несколько параметров, перечислите их через символ &. Существующие параметры и их значения см. в таблице.

    Пример запроса, который переведет изображение image из формата .png в формат .avif, обрежет его до размера 330 на 600 пикселей и снизит качество до 50%:

    https://domain.com/images/image.png?fmt=avif&crop=300,600&quality=50

URL-параметры для сжатия Image stack

ПараметрИмя параметраЗначение
Форматfmt
  • webp
  • avif
Например: https://domain.com/image.png?fmt=webp
КачествоqualityВ процентах от 0 до 100.
Например: https://domain.com/image.png?quality=30
ШиринаwidthШирина в пикселях, не более текущей ширины. Может использоваться вместе с height
.Например: https://domain.com/image.png?width=300
ВысотаheightВысота в пикселях, не более текущей высоты. Может использоваться вместе с width.
Например, https://domain.com/image.png?height=200
Соотношение сторонfitДополнительный параметр изменения размера. Указывается, если указаны одновременно width и height.
  • fit — лишние пиксели будут равномерно обрезаны по краям;
  • bounds — изображение уменьшится пропорционально большей стороне;
  • cover — изображение уменьшится пропорционально меньшей стороне;
  • force — изображение сожмется до указанных величин вне зависимости от исходных пропорций.
Например: https://domain.com/image.png?width=300&height=200&fit=fit
ОбрезкаcropШирина и высота фрагмента в пикселях через запятую. По умолчанию фрагмент вырезается из центра. Чтобы изменить положение фрагмента, после размера фрагмента укажите отступы слева и сверху:
  • в пикселях, например:
    https://domain.com/image.png?crop=300,200,x100,y50 — отступ слева 100 пикселей, сверху 50 пикселей
  • в процентах, например:
    https://domain.com/image.png?crop=300,200,x25p,y10p — отступ слева 25% от ширины, отступ сверху 10% от высоты
  • в процентах от обрезаемой области, например:
    https://domain.com/image.png?crop=300,200,offset-x20,offset-y40 — обрезаемое пространство вокруг фрагмента разделится: по ширине — на 20% слева, 80% справа от фрагмента, по высоте — на 40% сверху, 60% снизу от фрагмента