Справка CDN.com.tr

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

Q: Можно ли менять размер изображений через URL?

Да. Добавьте к URL изображения ?w= (ширина), ?h= (высота) или оба параметра. Одно значение сохраняет пропорции, два вписывают изображение в эту рамку, и ни одно изображение не увеличивается сверх исходного размера. Оставьте w и h в ключе кэша этого правила (значение по умолчанию, полная строка запроса, это делает): правило, которое игнорирует все query-параметры, закэширует один размер для всех. Изображения с изменённым размером тоже конвертируются, но с оригиналом не сравниваются.

Включите оптимизацию изображений для аккаунта или для одного правила доставки и выберите WebP или WebP + AVIF: edge конвертирует JPEG и PNG и отдаёт каждому браузеру формат, который тот принимает, а URL изображений на ваших страницах остаются прежними.

Кеш, безопасность, WAF и очистка

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

Связанные руководства

Замеры, на которых основан выбор формата, проверка для любой страницы и руководство по очистке кэша.

Выбор формата

AVIF или WebP: замеры

Какой формат меньше на фото, скриншотах и иконках, в байтах.

Читать руководство

Любая страница

Проверка формата изображений

В каком формате изображения страницы доходят до современного браузера и простого клиента.

Открыть проверку

После включения

Очистка кешированного контента

Очистите копии, закэшированные до включения, чтобы они сконвертировались заново.

Открыть раздел

Путь в панели

Панель управления
Правила доставки
Оптимизация изображений
Формат изображений

Предварительные требования

CDN-аккаунт, сайт которого отдаётся через edge.
Роль владельца или редактора: наблюдатели видят настройки и могут запустить проверку изображений, но не могут их менять.
Знайте, каким путям нужны защита от хотлинкинга, подписанные ссылки или ограничение частоты запросов: правило с включённой оптимизацией изображений не применяет ничего из этого, а переключатель аккаунта снимает их с файлов JPEG и PNG.

Модель принятия решений

Весь аккаунт или одно правило?

Переключатель аккаунта охватывает файлы JPEG и PNG во всех правилах. Переключатель правила — только пути этого правила; так удобно сначала попробовать на одной папке или одном домене.

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

WebP или WebP + AVIF?

Формат выбирается один раз для аккаунта и действует везде, где включена оптимизация изображений.

WebP: почти все используемые браузеры, ниже стоимость обработки
WebP + AVIF (автоматически): AVIF для браузеров, которые его принимают, обычно самый компактный для фото

Пошаговое руководство

Включите оптимизацию изображений

Быстрее всего начать с переключателя аккаунта; переключатель правила ограничивает оптимизацию путями этого правила.

Откройте Правила доставки и выберите аккаунт.
Включите Оптимизацию изображений для всего аккаунта или откройте правило и включите оптимизацию изображений в нём.
Сохраните и дождитесь, пока изменение будет опубликовано на edge.

Ожидаемый результат: Запросы JPEG и PNG на этих путях конвертируются на edge.

cdnctl equivalent

curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"type":1}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_optimization
# только одно правило: "image_optimization":"on" в JSON правила
cdnctl cdn advanced-rules create --account "$ACCOUNT_UUID" --file rule-images.json

Выберите формат

Формат действует везде, где включена оптимизация изображений: для всего аккаунта или в правиле.

В разделе Формат изображений выберите WebP или WebP + AVIF (автоматически).
Перед сохранением прочитайте ставку, показанную под форматом.

Ожидаемый результат: При WebP + AVIF браузеры, принимающие AVIF, получают AVIF с тех же URL; остальные получают WebP или изображение в исходном формате.

cdnctl equivalent

curl -s -X POST -H "Authorization: Bearer $CDN_TOKEN" -H 'Content-Type: application/json' -d '{"enabled":true}' https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_avif

Очистите кэш и проверьте

Изображения, закэшированные до включения оптимизации, сохраняют старый формат, пока не истечёт срок, поэтому очистите кэш путей с изображениями после включения. Смена формата очистки не требует.

Очистите папки с изображениями или весь кэш в разделе Очистка кэша.
Запустите проверку формата изображений под переключателем на одном из доменов аккаунта.

Ожидаемый результат: Проверка покажет каждое изображение с форматом и размером, которые получает современный браузер; если оптимизатор сохранил оригинал, потому что конвертация не дала выигрыша, строка сообщит об этом.

cdnctl equivalent

cdnctl purge --account "$ACCOUNT_UUID" --path /wp-content/uploads/ --type prefix
curl -s -H "Authorization: Bearer $CDN_TOKEN" "https://cdn.com.tr/api/accounts/$ACCOUNT_UUID/image_check?host=www.example.com"

Проверка

