Search code examples
djangojpegamp-htmlwebp

Django | Serve two uploaded images version - WebP and JPEG

I just want to ask you for a best practice, how to serve both WebP and JPEG images via Django to users.

I have a website about vehicles - there are about 1 000 vehicles added every day and every vehicle has about 10 images. That is a lot of images. I have made a custom "import django-admin command", which parse a vehicle:

  1. It downloads a JPEG image from the source (10 images for a single vehicle)
  2. Then for all downloaded images a watermark is applied
  3. After that, this image is converted to WebP format and uploaded via Django save() to Images table, which has a ForeignKey to a Vehicle (I am using ImageField for that)
  4. Then it compresses original JPEG images and via shutil.move these compressed JPEG images are moved to the same folder, where WebP image formats are stored.

Because I am using an AMP HTML, I can simply do a fallback from WebP to JPEG for browsers, which has no WebP support. And because images are in the same /media/.../ folder, it works perfectly.

But today I have found, that this method is not perfect. When there are the same image names, Django in save() method get_random_string() method, which generates extra 7 characters at the end of file https://github.com/django/django/blob/master/django/utils/crypto.py

So my shuitl.move() method fails:

shutil.Error: Destination path '/home/django/exampleproject/media/2020/12/10/example-compressed-image-img01.jpg' already exists

And I don't know, how to figure out, how to get the same name for this JPEG file - how to get this hash at end of the file. The filename must be the same - for WebP and JPEG, the only extension must be different. Of course, I can list all files, find those hashes and try to append them... but I think, this method is not perfect.

The best method will be to use only WebP images, but not all browsers support it. It is really important for me to use WebP because of SEO - it has keywords in filename.

Is there any better way, how to save WebP and JPEG images in ImageField to the same upload_to directory, with the same name (also when Django will rename it when filename already exists)? I don't want to use two tables for that or two columns, because it is a lot of string and if I will have 10M+ records in the future, that is a lot of data in DB.

I will be glad for any advice, thanks!

Solution

  • I've addressed a similar issue by inserting a uuid into filenames. Here's an example of that. Enforce unique upload file names using django?

    Another option would be to upload to S3, which will automatically create unique filenames as needed, then run a lambda function against new uploads to generate the second image & filename.