A Django app to create webp-doubles.
Project description
Приложение django-webp-doubles предназначено для осуществления отдачи webp-изображений без существенных изменений в кодовую базу django-проектов:
1. Создание webp-изображений, для каждого jpg/png-изображения.
2. webp-дубль сохраняется с тем же названием и в ту же папку, что и оригинал, напр. /some/path/image.jpg и /some/path/image.webp.
3. Прокси-сервер (в данном случае nginx), используемый для отдачи статики и медиа, оценивает, поддерживает ли обращающийся браузер webp-изображения, и если да - отдает webp-изображение, в противном случае - jpg-оригинал.
Установка
Добавьте приложение в INSTALLED_APPS:
INSTALLED_APPS = [
...
'webp_images',
]
Перечислите модели и их поля, содержащие изображения, для которых необходима поддержка webp-изображений в настройках проекта:
MODELS_WITH_IMAGES_FOR_WEBP = {
'core.Gallery': ['desktop_image', 'mobile_image', ],
'core.GalleryItem': ['image', ],
'core.News': ['main_image', ],
'core.Page': ['image', ],
...
}
Допустимо указывать поля типа: ImageField и FilerImageField.
3. Запустите комманду python manage.py create_webp_doubles, чтобы сформировать webp-дубли уже сохраненных изображений. Данный шаг необходим только при установке приложения в уже работающий проект с сохраненными изображения. В дальнейшем, webp-дубли будут формироваться автоматически при сохраненнии моделей.
Добавьте в конфигурацию nginx-сервера следующий сервис:
server {
listen 9001;
allow 127.0.0.1;
deny all;
# подразумевается, что
# static - /usr/share/nginx/html/static
# media - /usr/share/nginx/html/media
root /usr/share/nginx/html;
if ($uri ~ ^/(\d+|-)x(\d+|-)/) {
set $w $1;
set $h $2;
}
# Замена оригинального изображения на webp-дубль, при условии поддержки браузером webp-формата
if ($http_accept ~* "webp") {
rewrite ^(.*)\.(jpg|jpeg|png)$ $1.webp last;
}
# Обрезка webp-изображений
location ~ ^/(?:\d+|-)x(?:\d+|-)/crop(/(static|media)/.*)\.(?:webp|WEBP)$ {
try_files $1.webp $1.jpg $1.jpeg $1.png;
image_filter_buffer 20M;
image_filter crop $w $h;
image_filter_interlace on;
expires max;
break;
}
# Ресайзинг webp-изображений
location ~ ^/(?:\d+|-)x(?:\d+|-)(/(static|media)/.*)\.(?:webp|WEBP)$ {
try_files $1.webp $1.jpg $1.jpeg $1.png;
image_filter_buffer 20M;
image_filter resize $w $h;
image_filter_interlace on;
expires max;
break;
}
# Обрезка оригинальных изображений
location ~ ^/(?:\d+|-)x(?:\d+|-)/crop(/(static|media)/.*)\.(?:jpg|JPG|jpeg|JPEG|gif|GIF|png|PNG)$ {
rewrite ^/[\w\d-]+/crop(.*)$ /$1;
image_filter_buffer 20M;
image_filter crop $w $h;
image_filter_interlace on;
expires max;
break;
}
# Ресайзинг оригинальных изображений
location ~ ^/(?:\d+|-)x(?:\d+|-)(/(static|media)/.*)\.(?:jpg|JPG|jpeg|JPEG|gif|GIF|png|PNG)$ {
rewrite ^/[\w\d-]+/(.*)$ /$1;
image_filter_buffer 20M;
image_filter resize $w $h;
image_filter_interlace on;
expires max;
break;
}
location ~ ^(/(static|media)/.*)\.webp$ {
try_files $1.webp $1.jpg $1.jpeg $1.png;
expires max;
}
}
Разместите перенаправления в данный сервис в основных частях конфигурации:
server {
...
location ~ ^/(static|media|(?:\d+|-)x(?:\d+|-))/.*\.(jpg|JPG|jpeg|JPEG|gif|GIF|png|PNG|webp|WEBP)$ {
proxy_pass http://127.0.0.1:9001;
proxy_set_header Accept $http_accept;
expires max;
}
...
}
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.