Что делает CDN для изображений
CDN хранит копии ваших файлов на серверах рядом с посетителями и отдаёт их оттуда. Для большинства файлов на этом работа заканчивается: байты, которые уходят с edge, — те же, что отдал ваш origin. CDN для изображений добавляет ещё один шаг. Между своим кешем и посетителем он может изменить само изображение, и делает это по четырём причинам.
Формат. На фотографиях WebP и AVIF обычно намного легче JPEG, который вы загрузили: в нашем замере новостное фото на 262 025 байт стало 113 860 байтами в WebP и 86 936 в AVIF. CDN для изображений конвертирует каждое изображение в формат, который принимает браузер посетителя: браузер с поддержкой AVIF получает AVIF, а более старый всё равно получает картинку, которую умеет показать.
Размер. Телефону, который показывает фото шириной 400 пикселей, не нужен загруженный файл шириной 2 400 пикселей. Если в URL указаны ширина или высота, CDN для изображений уменьшает картинку до того размера, в котором её на самом деле показывает страница.
Сжатие. Даже без смены формата повторное кодирование с разумным качеством и удаление данных, которые экран никогда не использует, облегчает большинство файлов: то же новостное фото, перекодированное в JPEG, уменьшилось с 262 025 до 186 137 байт.
Кеш. Каждый результат сохраняется на edge. Конвертация выполняется один раз для каждого варианта, а все следующие посетители получают сохранённую копию на обычной скорости CDN.
Оригиналы остаются на месте: вы загружаете один качественный файл, и каждый вариант делается из него на пути доставки. Когда появляется новый формат или макет меняет размеры, ничего не нужно экспортировать заново.
Один URL, несколько форматов: Accept и Vary
Каждый запрос изображения от браузера несёт заголовок Accept со списком форматов, которые он умеет показывать. Chrome отправляет image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8; браузер без поддержки AVIF не указывает image/avif. CDN для изображений читает этот список в каждом запросе и отвечает на тот же URL в AVIF, WebP или в исходном формате. Имя файла не меняется, так что photo.jpg может прийти в AVIF: что именно отправлено, говорит заголовок Content-Type.
Раз у одного URL теперь несколько правильных ответов, ответ должен сообщать об этом через Vary: Accept. Этот заголовок говорит каждому кешу между edge и посетителем — от корпоративного прокси до кеша самого браузера, — что ответ зависит от Accept. Без него общий кеш может сохранить AVIF, который получил один посетитель, и отдать его следующему, чей браузер не умеет его декодировать.
Собственный кеш CDN подчиняется тому же правилу, и здесь важна одна деталь. Строки Accept различаются между браузерами и даже между версиями одного браузера, поэтому кеш, который использует заголовок как есть в качестве ключа, хранит почти одинаковую копию для каждого варианта строки. Хорошо устроенный CDN для изображений сводит заголовок к решению, которое в нём заложено (AVIF, WebP или ни то ни другое), и хранит по одной копии на каждое.
Другой путь — выбирать в HTML: элемент <picture> перечисляет <source> с AVIF и с WebP, и браузер берёт первый поддерживаемый тип. Согласование формата не нужно, но каждый вариант вы создаёте, храните и прописываете в разметке сами. С CDN для изображений разметка остаётся обычным <img>; <picture> остаётся инструментом арт-дирекшна — когда телефон должен получить другой кадр, а не уменьшенную копию той же картинки.
Изменение размера через URL
Согласование формата не требует менять страницы; изменение размера требует, потому что только страница знает, какой ширины будет картинка. CDN для изображений берут размер из URL, обычно в виде параметров запроса: photo.jpg?w=640 запрашивает копию шириной 640 пикселей. Разумный сервис сохраняет пропорции, если указано одно измерение, вписывает картинку в рамку, если указаны оба, и никогда не увеличивает изображение больше исходного размера.
Вместе с srcset и sizes один исходный файл обслуживает все экраны. Вы перечисляете несколько ширин одного URL и указываете, какой ширины картинка на странице, а браузер скачивает самую маленькую копию, которая ещё выглядит чёткой при плотности экрана посетителя. CDN для изображений создаёт каждую ширину из списка, когда её запрашивают впервые, и дальше отдаёт из кеша.
Держите список коротким и фиксированным. Каждая новая ширина — это отдельная конвертация и отдельный объект кеша, поэтому пять ширин на весь сайт кешируются намного лучше, чем числа, которые каждый шаблон вычисляет по-своему. Некоторые сервисы принимают и другие параметры — обрезку, качество, точку фокуса, — и каждый из них точно так же умножает число вариантов.
Один исходный файл, пять ширин: браузер выбирает нужную
<img
src="https://example.com/media/photo.jpg?w=960"
srcset="https://example.com/media/photo.jpg?w=320 320w,
https://example.com/media/photo.jpg?w=640 640w,
https://example.com/media/photo.jpg?w=960 960w,
https://example.com/media/photo.jpg?w=1280 1280w,
https://example.com/media/photo.jpg?w=1920 1920w"
sizes="(max-width: 720px) 100vw, 720px"
width="1920" height="1080" alt="">Каждый вариант — отдельный объект кеша
CDN для изображений превращает один файл в целое семейство. Фото, запрошенное в трёх форматах и пяти ширинах, — это пятнадцать объектов в кеше, у каждого свой ключ. Отсюда три следствия.
Ключ кеша должен содержать размер. Если правило игнорирует строку запроса, чтобы поднять долю попаданий, ?w=320 и ?w=1920 делят один ключ, и размер, запрошенный первым, уходит всем. Оставляйте параметры размера в ключе, даже если другие параметры отбрасываете.
За конвертацию платит первый запрос. Вариант, который ещё никто не запрашивал, создаётся на лету: edge забирает оригинал, кодирует его и кеширует результат. Этот посетитель ждёт чуть дольше; все, кто придёт после, получат копию из кеша. Для страниц, которые должны быть быстрыми уже при первом показе, несколько запросов после деплоя или очистки кеша заранее его прогреют.
Очистка и истечение срока касаются всего семейства. Когда оригинал меняется под тем же именем, должны исчезнуть все форматы и размеры, сделанные из него. Очистка по префиксу пути достанет их все; очистка одного точного URL может оставить уменьшенные копии. Включение конвертации — простой случай: если формат входит в ключ кеша, каждая сконвертированная копия — новый объект и уходит уже с первого запроса. Как были, остаются только копии, которые уже лежат в браузерах посетителей, — до истечения их срока там.
Качество и размер: когда конвертация проигрывает
Любой формат с потерями меняет байты на детали через настройку качества, и CDN для изображений выбирают значение по умолчанию, при котором картинка выглядит неизменной при обычном просмотре. Ниже — фото становятся мыльными и блочными; выше — экономия тает. Первыми страдают текст, чёткие края и однотонные заливки, поэтому скриншотам и логотипам нужно более бережное обращение, чем фотографиям.
Формат важен не меньше настройки, и победитель зависит от изображения. 5 октября 2026 года мы пропустили три изображения через оптимизатор изображений CDN.com.tr с рабочими настройками и посчитали байты.
Новостное фото, JPEG. Оригинал 262 025 байт; WebP 113 860; AVIF 86 936. Хрестоматийный случай: AVIF передаёт ту же картинку примерно за треть байтов оригинала.
Скриншот панели, PNG. Оригинал 105 078 байт; оптимизированный PNG 40 379; WebP 41 218; AVIF 27 942. PNG с палитрой отлично справляется с заливками и текстом, и здесь WebP вышел тяжелее него; AVIF всё равно выиграл.
Фавикон, PNG, 16×16. Оригинал 701 байт; оптимизированный PNG 483; WebP 314; AVIF 682. При таком размере постоянные накладные расходы контейнера AVIF перевешивают его лучшее сжатие, и WebP уверенно выигрывает.
Ни один формат не выигрывает везде, и конвертация может дать файл тяжелее лучшей версии оригинала. Хороший CDN для изображений кодирует, сравнивает байты и отправляет файл меньшего размера; сервис, который конвертирует вслепую, утяжеляет часть ваших картинок и всё равно называет их оптимизированными. Все замеры и их причины — в нашем руководстве AVIF или WebP.
CDN для изображений или оптимизация при сборке?
Те же форматы можно получить и без CDN для изображений. Шаг сборки, хук при загрузке или плагин могут один раз сконвертировать каждое изображение, записать варианты рядом с оригиналами и отдать их через обычный CDN с разметкой <picture>. Какой путь лучше, зависит от того, откуда берутся ваши изображения.
Оптимизация при сборке выигрывает на сайте, чьи изображения лежат в репозитории: промо-сайт, документация, статическое приложение. Набор известен заранее, каждый файл можно настроить вручную, пока посетитель ждёт, ничего не обрабатывается, а наружу уходит ровно то, что вы проверили.
CDN для изображений выигрывает, когда картинки поступают быстрее, чем их кто-либо успевает обработать: фото товаров из админки магазина, архив новостного сайта, медиатека WordPress с загрузками за много лет, изображения от ваших пользователей. Он выигрывает и тогда, когда число размеров растёт с каждым новым макетом, когда разметку пишет тема или облачная CMS и когда вы не хотите запускать конвертер на собственном сервере.
Оба подхода хорошо сочетаются: вручную настроенные главные изображения — из сборки, всё, что загружается через CMS, — через CDN для изображений. Нарисованные, а не сфотографированные логотипы и иконки в любом случае лучше держать в SVG: конвертировать нечего, и они остаются чёткими при любом размере.
Ловушки, которые стоит проверить до включения
Большинство проблем с CDN для изображений возникает в нескольких местах, и каждое можно проверить до того, как это заметит посетитель.
Нет Vary. Ответ, который меняется в зависимости от Accept, но не несёт Vary: Accept, — единственная ошибка в этом списке, из-за которой посетитель может увидеть битую картинку. Проверьте, что отправляет ваш CDN и что пропускает любой прокси перед ним.
Параметры размера вне ключа кеша. Один размер для всех: запросите две ширины одного изображения и сравните, что пришло.
Параметры без ограничений. Если принимается любая ширина, кто угодно может запросить тысячи размеров и заставить вас платить за каждую конвертацию. Фиксированный список ширин в шаблонах ограничивает ваши собственные страницы несколькими вариантами; запросы извне останавливает только ограничение на стороне сервиса — например, список разрешённых ширин или лимит частоты запросов.
Более тяжёлые файлы. Измерьте собственный набор изображений. Если сервис не сравнивает байты, сильнее всего пострадают плоская графика и иконки.
Форматы, которые проходят без изменений. Анимированные GIF, файлы SVG и изображения, которые уже в WebP, часто уходят как есть; проверьте, какие форматы конвертирует ваш сервис.
Стоимость обработки и квоты. Кодирование, особенно в AVIF, требует намного больше CPU, чем отдача файла из кеша, и сервисы это учитывают: за каждую трансформацию, за обработанные байты или из квоты тарифа. Узнайте, как считает ваш, прежде чем включать все изображения разом.
Устаревшие копии. Изображения, которые браузеры загрузили до включения, остаются в их кеше до истечения срока, и никакая очистка кеша CDN до них не дотянется. Оценивайте результат по новому запросу, например через проверку ниже, а не по перезагрузке страницы.
Проверьте, что отдаёт ваш сайт
Проверка ниже показывает, что делает с реальной страницей CDN для изображений — или его отсутствие. Она читает HTML страницы, берёт до 20 изображений из <img>, srcset, <picture> и og:image и запрашивает каждое дважды: как современный браузер (Accept: image/avif,image/webp,…) и как клиент, принимающий что угодно (Accept: */*). По первым байтам каждого ответа она определяет настоящий формат, что бы ни говорило имя файла, считает байты и показывает Vary и статус кеша. Можно ввести и адрес отдельного изображения.
Если оба запроса получают исходный формат для каждой картинки, по пути ничто ваши изображения не конвертирует. Если современный запрос получает AVIF или WebP, но в ответе нет Vary: Accept, исправьте это в первую очередь. Каждый результат и все ограничения описаны на странице самой проверки.
Оптимизация изображений на CDN.com.tr
Оптимизация изображений — это переключатель для всего аккаунта или для одного правила доставки. Edge конвертирует изображения JPEG и PNG в WebP, а если для аккаунта выбран WebP + AVIF — в AVIF и WebP, и каждый браузер получает формат, который он принимает; браузеры, не принимающие ни один из них, получают изображение в исходном формате. При WebP + AVIF ответ приходит с того же URL, с Vary: Accept; при одном WebP браузеры, принимающие WebP, перенаправляются на копию .webp. В обоих случаях URL изображений в вашем HTML остаются прежними. В полном размере только что сконвертированное изображение уходит лишь тогда, когда оно меньше оригинала. Если конвертация не удалась, edge отдаёт вместо него исходное изображение. Обработка списывается из месячной квоты.
Замеры выше сделаны этим оптимизатором. При WebP + AVIF новостное фото на 262 025 байт уходит как 86 936 байт AVIF, а скриншот панели на 105 078 байт — как 27 942. Небольшие или однотонные PNG размером до одного мегапикселя — иконки, скриншоты, иллюстрации — должны к тому же обойти наш собственный оптимизированный PNG, поэтому браузер, который принимает WebP, но не AVIF, получает этот скриншот как PNG на 40 379 байт, а фавикон уходит как WebP на 314 байт, а не как AVIF на 682.
Размер меняется через URL: добавьте к адресу изображения ?w=, ?h= или оба параметра. Одно значение сохраняет пропорции, два вписывают картинку в эту рамку, и изображение никогда не увеличивается больше исходного размера. Уменьшенные изображения тоже конвертируются, но с оригиналом не сравниваются. Правило держит w и h в ключе кеша, пока оно сохраняет строку запроса, — так настроено по умолчанию; правило, которое игнорирует все параметры запроса, закеширует один размер для всех.
Копии, которые edge сконвертировал до появления сравнения в полном размере, остаются как были, пока не истечёт их срок или их не очистят, а браузеры, уже загрузившие изображение, хранят свою копию до истечения её срока в браузере. При одном WebP перенаправление на копию .webp не несёт Vary: Accept — именно это и показывает проверка выше; WebP + AVIF отвечает всем браузерам с одного URL с Vary: Accept. AVIF списывается из квоты по более высокой ставке, чем WebP, потому что его кодирование требует больше обработки; текущую ставку панель показывает под переключателем. Переключатели, выбор формата и очистку подробно описывает раздел справки об оптимизации изображений.
WordPress. На сайте WordPress за CDN.com.tr конвертирует edge: изображения из вашей медиатеки конвертируются, проходя через CDN, поэтому ваш сервер не тратит CPU на кодирование, в медиатеку не записываются лишние файлы WebP или AVIF, а темы и конструкторы страниц продолжают работать, ведь URL изображений не меняются. Если сайт не подключён к нашему CDN, бесплатный плагин CDNTR может конвертировать изображения в WebP, а там, где сервер это поддерживает, и в AVIF прямо на сервере сайта. Используйте что-то одно: при включённой конвертации на edge оставьте локальную конвертацию плагина выключенной, чтобы edge работал с вашими оригиналами.
Часто задаваемые вопросы
Чем CDN отличается от CDN для изображений?
CDN хранит копии ваших файлов рядом с посетителями и отдаёт их без изменений. CDN для изображений делает то же самое и вдобавок меняет картинки по пути: конвертирует их в формат, который принимает каждый браузер, уменьшает, когда URL запрашивает размер, и кеширует каждый результат. Многие CDN предлагают оптимизацию изображений как переключатель, так что часто это одна и та же сеть с одной включённой функцией.
Меняет ли CDN для изображений мои исходные файлы?
Нет. Оригиналы остаются на вашем сервере или в хранилище ровно такими, какими вы их загрузили; сконвертированные и уменьшенные копии создаются на пути доставки и живут в кеше CDN. Если сконвертированные изображения отдаются по исходным URL, после выключения конвертации посетители снова получают оригиналы по мере того, как копии в кеше истекают или очищаются.
Нужен ли мне ещё элемент <picture>?
Для форматов — нет. С CDN для изображений, который согласует формат, обычный <img> получает AVIF, WebP или оригинал в зависимости от браузера, так что строки <source type="image/avif"> можно убрать. Оставьте <picture> для арт-дирекшна — когда маленький экран должен получить другой кадр, а не уменьшенную копию той же картинки.
Может ли сконвертированное изображение получиться тяжелее?
Да, тяжелее лучшей версии оригинала, если сервис конвертирует без сравнения. В нашем замере фавикон 16×16 занял 682 байта в AVIF против 483 в оптимизированном PNG и 314 в WebP, а скриншот панели в WebP (41 218 байт) вышел тяжелее оптимизированного PNG (40 379). Хороший сервис проверяет байты и отправляет файл меньшего размера. На CDN.com.tr только что сконвертированное изображение в полном размере уходит лишь тогда, когда оно меньше оригинала, а для небольшого или однотонного PNG размером до одного мегапикселя — только если результат ещё и легче нашего оптимизированного PNG.
Стоит ли использовать CDN для изображений с WordPress?
Как правило, да: именно на сайтах WordPress картинки накапливаются быстрее, чем их кто-либо успевает оптимизировать. Конвертация на edge охватывает изображения JPEG и PNG во всей медиатеке, включая старые загрузки, без конвертера на вашем сервере и без лишних файлов в wp-content/uploads. Для сайта, который не подключён к CDN, альтернатива — плагин с локальной конвертацией, например CDNTR.
Как оплачивается обработка изображений на CDN.com.tr?
Она списывается из месячной квоты аккаунта, как и трафик; отдельный пакет покупать не нужно. AVIF списывается по более высокой ставке, чем WebP, потому что его кодирование требует больше обработки, а текущую ставку панель показывает под переключателем.