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, которого не существует.

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

if ($webp_ext) {
    rewrite ^([a-zA-Z0-9-_\/]+)([.a-zA-Z0-9]+)(png|jpe?g)$ $1.$3.webp last;
}

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

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

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

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


Ответы (0 шт):