Nginx + django + ManifestStaticFilesStorage + webp

Пытаюсь настроить nginx таким образом, что бы он возвращал webp версию изображения, если его поддерживает браузер. У меня получилось это сделать без ManifestStaticFilesStorage прописав следующий код:

nginx.conf

http {
    ...
    map $http_accept $webp_ext {
        default "";
        "~*webp" ".webp";
    }
    ...
}

default.conf

server {
    ...
    location ~* ^.+\.(png|jpe?g)$ {
        alias /home/dev/site/alpha/public_html;
        expires 365d;
        add_header Vary Accept;
        try_files $uri$webp_ext $uri =404;
    }
    ...
}

Обращаясь к файлу logo.png, получаю logo.png.webp

Ок, теперь xочу, что бы у пользователей logo.png загружался заново, если он был изменен на стороне сервера. Для этого в settings.py прописываю следующее:

DEBUG = False
STATIC_ROOT = '../public_html/static/'
MEDIA_ROOT = '../public_html/media/'
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

Собираю статику:

python manage.py collectstatic

Теперь в public_html лежат следующие файлы:

logo.png
logo.3a8e6bf8de21.png
logo.png.webp
logo.png.b089033dcdda.webp

Запускаю сервер и при обращении к logo.3a8e6bf8de21.png nginx пытается найти logo.3a8e6bf8de21.png.webp, которого не существует.

Попробовал сделать так:

location ~ ^([a-zA-Z0-9-_\/]+)([.a-zA-Z0-9]+)(png|jpe?g)$ {
    alias /home/dev/site/alpha/public_html;
    expires 365d;
    add_header Vary Accept;
    try_files $1.$3$webp_ext $uri =404;
}

Ожидал от запроса к logo.3a8e6bf8de21.png получить logo.png.webp, но вот что пишут логи nginx:

trying to use file: "..webp" "/home/dev/site/alpha/public_html..webp"

Если поменяю $1.$3$webp_ext на $1.$3.webp, то ответ получаю верный, но тогда пропадает проверка на поддержку webp браузером.

Мне кажется, я иду не в том направлении. Наверное нужно ManifestStaticFilesStorage научить самостоятельно создавать webp файлы с именем оригинала + ".webp". Например, для logo.3a8e6bf8de21.png создавал logo.3a8e6bf8de21.png.webp

Почему бы мне просто в html не использовать picture? Я бы с радостью, но что тогда делать с backgroud-image в css? Да, есть image-set, но его type() работает лишь в Firefox.

У меня цель реализовать хоть минимальную кросс-бразерность и повысить скорость работы сайта.

Буду благодарен за любую помощь...

Вернуться на верх