Сайт отдаёт webp, а клиенты жалуются: совместимость и запасные варианты
Почему картинки скачиваются в формате webp, какие браузеры и программы его не понимают и как настроить фолбэк, не потеряв скорость сайта.
Содержание
- Откуда webp взялся, если вы его не включали
- Как за пять минут понять, кто именно виноват
- Кто реально спотыкается о формат в 2026 году
- Клиент скачал картинку и не открыл: что отвечать
- Фолбэк, который не отменяет экономию
- Сколько webp экономит на самом деле
- AVIF: включать сейчас или подождать
- Что проверить после включения конвертации
- Когда webp лучше выключить совсем
- Что делать дальше
- Частые вопросы
Поддержка webp в браузерах держится около 97 процентов трафика, поэтому проблема почти никогда не в показе на сайте. Спотыкаются на скачанных файлах: клиент сохраняет картинку и не может открыть её в старой программе. Экономия при этом реальная, около половины веса.
Клиент скачал фотографию с вашего сайта, отправил менеджеру, а тот не смог её открыть. Файл вроде бы обычный, но внутри картинки в формате webp, и старый просмотрщик показывает пустое окно. Дальше владелец сайта пишет мне: кто это включил, я такого не просил, верните как было. Разберу, откуда webp появляется на сайте сам собой, кто действительно спотыкается о формат в 2026 году, как сделать запасной вариант и не потерять те самые проценты скорости, ради которых всё и затевалось.

