Cжатие изображений Image stack

Последнее изменение: 06 мая 2024

Cжатие изображений Image stack

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

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

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

Изображения на источнике хранятся в исходном виде. Когда на источник поступает запрос на загрузку изображения формата .jpg и .png, изображение попадает на сервер Image stack, где проходит обработку согласно заданным параметрам. Обработанное изображение попадает в кеш CDN-сервера.

В некоторых случаях изображение не будет обработано, и пользователь получит его исходную версию:

• если качество исходного изображения ниже, чем указано в настройках сжатия;
• браузер пользователя не поддерживает итоговый формат обработанного изображения;
• исходное изображение уже сжато с помощью Gzip.

Стоимость⁠

Стоимость опции Image stack рассчитывается исходя из количества сжатых изображений и составляет 90 рублей за пакет из 10 000 изображений.

Оплата за пакет списывается при первом запросе на сжатие.

Когда вы исчерпали оплаченный пакет, оплата списывается при обработке первого изображения сверх пакета.

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

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

1. Опционально: включить шилдинг источника⁠

Когда вы включите Image Stack, кеш CDN-ресурса автоматически очистится. Все запросы начнут попадать на источник, что может увеличить время загрузки вашего сайта.

Чтобы не перегружать источник, мы рекомендуем заранее подключить шилдинг источника. Если для источника включен шилдинг, запросы не поступают напрямую на источник, а аккумулируются на промежуточном шилдинг-сервере. Шилдинг-сервер кеширует контент с источника и отдает его на CDN-серверы, тем самым снимая нагрузку с источника. Подробнее в инструкции Шилдинг источника.

2. Включить сжатие в панели управления⁠

В панели управления вы можете настроить качество и формат итоговых изображений. Настроить обрезку и изменение размера можно только с помощью URL-параметров.

1. В панели управления перейдите в раздел CDN → CDN-ресурсы.

2. Откройте страницу CDN-ресурса → вкладка Настройки.

3. Отметьте чекбокс Image Stack.

4. Чтобы сжимать изображения, выберите качество — 95%, 80% или 65%, либо выберите Свое значение и введите его.

5. Чтобы не менять качество изображений формата .png, включите сжатие без потерь для .png.

6. Чтобы конвертировать формат изображения, включите сжатие .avif или .webp.

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

7. Нажмите Сохранить.

3. Настроить URL-параметры на сайте⁠

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

Чтобы прописать URL-параметры, добавьте их к ссылке на изображение:

https://<url>?<parameter>=<value>

Укажите:

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

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

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

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

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

4. Проверить работу сжатия⁠

1. Убедитесь, что после включения Image Stack прошло не меньше 30 минут — это время необходимо, чтобы настройки применились к CDN-ресурсу.

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

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

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

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

6. В инструментах разработчика на вкладке Headers в блоке Response headers найдите заголовок X-Img-Operations:

   • если заголовок есть в списке, то загрузилось обработанное изображение. В значении заголовка будет указана проведенная обработка (compression, convert, resize, crop);
   • если заголовка нет в списке, то загрузилось исходное изображение. Причина, по которой изображение не обработалось, будет указана в заголовке Img-Skip-Reason.