Using Python to Convert Images to WEBP

On each of our course pages, we include an image like this one that is meant to represent the course:

The image is in WebP format. This one was converted from the following png file:

The WebP file (4 KB) is nine times smaller than the png file (36 KB).

Although Google offers conversion tools for all major operating systems, you can easily roll your own with Python and Pillow. Here’s how:

1. Create a webp folder for storing your code.
2. Create and activate a virtual environment.
3. Install Pillow with pip:

   pip install Pillow

4. Create a subfolder within the webp folder called images and put some png files in there. You can download these images if you don’t have any handy.
5. Create a convert.py file within the webp folder. This is where you’ll write the code.
6. Import Path from pathlib:

   from pathlib import Path

   Our function will take a source Path to the png file and return a destination Path to the WebP file.
7. Import Image from PIL:

   from PIL import Image

   This is what we will use to do the conversion.
8. Write the convert_to_webp() function:

   def convert_to_webp(source):
       """Convert image to WebP.
   
       Args:
           source (pathlib.Path): Path to source image
   
       Returns:
           pathlib.Path: path to new image
       """
       destination = source.with_suffix(".webp")
   
       image = Image.open(source)  # Open image
       image.save(destination, format="webp")  # Convert image to webp
   
       return destination

   1. The with_suffix() method of a Path object replaces the current suffix with a new suffix.
   2. The conversion process is just two steps:
      1. Open the image with Image.open() passing in the source.
      2. Save the image with Image.save() passing in the destination and the format.

That’s all there is to it. You can call the function like this:

convert_to_webp(Path("images/PYT138.png"))

from pathlib import Path
from PIL import Image


def convert_to_webp(source):
    """Convert image to webp.

    Args:
        source (pathlib.Path): Path to source image

    Returns:
        pathlib.Path: path to new image
    """
    destination = source.with_suffix(".webp")

    image = Image.open(source)  # Open image
    image.save(destination, format="webp")  # Convert image to webp

    return destination


def main():
    paths = Path("images").glob("**/*.png")
    for path in paths:
        webp_path = convert_to_webp(path)
        print(webp_path)


main()

Converting to WebP in Django Admin

On our site, we provide a fallback image using code like this, which instructs the browser to use the first supported image type:

<picture>
    <source srcset="PYT138.webp" type="image/webp">
    <source srcset="PYT138.png" type="image/png">
    <img src="PYT138.png" alt="Introduction to Python 3 Training">
</picture>

In Django admin, we only upload the png file and we use code similar to that described above to create a WebP file: The Update WebP link shown in the bottom right of the image uses Ajax to call a view that converts the image.