Скорость сайта

Сайт отдаёт webp, а клиенты жалуются: совместимость и запасные варианты

Почему картинки скачиваются в формате webp, какие браузеры и программы его не понимают и как настроить фолбэк, не потеряв скорость сайта.

12 минут чтения 1 Дмитрий Акиндинов
Содержание
  1. Откуда webp взялся, если вы его не включали
  2. Как за пять минут понять, кто именно виноват
  3. Кто реально спотыкается о формат в 2026 году
  4. Клиент скачал картинку и не открыл: что отвечать
  5. Фолбэк, который не отменяет экономию
  6. Сколько webp экономит на самом деле
  7. AVIF: включать сейчас или подождать
  8. Что проверить после включения конвертации
  9. Когда webp лучше выключить совсем
  10. Что делать дальше
  11. Частые вопросы

Поддержка webp в браузерах держится около 97 процентов трафика, поэтому проблема почти никогда не в показе на сайте. Спотыкаются на скачанных файлах: клиент сохраняет картинку и не может открыть её в старой программе. Экономия при этом реальная, около половины веса.

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

Конвертация изображения из jpeg в webp на сайте

Сразу оговорю позицию: 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 и разводит руками. Пользователь при этом уверен, что скачал обычную фотографию.

Клиент скачал картинку и не открыл: что отвечать

Пишу по шагам, потому что этот диалог повторяется у меня примерно раз в два месяца.

  1. Уточните, что именно он делал: правый клик и «Сохранить изображение» или переход по ссылке на файл. От этого зависит, куда смотреть.
  2. Попросите открыть скачанный файл перетаскиванием в окно браузера. Если открывается, значит с файлом всё в порядке, не хватает программы на компьютере.
  3. Посмотрите на расширение скачанного файла. .jpg внутри с webp это баг вашей настройки, а не проблема клиента.
  4. Дайте прямую ссылку на оригинал. Это закрывает вопрос за минуту, пока вы чините корень.

Чего делать не надо: советовать клиенту установить конвертер, переименовать файл в .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 q80avifЭкономия webp
Фото интерьера 1600×1067312 КБ jpeg q85129 КБ94 КБ59 процентов
Портрет сотрудника 800×80096 КБ jpeg44 КБ33 КБ54 процента
Скриншот интерфейса 1440×900214 КБ png78 КБ71 КБ64 процента
Логотип с плоской заливкой 400×1206 КБ png7 КБ9 КБминус 16 процентов
Иконка 64×642 КБ png3 КБ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 основным.

Передайте техническую часть в надёжные руки.

Слежу за хостингом, бэкапами и обновлениями. Когда что-то пойдёт не так – звоните мне, не своему программисту, не в спортзал и не маме.

Короткие вопросы по теме

Все вопросы по теме "Скорость сайта"

Заявка

Обсудим задачу

Напишите имя и телефон, выберите удобный канал. Перезвоню или напишу в течение часа в рабочее время.

Куда удобнее ответить?