Сразу оговорю позицию: webp выключать не надо. Отдавать браузеру jpeg в 2026 году это добровольно платить лишними килобайтами за чужую нерешительность. Но между «включили конвертацию» и «клиент скачал и открыл» лежит десяток мест, где всё ломается, и обычно их никто не проверяет.
Откуда webp взялся, если вы его не включали
За шесть лет абонентки я ни разу не видел, чтобы владелец сайта осознанно нажал кнопку «конвертировать всё в webp». Формат приезжает сам, с одной из четырёх сторон.
Плагин оптимизации
Самый частый источник на WordPress. Imagify, ShortPixel, Optimole, Converter for Media, EWWW, а также встроенный модуль в LiteSpeed Cache. Многие из них после установки сразу включают конвертацию в webp, потому что так лучше выглядят цифры PageSpeed. Часть плагинов при этом оставляет URL картинки прежним (/uploads/2026/03/foto.jpg), а по запросу отдаёт webp-содержимое. Это ключевой момент, к нему вернусь ниже.
CDN или прокси перед сайтом
Cloudflare с включённым Polish в режиме Lossless или WebP, ImageKit, Cloudinary, российские CDN уровня Selectel и Yandex Cloud CDN с обработкой изображений. Здесь сайт вообще ни при чём: на диске лежит jpeg, а пользователю уходит webp, сконвертированный на лету. Владелец смотрит в файловый менеджер, видит jpeg и искренне не понимает, о чём речь.
Хостинг и веб-сервер
На LiteSpeed-хостингах конвертация иногда включена на уровне панели. Плюс правило в .htaccess, которое поставил прошлый подрядчик и забыл упомянуть. Такое правило легко пережить смену темы, обновление CMS и даже переезд на другой хостинг вместе с архивом.
Сама CMS
Tilda отдаёт webp через свой CDN автоматически, спрашивать не будет. В Битриксе есть настройка конвертации изображений в webp в главном модуле, её включают вместе с композитом. WordPress с версии 5.8 принимает webp как обычный формат загрузки, но массовую автоконвертацию в ядро так и не завезли, её всегда делает плагин.
Как за пять минут понять, кто именно виноват
Не надо гадать. Запросите картинку двумя способами и сравните ответы.
# запрос "как из браузера", с поддержкой webp
curl -sI -H "Accept: image/avif,image/webp,image/*,*/*;q=0.8"
https://example.ru/wp-content/uploads/2026/03/foto.jpg
| grep -i -E "content-type|content-length|vary|server|cf-|x-litespeed"
# запрос "как из старой программы", без webp в Accept
curl -sI -H "Accept: image/jpeg,image/png,*/*"
https://example.ru/wp-content/uploads/2026/03/foto.jpg
| grep -i -E "content-type|content-length|vary"
Читаем результат:
Content-Type: image/webpпри обоих запросах, URL заканчивается на.jpg— вам подменяют содержимое без оглядки на клиента. Это самый опасный вариант, чинить в первую очередь.Content-Type: image/webpтолько на первом запросе и есть заголовокVary: Accept— подмена настроена правильно, по запросу клиента.- В ответе мелькает
cf-polishedилиcf-bgj— работает Cloudflare Polish, ищите переключатель в панели CDN, а не на сайте. x-litespeed-cacheвместе с webp — конвертирует LiteSpeed Cache.
Отдельно проверьте, что лежит на диске:
find ./wp-content/uploads/2026 -name "*.webp" | head -20
ls -la ./wp-content/uploads/2026/03/ | grep -i foto
Если рядом с foto.jpg лежит foto.jpg.webp или foto.webp, конвертирует плагин на вашем сервере. Если каталог чистый, а webp всё равно приходит, работает CDN.
Кто реально спотыкается о формат в 2026 году
Браузеры уже почти не проблема. По caniuse поддержка webp держится в районе 97 процентов трафика, а в России и того выше: Chrome, Яндекс.Браузер, свежие Safari и Firefox формат понимают. Оставшиеся доли процента это Safari на macOS 10.14 и старше и IE11, который живёт разве что в закрытых корпоративных сетях.
Ломается не показ на сайте, а всё, что происходит после скачивания.
| Где спотыкается | Что именно происходит | Что делать |
|---|---|---|
| Просмотр фотографий Windows 7 и 8 | скачанный файл не открывается | дать ссылку на оригинал |
| Word и PowerPoint до версии 2021 | картинка не вставляется в документ | оригинал в jpeg |
| Photoshop до 23.2 | нужен плагин WebPShop | оригинал |
| Старый Outlook и часть корпоративных почтовиков | картинка в письме не отрисовывается | в рассылках только jpeg и png |
| 1С, печатные формы, ценники | формат не поддерживается | оригинал в карточке товара |
| Типографии и наружная реклама | требуют tiff или jpeg в максимальном качестве | отдельный каталог с исходниками |
| Часть рекламных кабинетов и площадок | не принимает файл при загрузке | оригинал |
| Госпорталы и площадки закупок | форма загрузки отклоняет расширение | оригинал |
Обратите внимание на первую строку таблицы. У большинства жалоб причина не в самом формате, а в подмене содержимого без смены расширения. Браузер смотрит на Content-Type и показывает картинку нормально. Windows смотрит на расширение .jpg, зовёт просмотрщик для jpeg, тот видит внутри webp и разводит руками. Пользователь при этом уверен, что скачал обычную фотографию.
Клиент скачал картинку и не открыл: что отвечать
Пишу по шагам, потому что этот диалог повторяется у меня примерно раз в два месяца.
- Уточните, что именно он делал: правый клик и «Сохранить изображение» или переход по ссылке на файл. От этого зависит, куда смотреть.
- Попросите открыть скачанный файл перетаскиванием в окно браузера. Если открывается, значит с файлом всё в порядке, не хватает программы на компьютере.
- Посмотрите на расширение скачанного файла.
.jpgвнутри с webp это баг вашей настройки, а не проблема клиента. - Дайте прямую ссылку на оригинал. Это закрывает вопрос за минуту, пока вы чините корень.
Чего делать не надо: советовать клиенту установить конвертер, переименовать файл в .webp или обновить Windows. Формально это работает, по факту вы перекладываете свою техническую проблему на человека, который просто хотел посмотреть фотографию дивана.
Если картинки с сайта регулярно уходят наружу (каталог мебели, прайс, фотоотчёты с объектов), правильное решение это отдельная кнопка «скачать оригинал» рядом с изображением, ведущая на нетронутый jpeg в максимальном качестве. Пять минут работы в шаблоне, и тема закрыта навсегда.
Фолбэк, который не отменяет экономию
Есть два рабочих подхода. Они не конкурируют, я обычно ставлю оба на разные части сайта.
Разметка picture с несколькими source
Честный способ: браузер сам выбирает формат, который понимает, и никакой магии на сервере не происходит.
<picture>
<source srcset="/uploads/divan-960.avif 960w, /uploads/divan-1600.avif 1600w"
sizes="(max-width: 768px) 100vw, 960px" type="image/avif">
<source srcset="/uploads/divan-960.webp 960w, /uploads/divan-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 960px" type="image/webp">
<img src="/uploads/divan-960.jpg" alt="Угловой диван Осло в тканевой обивке"
width="960" height="640" loading="lazy" decoding="async">
</picture>
Порядок source важен: браузер берёт первый формат, который понимает, поэтому avif идёт раньше webp. Атрибуты width и height ставьте обязательно, иначе получите скачки вёрстки при загрузке. У картинки в первом экране loading="lazy" убирайте, там он вредит показателю LCP.
Минус подхода: нужно хранить три версии каждого файла и уметь их генерировать. На WordPress эту разметку умеют выдавать почти все плагины оптимизации, в Битриксе придётся править шаблоны компонентов руками.
Подмена на стороне сервера по заголовку Accept
Способ для случаев, когда шаблоны трогать нельзя или картинки вставлены в контент как попало за десять лет.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (?i)(.*).(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (?i)(.*).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
Строка с Vary Accept тут не украшение. Без неё промежуточный кэш (CDN, кэш хостинга, корпоративный прокси) один раз получит webp и начнёт раздавать его всем подряд, включая тех, кто webp не просил. Половина жалоб «у одного сотрудника картинки не открываются, у остальных всё нормально» растёт именно отсюда.
На nginx логика та же:
map $http_accept $webp_suffix {
default "";
"~*image/webp" ".webp";
}
location ~* ^/uploads/.+.(jpe?g|png)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
expires 365d;
}
Исключения для отдельных папок
Каталог с прайсами, шаблонами документов и исходниками для печати из конвертации лучше выключить целиком.
# в .htaccess, ДО правила конвертации
RewriteRule ^uploads/originals/ - [L]
RewriteRule ^docs/ - [L]
В плагинах оптимизации то же самое делается настройкой: у ShortPixel это «Exclude patterns», у Imagify список путей в расширенных настройках, у LiteSpeed Cache вкладка с исключениями по URI. Складывайте туда всё, что клиенты скачивают руками.
Сколько webp экономит на самом деле
Цифры с замеров на реальном сайте услуг, который я веду. Фотографии снимал не я, поэтому это честный клиентский материал, а не подобранный под красивый график.
| Что за картинка | Оригинал | webp q80 | avif | Экономия webp |
|---|---|---|---|---|
| Фото интерьера 1600×1067 | 312 КБ jpeg q85 | 129 КБ | 94 КБ | 59 процентов |
| Портрет сотрудника 800×800 | 96 КБ jpeg | 44 КБ | 33 КБ | 54 процента |
| Скриншот интерфейса 1440×900 | 214 КБ png | 78 КБ | 71 КБ | 64 процента |
| Логотип с плоской заливкой 400×120 | 6 КБ png | 7 КБ | 9 КБ | минус 16 процентов |
| Иконка 64×64 | 2 КБ png | 3 КБ | 4 КБ | хуже оригинала |
Главная страница целиком: 2,4 МБ картинок превратились в 1,05 МБ. LCP на эмуляции 4G упал с 3,4 до 2,1 секунды, PageSpeed на мобильных вырос с 46 до 71 балла. Дальше упёрлись в шрифты и сторонние скрипты, но это уже другая история, про неё есть отдельный разбор в статье про LCP больше 2,5 секунд.
Две честные оговорки к таблице.
Первая: на мелкой графике с плоскими цветами webp проигрывает png. Логотипы, иконки, простые схемы конвертировать смысла нет, а иногда вредно. Нормальный плагин это понимает и пропускает файлы, где результат тяжелее исходника, но проверять всё равно стоит.
Вторая: половина экономии на многих сайтах приходится не на формат, а на размер. Когда в контент вставляют фотографию 4000 пикселей шириной, а показывают её в блоке на 600, никакой webp не спасёт. Сначала уменьшайте до нужного размера, потом конвертируйте. Порядок именно такой.
Если хочется сделать всё руками, без плагинов:
# webp: качество 80 обычно неотличимо от оригинала на фото
cwebp -q 80 -m 6 -mt foto.jpg -o foto.jpg.webp
# avif: медленнее, но заметно легче
avifenc --min 24 --max 32 -s 6 -j all foto.jpg foto.jpg.avif
# пачкой по каталогу
find ./uploads -type f ( -iname "*.jpg" -o -iname "*.jpeg" )
-exec sh -c 'cwebp -q 80 -m 6 "$1" -o "$1.webp"' _ {} ;
# сверить результат
identify -format "%f %wx%h %bn" ./uploads/*.webp | head -30
AVIF: включать сейчас или подождать
AVIF даёт ещё 20-30 процентов сверху webp на фотографиях. Поддержка в 2026 году в районе 94-95 процентов: Chrome и Firefox давно, Safari с 16 версии, Edge подтянулся позже остальных. То есть примерно там же, где webp был в 2020-м.
Моя рекомендация простая: добавляйте AVIF первым source в picture, оставляя webp вторым и jpeg третьим. Тогда клиенты с современными браузерами получают самый лёгкий файл, остальные откатываются на webp, а совсем древние на jpeg. Схема без единой точки отказа.
Чего делать не стоит, так это повторять историю с webp и отдавать avif через подмену на сервере с прежним расширением. Все проблемы, описанные выше, вернутся в том же составе, только просмотрщиков, понимающих avif, пока меньше.
Ещё момент про ресурсы: кодирование avif заметно медленнее. На shared-хостинге массовая конвертация каталога на пару тысяч картинок легко упирается в лимит процессорного времени, и сайт на пару минут перестаёт отвечать. Гоняйте её по ночам батчами или локально, а на сервер заливайте готовое.
Что проверить после включения конвертации
Чек-лист, который прогоняю на приёмке. Занимает минут двадцать, экономит месяцы вялотекущих жалоб.
- [ ]
curlс Accept и без него отдаёт разное содержимое, заголовокVary: Acceptна месте. - [ ] Расширение файла соответствует содержимому либо стоит честный
pictureс фолбэком. - [ ] Открыть сайт в приватном окне и скачать три случайные картинки, проверить, что они открываются двойным кликом.
- [ ] Каталог с прайсами, документами и исходниками для печати исключён из конвертации.
- [ ] У товаров и портфолио есть ссылка на оригинал.
- [ ] Картинки в письмах рассылки остались в jpeg и png.
- [ ] Открытая графика в соцсетях: проверить превью через отладчик ссылок,
og:imageдолжен быть jpeg или png, многие площадки webp в превью не принимают. - [ ] Логотипы и иконки не стали тяжелее после конвертации.
- [ ] Кэш сброшен на всех уровнях: плагин, сервер, CDN, браузер.
- [ ] Замер PageSpeed до и после сохранён, чтобы был предмет для разговора.
- [ ] Sitemap изображений и микроразметка ведут на живые адреса, а не на исчезнувшие файлы.
Последний пункт про кэш выглядит формальностью ровно до того момента, когда вы час отлаживаете несуществующий баг. Правила отработали, файлы сгенерировались, а браузер показывает старое из своего кэша с годичным сроком жизни. Проверяйте всегда в приватном окне, а лучше через curl.
Когда webp лучше выключить совсем
Такие случаи редки, но они есть.
Первый: сайт фотографа, дизайнера или типографии, где изображение это товар, а не иллюстрация. Тут важнее контроль над качеством и совместимость, чем полсекунды загрузки.
Второй: аудитория с корпоративными парками старых машин. Заводы, госучреждения, медицина. Если в Метрике видите заметную долю Windows 7 и старых версий браузеров, посчитайте, сколько это людей в абсолютных числах, и решайте по цифрам, а не по общим соображениям.
Третий: маленький сайт, где картинок пять штук и они весят суммарно 300 КБ. Экономия составит 150 КБ, а поддерживать придётся ещё один слой настроек. Не стоит того. Начните с других вещей: лишних плагинов, шрифтов, сторонних виджетов.
Во всех остальных сценариях webp нужен. Просто настроенный так, чтобы клиент, скачавший фотографию, не звонил вам с вопросами.
Что делать дальше
Если у вас уже включена конвертация и появились жалобы, начните с двух запросов curl из второго раздела. Они за пять минут покажут, кто подменяет содержимое и делает ли это корректно. Дальше либо чините правило и добавляете Vary, либо переходите на честный picture, либо исключаете нужные каталоги.
Если конвертация ещё не включена, посмотрите сначала на размеры исходников. Обычно там лежит больше выигрыша, чем в самом формате. Детальный разбор с настройками качества и подбором инструментов есть в статье про сжатие изображений в webp и avif, а про то, как не грузить нижние картинки раньше времени, написано в материале про ленивую загрузку.
Могу разобраться с этим за вас: настройка формата и фолбэка входит в обычную абонентку, отдельно за это не беру. Условия и состав работ смотрите в тарифах, а если картинки перестали открываться прямо сейчас и клиенты уже пишут, напишите через форму на главной, посмотрю в тот же день. Остальные разборы по скорости собраны в рубрике про скорость.
Частые вопросы
Почему клиент не может открыть скачанную картинку
Потому что скачался файл в формате webp, а его программа просмотра старая. Браузеры формат понимают давно, а вот офисные программы и почтовые клиенты не всегда.
Сколько экономит webp
Порядка половины веса по сравнению с обычным фото: снимок на 312 КБ превращается в 129 КБ. На плоской графике с крупной заливкой формат может, наоборот, проиграть.
Как оставить экономию и не мучить клиентов
Отдавать webp браузеру, а для скачивания давать ссылку на исходный файл в привычном формате. Тогда страница остаётся лёгкой, а сохранённая картинка открывается везде.
Стоит ли переходить на AVIF
Он сжимает ещё плотнее, но поддержка уже, а кодирование медленнее. Разумно отдавать его как дополнительный вариант, оставив webp основным.