curl -sLo /dev/null -w '%{content_type} %{size_download}\n' -H 'Accept: image/avif,image/webp,*/*' https://www.example.com/photo.jpg → image/avif или image/webp (при одном WebP — image/webp после перенаправления), если сконвертированный файл вышел меньше
curl -s -D - -o /dev/null -H 'Accept: image/webp,*/*' https://www.example.com/photo.jpg | grep -iE '^(vary|location)' → WebP + AVIF: Vary: Accept; один WebP: Location: …/photo.jpg.webp
curl -so /dev/null -w '%{content_type}\n' -H 'Accept: */*' https://www.example.com/photo.jpg → image/jpeg, исходный формат

Сценарии использования

Магазин хочет облегчить фото товаров, не переэкспортируя медиатеку, не ставя плагинов и не меняя ни одного URL изображения.

Краткий порядок действий

Откройте Правила доставки аккаунта.
Включите оптимизацию изображений для всего аккаунта или включите её в одном правиле, чтобы начать с путей этого правила.
В разделе Формат изображений выберите для аккаунта WebP или WebP + AVIF (автоматически).
Очистите кэш изображений, которые уже закэшированы, и запустите проверку формата изображений под переключателем.

Проверки

Конвертируются файлы JPEG и PNG (.jpg, .jpeg, .png). GIF, SVG и файлы, которые уже в .webp, уходят без изменений.
Как формат доходит до браузера, зависит от формата аккаунта. При WebP + AVIF всем браузерам отвечает один URL: edge читает заголовок Accept браузера, отдаёт AVIF, WebP или изображение в исходном формате и отвечает с Vary: Accept. При одном WebP браузеры, принимающие WebP, перенаправляются (302) на WebP-копию с тем же именем и .webp на конце (photo.jpg.webp), а остальные получают изображение в исходном формате. В обоих случаях URL изображений в вашем HTML остаются прежними.
В полном размере только что сконвертированное изображение уходит, только если оно меньше оригинала: AVIF, который не меньше, уступает место WebP, а WebP, который не меньше, — оригиналу. Изображения с изменённым через ?w= или ?h= размером не сравниваются.
Если конвертация не удалась, edge отдаёт вместо него исходное изображение.
Сконвертированные изображения хранятся 365 дней — на edge и в браузерах. Копии, закэшированные до включения оптимизации, сохраняют старый формат, пока не истечёт срок или пока вы не очистите кэш. Смена формата очистки не требует: edge хранит каждый формат отдельно, поэтому новые посетители сразу получают новый формат, а браузер, который уже загрузил изображение, может держать свою копию до года.
Защита от хотлинкинга, подписанные ссылки и ограничение частоты запросов: правило с включённой оптимизацией изображений не применяет ничего из этого ни к одному файлу, который отдаёт. При включённом переключателе аккаунта файлы JPEG и PNG обходят их во всех правилах без собственного переключателя. Не включайте оптимизацию изображений в правиле, файлам которого нужна эта защита, и не включайте переключатель аккаунта, если она нужна и его JPEG и PNG. Правило с точным путём не может использовать оптимизацию изображений.
Обработка списывается из месячной квоты, AVIF — по более высокой ставке, чем WebP. Панель показывает текущую ставку под переключателем.

Часто задаваемые вопросы

Почему некоторые изображения всё ещё приходят в JPEG или PNG?

Чаще всего копия попала в кэш до включения оптимизации: очистите кэш этих путей и запросите их снова. Другие причины: в полном размере конвертация вышла не меньше оригинала, браузер не принимает ни WebP, ни AVIF, или запрос не просил никакого конкретного формата изображений (простой curl отправляет Accept: */*). Проверка формата изображений на странице «Правила доставки» показывает по каждому изображению, что получают современный браузер и простой клиент.

Можно ли менять размер изображений через URL?

Да. Добавьте к URL изображения ?w= (ширина), ?h= (высота) или оба параметра. Одно значение сохраняет пропорции, два вписывают изображение в эту рамку, и ни одно изображение не увеличивается сверх исходного размера. Оставьте w и h в ключе кэша этого правила (значение по умолчанию, полная строка запроса, это делает): правило, которое игнорирует все query-параметры, закэширует один размер для всех. Изображения с изменённым размером тоже конвертируются, но с оригиналом не сравниваются.

Как это тарифицируется?

Отдельного пакета нет. Обработка списывается из месячной квоты аккаунта, как и трафик: каждая конвертация учитывает прочитанный оригинал плюс возвращённое изображение, а AVIF учитывается по более высокой ставке, чем WebP, потому что его кодирование требует больше вычислений. Панель показывает текущую ставку под переключателем, а Потребление данных показывает оптимизацию изображений отдельной строкой.

Нужен ли мне WebP + AVIF?

Это выбор, а не требование. Один WebP уже охватывает почти все используемые браузеры. WebP + AVIF добавляет AVIF для браузеров, которые его принимают, — обычно это самый компактный формат для фотографий: в нашем замере фото JPEG на 262 025 байт ушло как 86 936 байт AVIF. Запустите проверку формата изображений на своих страницах, чтобы увидеть разницу.