CDN
Image stack. Подключить и настроить опцию
Об опции Image stack
Что это? Image stack — это платная опция, которая позволяет преобразовывать изображения в форматах JPG и PNG на стороне CDN. Расширение и URL изображения останутся неизменными, будут меняться только его версии, хранящиеся в кеше CDN.
Какие преобразования доступны:
Как работает? Покажем работу опции на примере изменения качества изображения. Сверху — оригинал, а снизу — его версия в качестве, которое мы снизили до 10%. Вес нашего изображения также уменьшился, поэтому пользователь получит его быстрее.
Оригинал изображения:
Обработанное изображение:
Со стороны CDN это выглядит так:
Получив запрос на преобразование, мы проверяем формат изображения, и если он соответствует JPG или PNG, отправляем на ваш источник необходимый набор заголовков запроса. Этот запрос затем уходит на Image stack сервер, который обрабатывает изображение и отправляет результат конечному пользователю.
В заголовках ответа появится информация о выполненном преобразовании:
-
X-Img-Operations: выполненное преобразование.
-
X-Img-Origin-Download-Time: время скачивания изображения с источника в миллисекундах.
-
X-Img-Origin-Size: оригинальный размер изображения в байтах.
-
X-Img-Processing-Time: время, потраченное на преобразование, в миллисекундах.
-
X-Img-Saved-Bytes: количество байт, на которое уменьшилось изображение после преобразования.
-
X-Img-Server: сервер, который преобразовал изображение.
-
Img-Skip-Reason: причина, по которой преобразование не было выполнено.
Операции по преобразованию изображений исполняются в таком порядке:
-
Изменение размера
-
Обрезка
-
Сжатие и конвертация в форматы WebP и AVIF
Обратите внимание: операция по изменению качества не может выполняться отдельно от других операций. Если вы хотите изменить качество изображения, активируйте ещё одну операцию.
Когда изображение не изменится
Пользователь получит оригинальное изображение из кеша CDN, если Image stack не сможет его преобразовать. Это произойдёт, если:
-
Качество оригинального изображения ниже желаемого. Например, если качество оригинального изображения — 45%, а в настройках Image stack указано значение 80%. Мы не сможем повысить качество.
-
Оригинальные изображения сжаты с помощью GZip. Image stack не поддерживает команду ungzip, поэтому не сможет преобразовать изображение, которое содержит HTTP-заголовок Content-Encoding: gzip.
-
Браузер пользователя не поддерживает форматы WebP или AVIF.
С помощью HTTP-заголовка Accept Image stack определяет, поддерживает ли браузер пользователя форматы сжатия. Если в значении заголовка содержится image/webp или image/avif, значит, браузер поддерживает эти форматы. -
Формат изображения не поддерживается Image stack. Image stack не может преобразовать изображения в форматах отличных от JPG и PNG (например, GIF).
Проверьте HTTP-заголовок Img-Skip-Reason, чтобы выяснить причину:
Как подключить и настроить опцию
Image stack — платная опция.
1. Отправьте запрос на её подключение в техническую поддержку по почте support@edgecenter.ru или через чат.
В запросе укажите ID вашего аккаунта, чтобы мы могли вас идентифицировать. ID аккаунта находится на главной странице вашего личного кабинета.
Шаблон сообщения: «Добрый день! Включите, пожалуйста опцию Image stack для аккаунта с ID … (укажите свой ID)».
Мы всё настроим и пришлём сообщение, что подключили Image stack. После этого вы сможете подключить опцию к своим CDN-ресурсам.
Важно. Вы можете настроить опцию как в основных настройках CDN-ресурса, так и с помощью специального правила. Мы рекомендуем пользоваться правилами, чтобы не нарушать работу других опций. Подробнее в разделе «Почему Rewrite не работает вместе с Image stack?».
Ниже рассказываем, как настроить опцию в правиле.
2. Перейдите на вкладку Правила в настройках нужного CDN-ресурса. Нажмите Создать правило и выберите шаблон Image optimization.
Откроется страница создания правила. Вам нужно настроить только блок Image stack.
3. Включите опцию Image stack и задайте параметры преобразования:
4. Качество изображений. Укажите, в каком качестве изображения будут доставляться вашим пользователям. Доступны четыре значения:
-
Высокое — 95%
-
Среднее — 80%
-
Низкое — 65%
-
Своё значение — любое значение от 0% до 100%
Качество отдельных изображений также настраивается с помощью параметра запроса. Например:
https://image.example.ru/image.jpg?quality=50 5. Кнопка Включить сжатие без потерь для PNG определяет, будет ли меняться качество изображений в формате PNG, или они будут доставляться без потерь.
Больше информации о Качестве изображений в статье «Image stack. Изменить качество изображений».
6. Сжатие. Подключите сжатие WebP и/или сжатие AVIF. Если вы подключили оба вида сжатия, и браузер конечного пользователя их поддерживает, он получит изображение в формате AVIF.
Настроить сжатие для конкретного изображения можно в параметре запроса:
https://image.example.ru/image.jpg?fmt=webp
https://image.example.ru/image.jpg?fmt=avifВнимание. При AVIF-конвертации изображения формата PNG вы можете получить ошибку img-skip-reason - converted image bigger than origin, если вы включили Сжатие без потерь для PNG и/или выбрали высокое качество для оптимизации изображений.
Чтобы избежать ошибки:
-
отключите сжатие AVIF, оставив только WebP;
-
выключите сжатие без потерь;
-
снизьте качество для оптимизации изображений.
Больше информации о Сжатии в статье «Image stack. Сжимать изображения в формат WebP и AVIF».
Обзор Image stack. Параметры преобразований Изменение размера и Обрезка регулируются только с помощью параметров запроса. Для этих операций невозможно задать стандартные настройки, потому что каждое изображение уникально и имеет разные характеристики (размер и область обрезки).
В поле «Обзор Image stack» мы рассказываем, как пользоваться параметрами запросов в каждой операции по преобразованию изображения.
7. Нажмите Создать правило, чтобы сохранить его.
Обратите внимание: как только вы добавите правило с включённой опцией Image stack, кеш ресурса автоматически очистится. CDN-серверы станут обращаться за контентом к источнику. Чтобы не перегружать источник, рекомендуем активировать опцию в то время, когда ваши пользователи наименее активны, или предварительно подключить Шилдинг источника.
Почему Rewrite не работает вместе с Image stack?
Некоторые браузеры (напр., Google Chrome) добавляют заголовок Accept: image/webp или Accept: image/avif не только к картинкам, но и к другим форматам файлов (напр., PHP и JS). При включении опции, все запросы с таким заголовком обрабатываются Image stack сервером. Если он не может сконвертировать файл, он отдаст оригинал файла.
Когда Image stack и Rewrite включены одновременно, запросы перенаправляются на источник контента. Источник ответит 3хх кодом, который Image stack не сможет вернуть. При запросе PHP и JS файлов, Image stack сначала получит 3хх код от источника и пойдёт по редиректу, пока не получит другой код ответа. Но так мы не получим желаемый файл — он будет недоступен.
Чтобы решить проблему, включите Image stack в правиле на ресурсе, а Rewrite добавьте в основные настройки.