FEATURE REQUEST: Adding support for WEBP images

[AnderUstarroz]

Current version of easy-thumbnails doesn't support Webp images. WebP lossless images are 26% smaller in size compared to PNGs and WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent quality.

Honestly I don't know if this would be hard to implement or not, but Webp probably is going to become a web standard at some stage, therefore adding support for this format would be a great improvement.

[jrief]

Since Pillow supports WebP, it should not be too hard to implement this feature.

Anybody here, who wants to do that?

[jrief]

Indeed, it's not hard at all and you don't even have to patch the code. Here are instructions: https://easy-thumbnails.readthedocs.io/en/latest/ref/webp/

I will not add WebP supported to easy-thumbnail itself, before it is supported by the native <img src="..." /> element in all browsers. Until then please use the provided workaround.

[anderspetersson]

Please consider opening this issue and adding native WebP support, it's supported in the latest version of all major browsers:https://caniuse.com/?search=webp

[uKev]

Please consider opening this issue and adding native WebP support, it's supported in the latest version of all major browsers:https://caniuse.com/?search=webp

+1

[peterschwarzdev]

Some libraries like Django Filer (currently used by many thousands of devs) depends on this package and won't be able to load WebP images. I think adding WebP support would be a wise decision.

[jrief]

@peterschwarzdev did you check this workaround?

Next question, would you leave JPEG as JPEG or convert it to WEBP? django-filer currently always keeps the current file format, unless explicitly requested.

[mireq]

@jrief this workaround is not correct. It has terrible flaws:

• thumbnail is not recorded to database - delete_thumbnails will not work (only jpeg/pngs will be deleted)
• webp images are not generated when they are missing (for example when i enable webp support i need to delete all thumbnails to trigger signals)

My workaround is: According to https://github.com/SmileyChris/easy-thumbnails/blob/0e44900433c955bfb91e9e4fdf60611f0ede1e98/easy_thumbnails/engine.py#L47 it is sufficient to generate thumbnail filename with .webp extension.

So i added output_format='webp' parameter to thumbnail tag

{% load thumbnail %}
...
<picture>
  {% thumbnail image 400x300 as img %}
  {% thumbnail image 400x300 output_format=webp as webp %}
  <source srcset="{{ webp.url }}" type="image/webp" />
  <img src="{{ img.url }}" />
</picture>

and implemented own thumbnail namer:

import base64
import hashlib

def hashed(source_filename, prepared_options, thumbnail_extension, **kwargs):
    output_format = kwargs.get('thumbnail_options', {}).get('output_format')
    if output_format:
        thumbnail_extension = f'{thumbnail_extension}.{output_format}'
        prepared_options = [opt for opt in prepared_options if opt != f'output_format-{output_format}']
    digest = hashlib.sha1(':'.join(prepared_options).encode('utf-8')).digest()
    safe_hash = base64.urlsafe_b64encode(digest[:15]).decode('utf-8')
    return '.'.join([source_filename, '_'.join(prepared_options[:1] + [safe_hash]), thumbnail_extension])

This will generate thumbnail with added extension .webp. If webp does not exist - it will be created. Method delete_thumbnails will delete all thumbnails, not only png/jpeg.