Django - Урок 056. Як конвертувати зображення у формат WEBP при збереженні у ImageField

ImageField, Django, WEBPField, webp, Python

WEBP - це формат стиснення зображень, запропонований Google в 2010 році. Головною його перевагою є низький розмір без видимих втрат якості, порівняно з такими форматами, як JPEG або PNG. Тому логічно використовувати цей формат для зберігання зображень на сайті, особливо якщо у вас немає необхідності зберігати оригінали зображень на сайті.

Після тривалих пошуків я так і не знайшов готового та простого рішення, яке б підтримувало конвертацію зображень у формат WEBP на льоту.
Тому вирішив написати свій варіант, який у підсумку складається з пари десяток рядків та простий як дерев'яна дошка.

Реалізація

Вся реалізація складається із двох частин:

• WEBPFieldFile - клас спадкоємець від ImageFieldFile, який здійснює збереження файлу з автоматичною конвертацією в WEBP формат.
• WEBPField - клас спадковий від ImageField, який використовує WEBPFieldFile замість ImageFieldFile

І все це розміщується в одному файлі fields.py.

Для роботи із зображеннями знадобиться бібліотека Pillow. Тому встановимо її. Втім, навіть просто для використання полів ImageField вам буде потрібна ця бібліотека.

pip install Pillow

fields.py

Створіть у своєму додатку файли fields.py і додайте до нього наступний код

# -*- coding: utf-8 -*-

import io

from PIL import Image
from django.core.files.base import ContentFile
from django.db import models
from django.db.models.fields.files import ImageFieldFile


class WEBPFieldFile(ImageFieldFile):

    def save(self, name, content, save=True):
        content.file.seek(0)
        image = Image.open(content.file)
        image_bytes = io.BytesIO()
        image.save(fp=image_bytes, format="WEBP")
        image_content_file = ContentFile(content=image_bytes.getvalue())
        super().save(name, image_content_file, save)


class WEBPField(models.ImageField):
    attr_class = WEBPFieldFile

Як бачите, в даному коді в класі WEBPFieldFile перевизначено метод save() який отримує як вхідний аргумент ім'я та вміст файлу для збереження, конвертує вміст файлу у формат WEBP і після чого методом базового класу зберігає файл на диск. А клас WEBPField такий самий як і ImageField з тією лише різницею, що використовує модифікований фаріант класу для обробки зображення.

models.py

А тепер давайте скористаємося новим полем зображення у нашій моделі для фотографії.

# -*- coding: utf-8 -*-

import os
import uuid

from django.conf import settings
from django.db import models
from django.utils.translation import gettext_lazy as _

from photo.fields import WEBPField


def image_folder(instance, filename):
    return 'photos/{}.webp'.format(uuid.uuid4().hex)


class Photo(models.Model):
    user = models.ForeignKey(to=settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    height = models.IntegerField(verbose_name=_('Height'), default=0, blank=True, null=True)
    width = models.IntegerField(verbose_name=_('Width'), default=0, blank=True, null=True)
    image = WEBPField(
        verbose_name=_('Image'),
        upload_to=image_folder,
        height_field='height',
        width_field='width'
    )

Як бачите, використання даного поля WEBPField нічим не відрізняється від використання стандартного поля ImageField .

А як бонус в даному коді до функції image_folder я додав генерування випадкового унікального імені файлу за допомогою uuid .